书写干净漂亮的代码非常不易。作为前端工程师，还得处理恼人的浏览器兼容性问题。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的任何组件。

核心

建议继续学习：

1. 构建前端 DSL    (阅读：2693)
2. 用 CSS3 Transitions 实现动画    (阅读：2347)
3. KISSY 近期更新 & 设计思路讨论    (阅读：2165)
4. 将你的 KISSY 程序移植到服务器端    (阅读：2082)
5. What really it is, not what it is    (阅读：1697)