构建前端UI组件的新思路

通过这种方式，我们无需用到任何继承概念，没有super，没有extend，利用JavaScript的原生动态语言特性，就比较完美地解决了问题。

从Switchable的角度看，上面三个组件可以描述为：

Tabs是普通的Switchable组件。

Slide是可自动切换且切换时有特效的Switchable组件。

Carousel是可自动切换、切换有特效、可循环切换的Switchable组件。

来看下Slide的实现，变得非常简单：

var　defaultConfig　=　{　
autoplay:　true,　
circular:　true　
};　
Function　Slide(container,　config)　{　
　　config　=　S.merge(defaultConfig,　config);　
　　Slide.superclass.constructor.call(this,　container,　config);　
}　
S.extend(Slide,　S.Switchable);　

这里用到了类似YUI的extend方法，实现了继承，同时较好的保持了JavaScript的原汁原味。

可以看出，Tabs、Slide和Carousel组件，彼此之间没有本质差别。封装出这三个类，仅仅是为了让开发者能方便快捷的调用（这些是高级 API）。对于资深开发者来说，在实例化Switchable时，通过传入不同参数即可实现所需效果（Switchable是中级API）。

更有意思的事情是，换一种思路实现代码后，也能帮助我们换一种思路看世界：

这个组件，可以看成是触点为图片的Tabs组件。左右两个翻页，无非是调用next/prev方法。进一步：

Tabs组件可以看成是仅有基本切换功能的Slide。

Slide可以看成是触点悬浮在图片上面的Tabs。

等等等等

最后会发现，这三个组件，本身就是相通的。原本同一物，何必分开实现呢？我们可以得到一个结论：

只要符合switchable可切换特性的UI组件，原则上都可以通过Switchable实现。
唯一限制的是您的想象力！

比如，在Switchable的基础上，我们可以进一步实现Album（画报），实现CoverFlow（仿iTunes的封面切换效果）等等。

上面对UI组件的思维角度是可切换（Switchable），这是一个形容词。进一步思考，我们还可以得到以下形容词：

Draggable – 可拖曳的

Positionable – 可定位的

Selectable – 可选择的

Sortable – 可排序的

Stackable – 可堆叠的

Clickable – 可点击的

Ajaxable – 可ajax的

…

在这种新思路下，前端UI组件的基本组成要素已不是Panel、Memu和Button等传统UI基础单元，而是上面这些形容词。假设我们要实现一个可拖曳的可动态加载数据的可排序的表格时，或许像下面这样写一行代码就实现了：

S.Widget(‘tableId’).draggable().ajaxable().sortable();

这是一个梦想。但有梦，去追，说不定就能实现。