注:本文已发表于程序员杂志。下面的文字总体结构未变,细节稍有修改。)
书写干净漂亮的代码非常不易。作为前端工程师,还得处理恼人的浏览器兼容性问题。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的诸多不如意,所有问题交织汇集在一起,淘宝前端面临着以下几条路:
- 继续使用YUI2, 完善TBra
- 全面升级到YUI3, 包括TBra
- 全面迁移到jQuery
- 混用YUI2, YUI3和jQuery
- 基于jQuery开发组件类库
- 自主开发全新类库
所有这些选择,在方向上,没有孰对孰错。jQuery非常适合中小型站点的快速开发,但对大型团队的合作来说,YUI内禀的代码组织方式更佳。
YUI3在当时还不够稳定成熟,API的设计上,对普通开发人员也不够友好易用。TBra的设计初衷是快速、简单、易用,但在代码组织和可扩展性上,已逐
步暴露出局限性。综合各种考虑,最后只剩下两条路:
- 基于jQuery 开发组件类库,典型代表:豆瓣的Do类库
- 自主开发全新类库,典型代表:淘宝的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的组件严格遵守适度灵活原则,在特定的场景下进行设计。任何抽象场景,都有不同的抽象层次。比如淘宝首页的图片轮播,至少有以下三种层次的抽象:
- 图片轮播是可轮播的多张图片
- 图片轮播是可切换的一组内容
- 图片轮播是对命令的响应
第一种抽象,会让我们做出像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平台上管理。相关社区信息如下:
KISSY已正式发布1.1.5版,下一个版本是1.2, 将于今年12月份正式发布,敬请期待。欢迎各位朋友的试用与建议。
分享到:
相关推荐
dojo.js.核心jsDojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库
界面美化Javascript类库是一个超棒的页面checkbox和radio美化jQuery类库。 界面美化Javascript类库演示图:
javascript非常好的类库
sigma.js 类库 图片绘制 快速实现数据动态展示,这个类库是一个独立的不依赖于第三方javascript的图形类库。开发人员可以自己开发插件来扩展功能,同时也支持类似jQuery的链式操作。支持主流的浏览器。
JavaScript的 各种类库,无需要牢记,用时复制即可。
javascript类库-ext.js,javascript类库-ext.js
轻松建立有高度互动的web2.0特性的富客户端页面
JQuery类库框架,该版本为1.4.2.3,些类库为JavaScript类库,只要在JSP,html中使用即可。
javascript类库源代码,包括HTML网页编辑器,异步Ajax类,鼠标事件类,窗口类,绘图类,分位整数树类等,智能分辨IE与firefox,智能分辨页面编码UTF8与GB2312,调用简单。需要服务器端相关类库,可以QQ[472179624]联系我获得...
一个比较功能比较完整的JavaScript类库,相信会对你有帮助
JavaScript类库React深度解析,整套开发视频源码以及开发文档。
JsJava2.0最新Javascript类库下载
能生成拓扑图的javascript类库.zip
X-Tool 轻量级JavaScript类库1.0.0 这是一个可以让开发人员提高效率便捷的轻量级JavaScript类库。 对于Web设计人员和开发人员来说,手里有一套便利的、最新的工具可供使用是极其重要的。
Highcharts是一个制作图表的Javascript类库,可以制作的图表有:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散状图等等。
大大简化了javascript的开发 涉及到特效、AJAX等应用
Highcharts是一个制作图表的纯Javascript类库,主要特性如下: •兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; •对个人用户完全免费; •纯JS,无BS; •支持大部分的图表类型:直线图,曲线图、...
X-Tool轻量级javascript类库1.0.1 xTool是一个免费开源的轻量级js框架。对于WEB开发人员来说是一个不错选择。