淘宝前端javascript类库选择原因

注：本文已发表于程序员杂志。下面的文字总体结构未变，细节稍有修改。）

书写干净漂亮的代码非常不易。作为前端工程师，还得处理恼人的浏览器兼容性问题。Protoype, jQuery, YUI, MooTools 等各种 JavaScript 类库，都是为了让前端工作更轻松自如。下面将介绍前端类库 KISSY 的起因、设计原则和核心功能，以及相关开发流程和社区建设。

起因

已经有了 jQuery, YUI 等优秀类库，为什么还要自主研发前端类库？这个问题和淘宝的发展历程息息相关。

2006年之前，淘宝最早期的时候，页面非常简单，视觉、交互和前端开发，基本上都能由一个人从头做到尾。这个时期，脚本用得不多也不复杂，用不用类库都无所谓。

2007年开始，随着淘宝业务的快速发展，页面的数量和复杂性迅速增加。淘宝UED开始有专职的前端工程师，但人数只有5人。面对繁重的业务需求， 寻求一个高效稳定的JavaScript类库显得非常重要。由于当时阿里和YAHOO的密切关系，淘宝很自然地选择了YUI类库。YUI为淘宝的前端发展 立下了汗马功劳。

很快，2007年下半年开始，淘宝的前端工程师发现，页面上的不少通用功能，都不能直接套用YUI的现有组件来完成。比如图片轮播、弹出层等，如果直接用 YUI的组件，会导致要加载的文件很大，修改成本还不低。于是淘宝开始基于YUI的核心功能，实现了一套常用组件，加上一些实用的辅助工具类，形成了淘宝 的第一代前端类库：TBra.

TBra 由 YUI Core 和 SimpleSlide 等实用组件组成。到 2008 年年初已趋于稳定。2008年是淘宝飞速发展的一年，前端开发工程师增加了近3倍，达到14人。

2008年到2009年，淘宝的业务更加迅猛增长。这两年里，jQuery风靡全球。jQuery简明易用的API风格，征服了大量Web开发者。 YUI2是个优秀的类库，但在全球对“Write less, do more”渴望中，YUI2的传统API风格越来越不受前端工程师待见。

2009年6月份，YUI团队发布了YUI3 beta版本。YUI3借鉴了jQuery的不少API设计，从整体架构到代码实现，与YUI2有很大不同。YUI3激荡人心，但试用下来却让人感觉沮 丧：虽然是颗粒化的可按需加载，但常用功能打包后依旧偏大；9月份发布正式版后，稳定性上也并不如意。期望后的失落，最是难受。

2009年年底，淘宝前端工程师翻了一倍，增加到30人。面对淘宝旺盛的业务需求，面对大量工程师对jQuery的认可，面对YUI2的落伍与缓慢更新，面对YUI3的诸多不如意，所有问题交织汇集在一起，淘宝前端面临着以下几条路：

1. 继续使用YUI2, 完善TBra
2. 全面升级到YUI3, 包括TBra
3. 全面迁移到jQuery
4. 混用YUI2, YUI3和jQuery
5. 基于jQuery开发组件类库
6. 自主开发全新类库

所有这些选择，在方向上，没有孰对孰错。jQuery非常适合中小型站点的快速开发，但对大型团队的合作来说，YUI内禀的代码组织方式更佳。 YUI3在当时还不够稳定成熟，API的设计上，对普通开发人员也不够友好易用。TBra的设计初衷是快速、简单、易用，但在代码组织和可扩展性上，已逐 步暴露出局限性。综合各种考虑，最后只剩下两条路：

1. 基于jQuery 开发组件类库，典型代表：豆瓣的Do类库
2. 自主开发全新类库，典型代表：淘宝的KISSY类库、百度的Qwrap类库、腾讯的Jet类库等等

方向对了，走什么路，关系并不大，最重要的是坚持往前走。 以上是淘宝选择自主研发前端类库KISSY的心路历程。

设计原则

爱因斯坦说：“让一切尽可能简单，但不要过于简单。”在设计领域，KISS代表简约原则：“Keep It Simple, Stupid”. KISSY的命名和设计原则皆源于此，诠释为一句话是：

小巧灵活、简洁实用，使用起来让人感觉愉悦。

小巧是相对小巧。 考虑国内的网络状况，还有不少用户在使用512K的宽带，以及BT软件、视频站点的流行，要让 用户快速打开页面，在国内并不是一件容易的事。对于前端类库来说，小巧的体积非常有必要。jQuery的体积可以接受，YUI3在这一点上则处于劣势。 KISSY会在功能和体积上权衡，尽量小巧。

灵活是适度灵活。 设计领域有个值得推崇的原则：针对场景进行设计。KISSY核心功能的取舍，KISSY组件的特性选择，所有一切，都会尽量从实际需求出发，在总结归纳的通用使用场景下进行设计。适度灵活需要我们懂得舍弃，在精简小巧和可扩展性上不断权衡。

简洁实用是基本要求。 放在设计原则里，是为了能时刻提醒类库开发者保持落地。一个类库，并非功能越强大越好。完美的诠释有多种。对于KISSY来说，保持API的简单易用，保持功能的精简实用，不求全但求精，力求用短小的代码完成常用的80%的功能，这就是KISSY追求的一种完美。

使用起来让人感觉愉悦，这是更高层次的追求。 我们期望在使用KISSY时，你不会感觉枯燥乏味，甚至不会觉得这是工作，而会感觉是在和一位老朋友愉悦交流。在你想用到某个功能时，你的直觉就能指引你应该调用哪个API，而无需过多地去查阅文档。

除了想给类库使用者带去愉悦体验，我们还希望基于KISSY搭建的网站，网站的用户能获得非常好的浏览体验和使用体验。KISSY的不少组件，内置 了对可用性的考虑，简单如标签页切换的延迟，复杂如富文本编辑器的交互体验，所有这一些，默认就尽量去让用户能更好的使用。我们相信，这很有价值。

核心功能

KISSY从设计之初，就尝试从各个类库中存精去芜，核心功能包括：

种子（Seed）是使用KISSY的入口。通过种子文件，你可以自由灵活地加载所需要的组件。比如要在页面中使用日历，仅需如下书写代码：

<div id=”cal”></div>
<script src=”path/to/kissy/seed-min.js”></script>
<script>
KISSY.use(‘calendar’, function(S) {
    var cal = new S.Calendar(‘#cal’);
    // more code
});
</script>

seed-min.js 就是KISSY的种子文件，gzip后大小不到5KB. 页面中仅需引入它，就可以自由加载KISSY的任何组件。

核心（Core）包括dom, event, ajax, anim, node, data等一系列常用功能。这些功能绝大部分是各大前端类库的标配。KISSY借鉴了jQuery简明易用的API设计风格，同时采纳了YUI3的颗粒化代码组织方式。一段典型代码如下：

<script>
KISSY.use(‘core’, function(S) {
    S.one(‘#id’).on(‘click’, function(ev) {
        ev.preventDefault();
        this.addClass(‘active’);
});
});
</script>

种子和核心是构建各种组件的基石，详细功能请参考KISSY的文档 。

组件（Components）包括工具类组件（Utilities）和可视化组件（Widgets），是KISSY最重要的组成部分。组件的公共接口和配置，都尽量保持了内在的一致性。能让你在学会使用KISSY的一个组件后，能马上推测出其它组件的使用方式。

KISSY的组件严格遵守适度灵活原则，在特定的场景下进行设计。任何抽象场景，都有不同的抽象层次。比如淘宝首页的图片轮播，至少有以下三种层次的抽象：

1. 图片轮播是可轮播的多张图片
2. 图片轮播是可切换的一组内容
3. 图片轮播是对命令的响应

第一种抽象，会让我们做出像TBra里的SimpleSide类似的组件，功能很纯粹单一。大部分站点用jQuery等代码实现的图片轮播，也是基于这种简单明了的抽象。

第二种抽象，会让我们思考更多。比如图片轮播和标签页切换的关系，从这一层的抽象来讲，标签页和轮播图片本质上一样的，都是一组可切换的内容。在这 一层抽象上，我们就可以实现Switchable（可切换）组件，有了Switchable，所有可以抽象为可切换内容的可视化组件，就都可以快速基于 Switchable来实现，而不是全新写一个。在淘宝首页上，大部分可视化组件都是Switchable组件，非常便捷。

第三层抽象，很抽象，但抽象层次越高，落地越难。基本所有交互组件，都可以抽象成为对用户行为的响应。适度灵活原则，能避免我们掉入过度抽象的陷阱。

除了Switchable等常用组件，KISSY里还专门为部分复杂组件打造了子品牌专区，目前有KISSY DPL（设计模式库）、KISSY Editor（富文本编辑器）、KISSY AJBridge（Flash相关功能）、NodeJS-KISSY（让KISSY运行在NodeJS上）等。详细内容，请关注我们的文档和社区。

开发流程

一个类库要持续发展，需要一套行之有效的流程来保障。KISSY的开发流程可以总结为下图：

KISSY组件的开发非常重视预研阶段。我们建议每一个开发成员，至少花一半时间在组件的预研上。预研可以保证针对场景进行设计，可以让最后产出的公共API能被大家一致认可，能符合KISSY设计的整体要求。

在开发阶段，我们推荐BDD（行为驱动开发）。良好的BDD习惯，和代码评审机制，能让我们的代码可靠，团队成员也能在过程中得到技能成长。

单元测试框架目前KISSY选择的是Jasmine, 目前还处于摸索起步阶段。但有热情和信心，就不怕远。

社区建设

KISSY是完全开源的，目前放在github平台上管理。相关社区信息如下：

• 源码：http://github.com/kissyteam
• 文档：http://kissyteam.github.com/
• 博客：http://kissyui.com/blog/

KISSY已正式发布1.1.5版，下一个版本是1.2, 将于今年12月份正式发布，敬请期待。欢迎各位朋友的试用与建议。