淘宝网的前端开发团队是业界最优秀的前端开发团队之一。淘宝网和淘宝商城的每一个页面都凝结了淘宝前端开发者的心血——他们关心用户操作和感受，力求给用户最好的体验。
KISSY是淘宝前端团队自主设计的一个Javascript 类库，其设计原则是“小巧灵活、简洁实用，使用起来让人感觉愉悦”。KISSY还封装了一些常用的组件，比如图片轮播等各种Switchable组件，被广泛的应用到了淘宝网和淘宝商城的各个角落，但今天的主角……呃……好像是它，也许不是它，这并不重要，先让我们来试试基于jQuery的仿淘宝网图片轮播效果的实现，并作一些浅显的反思。
博主曾写过一个简单的jQuery幻灯插件Xslider。那么能不能通过对Xslider的定制，制作出符合我们要求的轮播效果呢？答案是可以的。下面我们看代码以及Demo：
Code:
Demo:
可以看到，通过对博主的Xslider插件进行简单的定制，我们貌似就可以做出类似淘宝商城的各种轮播特效。
然而实际工作中，需求往往是变化多端的，我们还应该考虑在其他情况下插件的可重用性：比如图片轮播每次不是切换单一张图片，而是多张图片；比如轮播的形式不仅仅是图片，有可能是文字，甚至每张幻灯片的版面都截然不同；再比如怎么去构建一个本质上与轮播类似的tab（标签）页（可能还要实现内容的AJAX加载）——诸如此类的情况我们在插件设计的时候也应该尽量考虑到。
反观博主自己开发的Xslider插件，一旦有新需求，往往会比较依赖对css、HTML结构、甚至是插件代码的修改以适应新需求，代码可重用的程度仍然比较低，而且长期这么修修补补，代码也容易变臃肿。其根本原因就是没有去分析这些特定需求、场景，从而进行不同层次的抽象，真正达到组件化。
当然，这么做也有好处就是，只进行了一层抽象，结构清晰，比较容易理解。
说到这里，竟免不了要拿jQuery的插件与KISSY的组件进行一番比较。可博主没有用过KISSY，只看过少量的文档，进行这番比较难免断章取义，所以留给读者和自己将来再作对比，暂且打住……mark here
那么在前端代码中，我们应该怎样做才能确保插件（组件）的可重用和扩展性呢？下面一段摘自《行进中的前端类库：KISSY》，供大家参考。
KISSY的组件严格遵守适度灵活原则，在特定的场景下进行设计。任何抽象场景，都有不同的抽象层次。比如淘宝首页的图片轮播，至少有以下三种层次的抽象：
- 图片轮播是可轮播的多张图片
- 图片轮播是可切换的一组内容
- 图片轮播是对命令的响应
第一种抽象，会让我们做出像TBra里的SimpleSide类似的组件，功能很纯粹单一。大部分站点用jQuery等代码实现的图片轮播，也是基于这种简单明了的抽象。
第二种抽象，会让我们思考更多。比如图片轮播和标签页切换的关系，从这一层的抽象来讲，标签页和轮播图片本质上一样的，都是一组可切换的内容。在这一层抽象上，我们就可以实现Switchable（可切换）组件，有了Switchable，所有可以抽象为可切换内容的可视化组件，就都可以快速基于Switchable来实现，而不是全新写一个。在淘宝首页上，大部分可视化组件都是Switchable组件，非常便捷。
第三层抽象，很抽象，但抽象层次越高，落地越难。基本所有交互组件，都可以抽象成为对用户行为的响应。适度灵活原则，能避免我们掉入过度抽象的陷阱。
近期评论