构建前端UI组件的新思路

核心提示： 传统思路里，我们会构建三个组件来实现：Slide（轮播）组件Tabs（标签页）组件Carousel（旋转木马）组件Tabs组件，构建前端UI组件的新思路(2)，我相信任何一个前端开发工程师最多半天都能搞定，而且还能把延迟触发、动态加载等特性也给实现了，如果我们实现了一个可切换（Switchabl

传统思路里，我们会构建三个组件来实现：

Slide（轮播）组件

Tabs（标签页）组件

Carousel（旋转木马）组件

Tabs组件，我相信任何一个前端开发工程师最多半天都能搞定，而且还能把延迟触发、动态加载等特性也给实现了。Slide组件也不难。Carousel组件看起来稍微复杂一些，但熬上一个通宵研究研究循环的实现，也不是什么大难题。

上面是传统思路。新思路是：我们真的需要分三个组件来实现吗？

仔细思索，我们可以提取出这三个组件的共同点：

都有一组触点（Triggers）。 Slide的触点是数字，Tabs的触点是标签头，Carousel的触点是小图。

都有一组面板（Panels）。就是内容区域。

通过触点可以让面板切换（Switch）。

上面的几条里有一个很重要的概念：切换。所有这些组件的共同点是可切换的。如果我们实现了一个可切换（Switchable）组件，上面三种组件就都是特例了。

根据上面的抽象，很容易实现switchable.js：

function　Switchable(container,　config)　{　
　　…　
}　
S.mix(Switchable.prototype,　{　
init:　function()　{　}　
switchTo:　function()　{　}　
next:　function()　{　}　
prev:　function()　{　}　
});