模塊化高擴(kuò)展性的前端框架 KISSY
介紹
伴隨著淘寶的快速發(fā)展，誕生已三年多的 KISSY 也取得了巨大的成長(zhǎng)。 目前應(yīng)用于阿里集團(tuán)的多個(gè)業(yè)務(wù)團(tuán)隊(duì)，特別是淘寶，天貓，一淘的絕大多數(shù)業(yè)務(wù)都采用了 KISSY， 滿足了從前臺(tái)的 web page 到后臺(tái)的 web app 再到移動(dòng)端應(yīng)用（起步階段）的廣泛需求。
在阿里集團(tuán)以外也有不少公司和個(gè)人使用 KISSY，交流旺旺群成員已將近千人， 在 github 源碼庫(kù)也時(shí)常有外部人員參與提交 issue，發(fā)起 pull request，另外在 oschina 等開源社區(qū)也受到了一定的關(guān)注。
淘寶在 2012 年 12 月 25 號(hào)發(fā)布了 KISSY ***版本 1.3， 在這篇文章中我將對(duì) KISSY 1.3 結(jié)合在淘寶的實(shí)踐做一次全面概述，希望能對(duì)想了解淘寶前端技術(shù)的朋友有所幫助。
為什么選擇 KISSY
KISSY 作為國(guó)內(nèi)一個(gè)完全自底向上開發(fā)起來(lái)的框架，誕生三年來(lái)歷經(jīng)淘寶的各種業(yè)務(wù)變化的考驗(yàn)，體現(xiàn)了 KISSY 的可擴(kuò)展性，高穩(wěn)定性和可維護(hù)性。 它在以下方面具有一定優(yōu)勢(shì):
·擁有大量的中文文檔： 方便不熟悉英文的國(guó)內(nèi)開發(fā)者快速入門學(xué)習(xí)。
·在國(guó)內(nèi)具備一定的社區(qū)規(guī)模： 通過(guò)旺旺群，google group，微博，官方網(wǎng)站等用戶隨時(shí)可以和開發(fā)人員快速交流。
·開發(fā)便捷： 在模塊化，組件以及工具輔助方面形成了一套完善的機(jī)制，可以高效應(yīng)對(duì)日常的需求開發(fā)。
·綜合借鑒國(guó)際先進(jìn)的框架類庫(kù)設(shè)計(jì)：
·在吸收 jquery 穩(wěn)定的 dom 核心之外提供了模塊化，按需加載的基礎(chǔ)架構(gòu)。
·在學(xué)習(xí) yui 堅(jiān)實(shí)的架構(gòu)之外著重于組件開發(fā)，積累了一批貼近淘寶應(yīng)用的組件集。
·在研究 extjs 優(yōu)秀的組件設(shè)計(jì)之外探索輕量級(jí)，可擴(kuò)展的組件開發(fā)，同時(shí)滿足 web app 與 web page 的需求。
·應(yīng)用場(chǎng)景廣泛： 在各種設(shè)備上都有所支持。
·可以使用 seed 和 core 簡(jiǎn)單快速地搭建頁(yè)面
·也可以進(jìn)一步使用 KISSY 的大量組件構(gòu)建富客戶端應(yīng)用
·也可以使用統(tǒng)一的 API 開發(fā)移動(dòng)應(yīng)用
·更可以利用 KISSY 靈活的模塊化機(jī)制高效進(jìn)行大規(guī)模團(tuán)隊(duì)協(xié)作
不過(guò)由于 KISSY 開發(fā)時(shí)間還不長(zhǎng)，在組件完備性以及可測(cè)試性上有待進(jìn)一步完善，我們堅(jiān)信這種情況會(huì)隨著團(tuán)隊(duì)的不斷努力而逐步解決。
架構(gòu)
KISSY 的架構(gòu)由淘寶復(fù)雜多變的業(yè)務(wù)決定，在松耦合、無(wú)污染、模塊化的核心前提下，也從眾多優(yōu)秀類庫(kù)和框架的思路得到一些啟發(fā)。 如圖1所示：
圖1： KISSY 整體架構(gòu)圖
KISSY-architecture
·***層的 seed 是類似目前流行的 AMD 模塊化機(jī)制實(shí)現(xiàn)，為了更高效地共享通用組件加入了自動(dòng) combo 的支持， 另外 seed 也包含一些像 each（循環(huán)數(shù)組以及對(duì)象），mix（合并對(duì)象），param（編碼對(duì)象為 url）， ready（等待 dom ready）等常用的靜態(tài)工具方法以及 Path，Uri，Promise，UA 等模塊化需要用到的基礎(chǔ)類。
·seed 之上的第二層是處理 dom 兼容性的核心模塊，其中每個(gè)模塊都是由更小的模塊打包合并而來(lái)。 特殊之處在于 KISSY 把一些不標(biāo)準(zhǔn)瀏覽器的兼容代碼單獨(dú)抽取成內(nèi)部模塊，用戶可用的外部模塊會(huì)根據(jù)不同的設(shè)備分別依賴不同的內(nèi)部模塊。 雖然加載不同的具體實(shí)現(xiàn)模塊代碼，但是最終提供給用戶的是一致的模塊名，api 以及漸進(jìn)增強(qiáng)的能力。 例如用戶使用 event 模塊，在 touch 設(shè)備上會(huì)加載 event/touch 模塊從而可以使用一些手勢(shì)事件， 而在 ie<9 下會(huì)加載 event/hashchange 模塊，以類似 es5-shim 的方式來(lái)補(bǔ)全瀏覽器的能力，提供給用戶統(tǒng)一的 api。
·第三層為組件架構(gòu)層。提供包括模擬 es5 屬性管理，插件和多繼承機(jī)制的 rich-base 模塊， 所有 UI 組件渲染機(jī)制的基類 component 模塊以及具備一定邏輯的模板引擎 xtemplate。
·第四層為獨(dú)立可用的 KISSY 組件，用戶可自由組合繼承搭建最終頁(yè)面。包括：
·工具模塊，例如拖放，調(diào)整大小，操作 swf，操作樣式表，mvc（model，router）架構(gòu)等。
·UI 組件，例如彈窗，菜單，標(biāo)簽，日歷等。
·最外層為 KISSY gallery，KISSY 社區(qū)開發(fā)的一些通用模塊會(huì)放入 gallery 中， 從而可以方便得在所有使用 KISSY 的團(tuán)隊(duì)間共享模塊。 如果該模塊確實(shí)十分通用則會(huì)經(jīng)過(guò)重構(gòu)放入 KISSY 自身。
#p#
模塊化機(jī)制
介紹
由于淘寶業(yè)務(wù)的復(fù)雜，為了提高代碼的可維護(hù)性和重用性，KISSY 在早期就引入了簡(jiǎn)單的模塊化機(jī)制，并且隨著前端技術(shù)的發(fā)展而不斷改進(jìn)。 KISSY 1.3 的模塊化機(jī)制與目前的 AMD 規(guī)范比較類似，并根據(jù)淘寶自身業(yè)務(wù)特點(diǎn)加入了自動(dòng) combo 功能。
注：combo 舉例：請(qǐng)求 a.tbcdn.cn/??a.js,b.js 相當(dāng)于把 a.tbcdn.cn/a.js 與 a.tbcdn.cn/b.js 的文件內(nèi)容合并后返回。
KISSY 之外的每個(gè)模塊必須屬于一個(gè)包，一個(gè)包內(nèi)可以有很多相關(guān)模塊，它們具備相同的加載基地址。 包的設(shè)計(jì)一方面通過(guò)約定優(yōu)先配置的原則可以減少同一個(gè)包內(nèi)多個(gè)模塊的請(qǐng)求路徑配置， 另一方面也方便了部署在不同地址的多個(gè)應(yīng)用間互相調(diào)用模塊。 所以開發(fā)應(yīng)用前請(qǐng)先配置包地址，例如：
- KISSY.config('packages', {
- myapp: {
- base:'./x'
- }
- });
之后在 x 目錄下建立 myapp 目錄，并在 myapp 目錄下新建模塊 a 對(duì)應(yīng)的代碼文件： a.js
- KISSY.add(function(S,JSON){
- return JSON.stringify({a:'ok'});
- },{
- requires:['json']
- });
以及依賴 a 的入口主模塊 main 的代碼文件： main.js
- KISSY.add(function(S,DOM,a){
- S.ready(function(){
- DOM.text(document.body,a);
- });
- },{
- requires:['dom','./a']
- });
應(yīng)用模塊可依賴 KISSY 自身模塊，例如以上的 dom json。
***新建 index.html 來(lái)調(diào)用應(yīng)用模塊：
- // ... 上述包配置
- KISSY.use('myapp/main',function(){
- alert('page loaded');
- });
工具支持
打開上述 index.html 會(huì)發(fā)現(xiàn)鏈接數(shù)不少，有從淘寶 cdn 的鏈接也有本地的鏈接。 因此 KISSY 提供了配套工具 KISSY Module Compiler 進(jìn)行腳本打包以及抽取依賴后用 cdn combo 來(lái)解決這個(gè)問(wèn)題， 對(duì)工具有興趣可查看參考資料中的鏈接地址，以下僅作簡(jiǎn)單介紹：
腳本打包
如果應(yīng)用腳本非常多，可以用 module compiler 將入口模塊 main 以及其依賴的所有應(yīng)用模塊打包壓縮到 main-min.js 中， 同時(shí) module compiler 會(huì)生成一份依賴描述文件：
- KISSY.config('modules',{
- 'myapp/main':{
- requires:['dom','json']
- }
- });
接著設(shè)置 KISSY 啟用 combo 模式，并載入上述的依賴描述文件：
- KISSY.config('combine',true);
***修改 index.html 引用 seed-min.js，打開網(wǎng)絡(luò)面板后會(huì)發(fā)現(xiàn)現(xiàn)在只產(chǎn)生兩個(gè)鏈接請(qǐng)求：
- http://a.tbcdn.cn/s/kissy/??dom/base,json/native.js
- http://localhost/myapp/main-min.js
注：在 ie<9 等非標(biāo)準(zhǔn)瀏覽器下***個(gè)鏈接地址會(huì)加上 dom/ie json/json2 等腳本地址
抽取依賴
如果應(yīng)用腳本不多，并且自身服務(wù)器也支持 combo 的話，那么可以采用更加靈活的抽取依賴后全部 combo 的解決方案。 這時(shí) module compiler 會(huì)做兩件事情：
補(bǔ)全模塊名，例如 a.js 變?yōu)?/p>
- KISSY.add('myapp/a',function(S,JSON){
- return JSON.stringify({a:'ok'});
- },{
- requires:['json']
- });
將各個(gè)模塊的依賴收集為一個(gè)單獨(dú)的文件，例如
- KISSY.config('modules',{
- 'myapp/main':{
- requires:['dom,','./a']
- },
- 'myapp/a':{
- requires:['json']
- }
- });
接著設(shè)置 KISSY 啟用 combo 模式，并載入上述的依賴描述文件：
- KISSY.config('combine',true);
訪問(wèn) index.html，打開網(wǎng)絡(luò)面板會(huì)發(fā)現(xiàn)同樣只產(chǎn)生兩個(gè)鏈接請(qǐng)求：
- http://a.tbcdn.cn/s/kissy/??dom/base,json/native.js
- http://localhost/myapp/??a.js,main.js
KISSY-PIE
KISSY 還提供了一套基于約定的前端打包解決方案 KISSY-PIE，通過(guò)統(tǒng)一的約定，提升應(yīng)用的可維護(hù)性，將大家從重復(fù)的打包腳本的編寫中解放出來(lái)。
KISSY-PIE 包括了以下功能：
·JS（KISSY 的模塊編譯，HTML 模板到 KISSY 模塊編譯，代碼壓縮）
·CSS（基于 CSS-Combo 的合并，壓縮）
·Less
·Sass
并且在命令行之外還提供了 web 操作界面，如圖2所示：
圖2： KISSY-PIE 打包界面
#p#
組件機(jī)制
核心
KISSY 目前包括眾多即開即用的組件， 包括工具性質(zhì)的例如 dd（拖放），resizable（調(diào)整大?。瑂wf（插入flash），stylesheet（操作樣式表）等 和 UI 性質(zhì)的例如 overlay（彈窗），menu（菜單），menubutton（菜單按鈕），imagezoom（放大鏡），editor（編輯器）， tabs（標(biāo)簽），tree（樹）等。 這些組件都基于公共的 rich-base 以及 component 模塊： rich-base 和 component 模塊充分利用了 javascript 語(yǔ)言的 mixin 和原型鏈繼承， 提供了屬性綁定，類繼承，擴(kuò)展以及插件等特性。
其中的重點(diǎn)是 Component，它是所有 UI 組件的基類，提供了兩種通用的渲染方式：
·組件實(shí)例由 javascript 完全渲染 dom 樹。其中對(duì)于 menu 等組件在 javascript 完全渲染的情況亦可以通過(guò) json 初始化內(nèi)部嵌套組件。例如
- KISSY.use('menu',function(S,Menu){
- // javascript 渲染一個(gè)菜單到 body
- new Menu({
- children:[{
- content:'item1'
- }]
- }).render();
- });
·從已有的 dom 樹節(jié)點(diǎn)得到組件實(shí)例。
下面以 KISSY 中常用的一個(gè)組件 Overlay 為例講解下，首先看圖3類結(jié)構(gòu)圖：
圖3： Overlay 類結(jié)構(gòu)圖
Overlay 繼承自 Component，然后靜態(tài)地由一些分散的功能類擴(kuò)展而來(lái)，包括定位功能類，對(duì)齊功能類，關(guān)閉功能類，遮罩層功能類， 這些功能類底層利用 javascript 的 mixin 功能將自己的方法和屬性匯入到 Overlay 類中，使得最終的 Overlay 具備了這些能力。
組件在運(yùn)行時(shí)也可以選擇性依賴某些插件模塊，將插件的功能注入到組件中去， 既避免了一個(gè)組件過(guò)于功能繁多導(dǎo)致的文件過(guò)大，又大大增強(qiáng)了組件的可擴(kuò)展性。
以下為 Overlay 的使用示例代碼：
- KISSY.use('overlay,component/plugin/resize',function(S,Overlay,ReizePlugin){
- // 完全由 javascript 將組件實(shí)例渲染到 body 中
- new Overlay({
- content:'test'
- }).render();
- // 從已有的 dom 樹節(jié)點(diǎn)生成 Overlay 實(shí)例
- var overlay = new Overlay({
- srcNode:'#existing'
- }).render();
- // 運(yùn)行時(shí)加入調(diào)整大小的插件能力
- overlay.plug(new ReizePlugin({
- handles:['t']
- }));
- });
Brix
除了 KISSY 自身的組件機(jī)制，一淘開發(fā)人員根據(jù)自己的應(yīng)用特點(diǎn)在組件開發(fā)和使用上找尋了另一條途徑。即 Brix 解決方案：
·基于統(tǒng)一的渲染方式：模板（tmpl）和數(shù)據(jù)（data）產(chǎn)生html片段后使用 innerHTML 到 DOM 節(jié)點(diǎn)中.
·提取子模板，結(jié)合數(shù)據(jù)的更新，達(dá)到局部刷新，開發(fā)者不需要再關(guān)心頁(yè)面的表現(xiàn)，而專心于數(shù)據(jù)的變化。
·DOM 節(jié)點(diǎn)自定義屬性設(shè)置組件標(biāo)志，Brix 提供 Pagelet 按照統(tǒng)一的方式實(shí)例化組件。
圖4： Brix 類庫(kù)結(jié)構(gòu)
設(shè)備普適性
當(dāng)前 javascript 的使用范圍越來(lái)越廣，平臺(tái)包括 pc 瀏覽器與讀屏器，nodejs，移動(dòng)端瀏覽器以及各種外殼，window8 等。 KISSY 也盡量在各個(gè)平臺(tái)給予支持，保證統(tǒng)一的開發(fā)體驗(yàn)。
在 nodejs 上 KISSY 通過(guò)調(diào)整模塊加載器使得 KISSY 可以直接將自身的模塊加載到 nodejs 中使用。例如
·可以使用 KISSY 的 UA 解析模塊來(lái)分析日志中的 UA 串
·可以載入 jsdom 模塊在 nodejs 環(huán)境下做單元測(cè)試
·用 xtemplate 在服務(wù)器端渲染前端模板
·使用 KISSY 的 htmlparser，color 等工具模塊
經(jīng)統(tǒng)計(jì)約有 1000 萬(wàn)殘疾人用戶在使用淘寶，其中不少是受影響***的盲人朋友，他們實(shí)際上是通過(guò)讀屏器來(lái)和淘寶交互， KISSY 組件通過(guò)遵循 WAI-ARAI 規(guī)范來(lái)給視力受損的朋友提供無(wú)障礙的訪問(wèn)環(huán)境，網(wǎng)上人人平等。
KISSY 也計(jì)劃對(duì) windows8 進(jìn)行支持，在即將發(fā)布的 tmall windows8 app 中僅僅通過(guò)使用 KISSY 的模塊化機(jī)制以及一些語(yǔ)法糖 API 就可以達(dá)到和平常開發(fā)一樣的高效。
隨著用戶越來(lái)越多地在移動(dòng)設(shè)備上購(gòu)物產(chǎn)生交易，移動(dòng)應(yīng)用在流量的比重上也越來(lái)越多，KISSY 及時(shí)適配移動(dòng)設(shè)備， 目前在兩方面進(jìn)行了支持：
·根據(jù)設(shè)備條件加載。對(duì)于移動(dòng)端由于網(wǎng)絡(luò)速度等原因?qū)τ谖募笮”容^敏感，KISSY 為了保證一致的 API 又不能隨意刪減功能， 因而采取了獨(dú)立兼容模塊的方法來(lái)保持瘦身。在架構(gòu)一節(jié)也闡述過(guò)，KISSY 對(duì)基礎(chǔ)核心模塊中的兼容非標(biāo)準(zhǔn)瀏覽器的模塊進(jìn)行選擇性加載， 同時(shí)移動(dòng)設(shè)備上都是標(biāo)準(zhǔn)瀏覽器，從而可以大大減少實(shí)際下載到用戶設(shè)備上的代碼大小。部分組件也實(shí)行了拆分，將 pc 的功能交互獨(dú)立到單獨(dú)的模塊，在移動(dòng)觸摸設(shè)備上只加載觸摸交互需要用到的模塊。
·漸進(jìn)增強(qiáng) API。對(duì)于觸屏設(shè)備，很多交互是建立在手勢(shì)操作上。而手勢(shì)操作除了在 safari 上有 gesture 事件做有限支持外， 在 android 上則完全沒(méi)有對(duì)應(yīng)事件。 得益于 KISSY 易于擴(kuò)展的事件機(jī)制，KISSY 在底層多點(diǎn)觸摸 touch 事件的基礎(chǔ)上模擬出了 tap rotate pinch 等觸屏設(shè)備上獨(dú)有的事件，這對(duì)于用戶則是透明，用戶完全可以把這些事件當(dāng)做原生事件來(lái)使用，例如
- KISSY.use('event',function(S,Event){
- // 監(jiān)聽 div 上的 tap 事件
- Event.on('#div','tap',function(){
- });
- });
ZOOJS
另外淘寶北京團(tuán)隊(duì)還基于 KISSY 核心打造了專門面向 Web 無(wú)線設(shè)備的一整套工具庫(kù) ZOOJS， 包含控件級(jí)的事件支持、觸屏行為的封裝、富控件、皮膚、App的基礎(chǔ)架構(gòu)等。 這套獨(dú)特的 Web 無(wú)線解決方案力爭(zhēng)將 HTML5 和 CSS3 的優(yōu)勢(shì)發(fā)揮至***，做到即調(diào)即用。
測(cè)試與持續(xù)集成
KISSY 經(jīng)過(guò)三年的開發(fā)代碼庫(kù)已經(jīng)相當(dāng)龐大了，模塊間還常常有依賴關(guān)系，修改代碼有牽一發(fā)而動(dòng)千鈞的后果。 為了應(yīng)對(duì)此問(wèn)題，KISSY 也在逐漸完善單元測(cè)試，自動(dòng)化測(cè)試與持續(xù)集成。
單元測(cè)試
KISSY 一個(gè)模塊的常見目錄結(jié)構(gòu)如圖5所示：
圖5： 模塊目錄結(jié)構(gòu)
其中 tests 目錄下為測(cè)試資源，runner 目錄下啟動(dòng)測(cè)試的 html 文件，specs 下為對(duì)應(yīng)模塊的單元測(cè)試代碼。 KISSY 采用的單元測(cè)試框架為 jasmine ，測(cè)試代碼舉例如下：
- describe('S.mix',function(){
- it('works for simple case',function(){
- expect(S.mix({x:1},{y:1})).toEqual({x:1,y:1});
- });
- });
然后打開啟動(dòng)測(cè)試的 html 文件 即可看到圖6所示的單元測(cè)試結(jié)果：
圖6： 單元測(cè)試結(jié)果
持續(xù)集成
為了提高測(cè)試效率，KISSY 還依賴 travis 平臺(tái)和 phamtomjs 進(jìn)行持續(xù)集成測(cè)試。 每次提交代碼都會(huì)在 travis 平臺(tái)上啟動(dòng) phantomjs 來(lái)運(yùn)行 KISSY 所有模塊的單元測(cè)試代碼。 如圖7所示：
圖7： travis 平臺(tái)上的 KISSY
淘寶應(yīng)用場(chǎng)景舉例
淘寶目前的絕大多數(shù)頁(yè)面已經(jīng)采用 KISSY 搭建，這次我選取兩個(gè)大家使用比較多的應(yīng)用來(lái)介紹下 KISSY 在淘寶的實(shí)踐：
店鋪?lái)?yè)面
店鋪?lái)?yè)面是商家店鋪的門戶，除了淘寶頁(yè)頭之下都可以由商家自定義內(nèi)容，如圖8所示：
圖8：典型的店鋪?lái)?yè)面
可以看出頁(yè)面本身就是區(qū)塊化的組織，在程序內(nèi)部也是分成很多個(gè)模塊，例如店內(nèi)搜索模塊，寶貝分類模塊，銷量統(tǒng)計(jì)模塊等， 每個(gè)模塊負(fù)責(zé)頁(yè)面一塊區(qū)域的交互實(shí)現(xiàn)，這些模塊又會(huì)調(diào)用 KISSY 的模塊來(lái)實(shí)現(xiàn)自身的邏輯。 而每個(gè)商家的店鋪可能使用到的區(qū)塊并不相同，這也意味著每個(gè)商家店鋪所用到的程序模塊也不相同。
店鋪模塊與 KISSY 模塊依賴關(guān)系如圖9所示：
圖9：店鋪模塊與 KISSY 模塊的關(guān)系
在實(shí)際開發(fā)中配置店鋪應(yīng)用為一個(gè)包，其內(nèi)的所有模塊都放入這個(gè)包內(nèi)，***由頁(yè)面初始化腳本加載當(dāng)前店鋪需要的模塊列表。例如：
- KISSY.use('shop/search,shop/category,...');
在線上會(huì)發(fā)出兩個(gè) combo 請(qǐng)求：一個(gè)為店鋪?lái)?yè)面需要的應(yīng)用模塊集，一個(gè)為 KISSY 自己的模塊集，例如
- http://a.tbcdn.cn/s/kissy/1.3.0/??dom/base.js,event/base.js,overlay.js...
- http://a.tbcdn.cn/p/shop/??search.js,category.js...
寶貝詳情應(yīng)用
寶貝詳情頁(yè)面用來(lái)展示商家單個(gè)商品的詳細(xì)信息，評(píng)價(jià)，成交趨勢(shì)等信息，并為下一步購(gòu)買做準(zhǔn)備，是目前淘寶訪問(wèn)量***的頁(yè)面。
該應(yīng)用和店鋪應(yīng)用緊密相關(guān)，從頁(yè)面可以看出，很多區(qū)塊和店鋪?lái)?yè)面對(duì)應(yīng)區(qū)塊相同，實(shí)際上在代碼層面也是引用同一份模塊， 首先寶貝詳情應(yīng)用和店鋪應(yīng)用一樣加載當(dāng)前頁(yè)面用到的店鋪模塊，然后再加載這個(gè)頁(yè)面本身的應(yīng)用模塊。 但是寶貝詳情業(yè)務(wù)本身邏輯十分復(fù)雜，若像店鋪應(yīng)用一樣也是采用模塊 combo 的方式則會(huì)導(dǎo)致請(qǐng)求 url 過(guò)長(zhǎng)， 進(jìn)而 KISSY 會(huì)對(duì)過(guò)長(zhǎng)的 combo url 拆分成多個(gè)短的 url，反而適得其反。 因此這里會(huì)把寶貝詳情頁(yè)自身的模塊打包合并，將自己模塊的主模塊和依賴模塊都合并到主模塊中去， 最終線上會(huì)發(fā)出三個(gè)請(qǐng)求，其中兩個(gè)為 combo 請(qǐng)求，一個(gè)為非 combo 請(qǐng)求，例如：
- http://a.tbcdn.cn/s/kissy/1.3.0/??dom/base.js,event/base.js,overlay.js...
- http://a.tbcdn.cn/p/shop/??search.js,category.js...
- http://a.tbcdn.cn/p/detail/main.js
總結(jié)
KISSY 才剛剛處于成長(zhǎng)初期，相對(duì)于國(guó)外成熟框架尚有不小差距，不過(guò)依然承受住了淘寶復(fù)雜多變業(yè)務(wù)的考驗(yàn)。 下一步 KISSY 會(huì)繼續(xù)完善基礎(chǔ)組件例如 date，datasource，selector，graphics 等， 重構(gòu)已有組件例如 switchable，calendar 等， 增加 package manager 方便基于 KISSY 模塊的提交與共享，補(bǔ)全測(cè)試用例，實(shí)現(xiàn)代碼覆蓋率檢測(cè)，不斷提高運(yùn)行穩(wěn)定性。 將來(lái)我們堅(jiān)信 KISSY 會(huì)隨著淘寶的發(fā)展而繼續(xù)成長(zhǎng)，也會(huì)隨著國(guó)內(nèi)外前端技術(shù)的不斷發(fā)展而不斷進(jìn)步。 希望有興趣的你也能加入到 KISSY 開發(fā)中，一起學(xué)習(xí)進(jìn)步，享受成長(zhǎng)的樂(lè)趣。
原文鏈接：http://ued.taobao.com/blog/2013/03/modular-scalable-kissy/
