介紹

伴隨著淘寶的快速發展，誕生已三年多的 KISSY 也取得了巨大的成長。 目前應用于阿里集團的多個業務團隊，特別是淘寶，天貓，一淘的絕大多數業務都采用了 KISSY， 滿足了從前臺的 web page 到后臺的 web app 再到移動端應用（起步階段）的廣泛需求。

在阿里集團以外也有不少公司和個人使用 KISSY，交流旺旺群成員已將近千人， 在 github 源碼庫也時常有外部人員參與提交 issue，發起 pull request，另外在 oschina 等開源社區也受到了一定的關注。

淘寶在 2012 年 12 月 25 號發布了 KISSY ***版本 1.3， 在這篇文章中我將對 KISSY 1.3 結合在淘寶的實踐做一次全面概述，希望能對想了解淘寶前端技術的朋友有所幫助。

為什么選擇 KISSY

KISSY 作為國內一個完全自底向上開發起來的框架，誕生三年來歷經淘寶的各種業務變化的考驗，體現了 KISSY 的可擴展性，高穩定性和可維護性。 它在以下方面具有一定優勢:

·擁有大量的中文文檔： 方便不熟悉英文的國內開發者快速入門學習。

·在國內具備一定的社區規模： 通過旺旺群，google group，微博，官方網站等用戶隨時可以和開發人員快速交流。

·開發便捷： 在模塊化，組件以及工具輔助方面形成了一套完善的機制，可以高效應對日常的需求開發。

·綜合借鑒國際先進的框架類庫設計：

·在吸收 jquery 穩定的 dom 核心之外提供了模塊化，按需加載的基礎架構。

·在學習 yui 堅實的架構之外著重于組件開發，積累了一批貼近淘寶應用的組件集。

·在研究 extjs 優秀的組件設計之外探索輕量級，可擴展的組件開發，同時滿足 web app 與 web page 的需求。

·應用場景廣泛： 在各種設備上都有所支持。

·可以使用 seed 和 core 簡單快速地搭建頁面

·也可以進一步使用 KISSY 的大量組件構建富客戶端應用

·也可以使用統一的 API 開發移動應用

·更可以利用 KISSY 靈活的模塊化機制高效進行大規模團隊協作

不過由于 KISSY 開發時間還不長，在組件完備性以及可測試性上有待進一步完善，我們堅信這種情況會隨著團隊的不斷努力而逐步解決。

架構

KISSY 的架構由淘寶復雜多變的業務決定，在松耦合、無污染、模塊化的核心前提下，也從眾多優秀類庫和框架的思路得到一些啟發。 如圖1所示：

圖1： KISSY 整體架構圖

KISSY-architecture

·***層的 seed 是類似目前流行的 AMD 模塊化機制實現，為了更高效地共享通用組件加入了自動 combo 的支持， 另外 seed 也包含一些像 each（循環數組以及對象），mix（合并對象），param（編碼對象為 url）， ready（等待 dom ready）等常用的靜態工具方法以及 Path，Uri，Promise，UA 等模塊化需要用到的基礎類。

·seed 之上的第二層是處理 dom 兼容性的核心模塊，其中每個模塊都是由更小的模塊打包合并而來。 特殊之處在于 KISSY 把一些不標準瀏覽器的兼容代碼單獨抽取成內部模塊，用戶可用的外部模塊會根據不同的設備分別依賴不同的內部模塊。 雖然加載不同的具體實現模塊代碼，但是最終提供給用戶的是一致的模塊名，api 以及漸進增強的能力。 例如用戶使用 event 模塊，在 touch 設備上會加載 event/touch 模塊從而可以使用一些手勢事件， 而在 ie<9 下會加載 event/hashchange 模塊，以類似 es5-shim 的方式來補全瀏覽器的能力，提供給用戶統一的 api。

·第三層為組件架構層。提供包括模擬 es5 屬性管理，插件和多繼承機制的 rich-base 模塊， 所有 UI 組件渲染機制的基類 component 模塊以及具備一定邏輯的模板引擎 xtemplate。

·第四層為獨立可用的 KISSY 組件，用戶可自由組合繼承搭建最終頁面。包括：

·工具模塊，例如拖放，調整大小，操作 swf，操作樣式表，mvc（model，router）架構等。

·UI 組件，例如彈窗，菜單，標簽，日歷等。

·最外層為 KISSY gallery，KISSY 社區開發的一些通用模塊會放入 gallery 中， 從而可以方便得在所有使用 KISSY 的團隊間共享模塊。 如果該模塊確實十分通用則會經過重構放入 KISSY 自身。

 #p#

模塊化機制

介紹

由于淘寶業務的復雜，為了提高代碼的可維護性和重用性，KISSY 在早期就引入了簡單的模塊化機制，并且隨著前端技術的發展而不斷改進。 KISSY 1.3 的模塊化機制與目前的 AMD 規范比較類似，并根據淘寶自身業務特點加入了自動 combo 功能。

注：combo 舉例：請求 a.tbcdn.cn/??a.js,b.js 相當于把 a.tbcdn.cn/a.js 與 a.tbcdn.cn/b.js 的文件內容合并后返回。

KISSY 之外的每個模塊必須屬于一個包，一個包內可以有很多相關模塊，它們具備相同的加載基地址。 包的設計一方面通過約定優先配置的原則可以減少同一個包內多個模塊的請求路徑配置， 另一方面也方便了部署在不同地址的多個應用間互相調用模塊。 所以開發應用前請先配置包地址，例如：

KISSY.config('packages', {  
    myapp: {  
        base:'./x' 
    }  
}); 

之后在 x 目錄下建立 myapp 目錄，并在 myapp 目錄下新建模塊 a 對應的代碼文件： 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']  
}); 

應用模塊可依賴 KISSY 自身模塊，例如以上的 dom json。

***新建 index.html 來調用應用模塊：

// ... 上述包配置  
 
KISSY.use('myapp/main',function(){  
    alert('page loaded');  
}); 

工具支持

打開上述 index.html 會發現鏈接數不少，有從淘寶 cdn 的鏈接也有本地的鏈接。 因此 KISSY 提供了配套工具 KISSY Module Compiler 進行腳本打包以及抽取依賴后用 cdn combo 來解決這個問題， 對工具有興趣可查看參考資料中的鏈接地址，以下僅作簡單介紹：
腳本打包

如果應用腳本非常多，可以用 module compiler 將入口模塊 main 以及其依賴的所有應用模塊打包壓縮到 main-min.js 中， 同時 module compiler 會生成一份依賴描述文件：

KISSY.config('modules',{  
    'myapp/main':{  
        requires:['dom','json']  
    }  
}); 

接著設置 KISSY 啟用 combo 模式，并載入上述的依賴描述文件：

KISSY.config('combine',true); 

***修改 index.html 引用 seed-min.js，打開網絡面板后會發現現在只產生兩個鏈接請求：

http://a.tbcdn.cn/s/kissy/??dom/base,json/native.js  
 
http://localhost/myapp/main-min.js 

注：在 ie<9 等非標準瀏覽器下***個鏈接地址會加上 dom/ie json/json2 等腳本地址

抽取依賴

如果應用腳本不多，并且自身服務器也支持 combo 的話，那么可以采用更加靈活的抽取依賴后全部 combo 的解決方案。 這時 module compiler 會做兩件事情：

補全模塊名，例如 a.js 變為

KISSY.add('myapp/a',function(S,JSON){  
    return JSON.stringify({a:'ok'});  
},{  
    requires:['json']  
}); 

將各個模塊的依賴收集為一個單獨的文件，例如

KISSY.config('modules',{  
    'myapp/main':{  
        requires:['dom,','./a']  
    },  
    'myapp/a':{  
        requires:['json']  
    }  
}); 

接著設置 KISSY 啟用 combo 模式，并載入上述的依賴描述文件：

KISSY.config('combine',true); 

訪問 index.html，打開網絡面板會發現同樣只產生兩個鏈接請求：

http://a.tbcdn.cn/s/kissy/??dom/base,json/native.js  
http://localhost/myapp/??a.js,main.js 

KISSY-PIE

KISSY 還提供了一套基于約定的前端打包解決方案 KISSY-PIE，通過統一的約定，提升應用的可維護性，將大家從重復的打包腳本的編寫中解放出來。

KISSY-PIE 包括了以下功能：

·JS（KISSY 的模塊編譯，HTML 模板到 KISSY 模塊編譯，代碼壓縮）

·CSS（基于 CSS-Combo 的合并，壓縮）

·Less

·Sass

并且在命令行之外還提供了 web 操作界面，如圖2所示：

圖2： KISSY-PIE 打包界面

#p#

組件機制

核心

KISSY 目前包括眾多即開即用的組件， 包括工具性質的例如 dd（拖放），resizable（調整大?。?，swf（插入flash），stylesheet（操作樣式表）等 和 UI 性質的例如 overlay（彈窗），menu（菜單），menubutton（菜單按鈕），imagezoom（放大鏡），editor（編輯器）， tabs（標簽），tree（樹）等。 這些組件都基于公共的 rich-base 以及 component 模塊： rich-base 和 component 模塊充分利用了 javascript 語言的 mixin 和原型鏈繼承， 提供了屬性綁定，類繼承，擴展以及插件等特性。

其中的重點是 Component，它是所有 UI 組件的基類，提供了兩種通用的渲染方式：

·組件實例由 javascript 完全渲染 dom 樹。其中對于 menu 等組件在 javascript 完全渲染的情況亦可以通過 json 初始化內部嵌套組件。例如

KISSY.use('menu',function(S,Menu){  
    // javascript 渲染一個菜單到 body  
    new Menu({  
        children:[{  
            content:'item1' 
        }]  
    }).render();  
}); 

·從已有的 dom 樹節點得到組件實例。

下面以 KISSY 中常用的一個組件 Overlay 為例講解下，首先看圖3類結構圖：

圖3： Overlay 類結構圖

Overlay 繼承自 Component，然后靜態地由一些分散的功能類擴展而來，包括定位功能類，對齊功能類，關閉功能類，遮罩層功能類， 這些功能類底層利用 javascript 的 mixin 功能將自己的方法和屬性匯入到 Overlay 類中，使得最終的 Overlay 具備了這些能力。

組件在運行時也可以選擇性依賴某些插件模塊，將插件的功能注入到組件中去， 既避免了一個組件過于功能繁多導致的文件過大，又大大增強了組件的可擴展性。

以下為 Overlay 的使用示例代碼：

KISSY.use('overlay,component/plugin/resize',function(S,Overlay,ReizePlugin){  
 
    // 完全由 javascript 將組件實例渲染到 body 中  
    new Overlay({  
        content:'test' 
    }).render();  
 
    // 從已有的 dom 樹節點生成 Overlay 實例  
    var overlay = new Overlay({  
        srcNode:'#existing' 
    }).render();  
 
    // 運行時加入調整大小的插件能力  
    overlay.plug(new ReizePlugin({  
        handles:['t']  
    }));  
 
}); 

Brix

除了 KISSY 自身的組件機制，一淘開發人員根據自己的應用特點在組件開發和使用上找尋了另一條途徑。即 Brix 解決方案：

·基于統一的渲染方式：模板（tmpl）和數據（data）產生html片段后使用 innerHTML 到 DOM 節點中.

·提取子模板，結合數據的更新，達到局部刷新，開發者不需要再關心頁面的表現，而專心于數據的變化。

·DOM 節點自定義屬性設置組件標志，Brix 提供 Pagelet 按照統一的方式實例化組件。

圖4： Brix 類庫結構

設備普適性

當前 javascript 的使用范圍越來越廣，平臺包括 pc 瀏覽器與讀屏器，nodejs，移動端瀏覽器以及各種外殼，window8 等。 KISSY 也盡量在各個平臺給予支持，保證統一的開發體驗。

在 nodejs 上 KISSY 通過調整模塊加載器使得 KISSY 可以直接將自身的模塊加載到 nodejs 中使用。例如

·可以使用 KISSY 的 UA 解析模塊來分析日志中的 UA 串

·可以載入 jsdom 模塊在 nodejs 環境下做單元測試

·用 xtemplate 在服務器端渲染前端模板

·使用 KISSY 的 htmlparser，color 等工具模塊

經統計約有 1000 萬殘疾人用戶在使用淘寶，其中不少是受影響***的盲人朋友，他們實際上是通過讀屏器來和淘寶交互， KISSY 組件通過遵循 WAI-ARAI 規范來給視力受損的朋友提供無障礙的訪問環境，網上人人平等。

KISSY 也計劃對 windows8 進行支持，在即將發布的 tmall windows8 app 中僅僅通過使用 KISSY 的模塊化機制以及一些語法糖 API 就可以達到和平常開發一樣的高效。

隨著用戶越來越多地在移動設備上購物產生交易，移動應用在流量的比重上也越來越多，KISSY 及時適配移動設備， 目前在兩方面進行了支持：

·根據設備條件加載。對于移動端由于網絡速度等原因對于文件大小比較敏感，KISSY 為了保證一致的 API 又不能隨意刪減功能， 因而采取了獨立兼容模塊的方法來保持瘦身。在架構一節也闡述過，KISSY 對基礎核心模塊中的兼容非標準瀏覽器的模塊進行選擇性加載， 同時移動設備上都是標準瀏覽器，從而可以大大減少實際下載到用戶設備上的代碼大小。部分組件也實行了拆分，將 pc 的功能交互獨立到單獨的模塊，在移動觸摸設備上只加載觸摸交互需要用到的模塊。

·漸進增強 API。對于觸屏設備，很多交互是建立在手勢操作上。而手勢操作除了在 safari 上有 gesture 事件做有限支持外， 在 android 上則完全沒有對應事件。 得益于 KISSY 易于擴展的事件機制，KISSY 在底層多點觸摸 touch 事件的基礎上模擬出了 tap rotate pinch 等觸屏設備上獨有的事件，這對于用戶則是透明，用戶完全可以把這些事件當做原生事件來使用，例如

KISSY.use('event',function(S,Event){  
    // 監聽 div 上的 tap 事件  
    Event.on('#div','tap',function(){  
    });  
}); 

ZOOJS

另外淘寶北京團隊還基于 KISSY 核心打造了專門面向 Web 無線設備的一整套工具庫 ZOOJS， 包含控件級的事件支持、觸屏行為的封裝、富控件、皮膚、App的基礎架構等。 這套獨特的 Web 無線解決方案力爭將 HTML5 和 CSS3 的優勢發揮至***，做到即調即用。

測試與持續集成

KISSY 經過三年的開發代碼庫已經相當龐大了，模塊間還常常有依賴關系，修改代碼有牽一發而動千鈞的后果。 為了應對此問題，KISSY 也在逐漸完善單元測試，自動化測試與持續集成。

單元測試

KISSY 一個模塊的常見目錄結構如圖5所示：

圖5： 模塊目錄結構

其中 tests 目錄下為測試資源，runner 目錄下啟動測試的 html 文件，specs 下為對應模塊的單元測試代碼。 KISSY 采用的單元測試框架為 jasmine ，測試代碼舉例如下：

describe('S.mix',function(){  
    it('works for simple case',function(){  
        expect(S.mix({x:1},{y:1})).toEqual({x:1,y:1});  
    });  
}); 

然后打開啟動測試的 html 文件 即可看到圖6所示的單元測試結果：

圖6： 單元測試結果

持續集成

為了提高測試效率，KISSY 還依賴 travis 平臺和 phamtomjs 進行持續集成測試。 每次提交代碼都會在 travis 平臺上啟動 phantomjs 來運行 KISSY 所有模塊的單元測試代碼。 如圖7所示：

圖7： travis 平臺上的 KISSY

淘寶應用場景舉例

淘寶目前的絕大多數頁面已經采用 KISSY 搭建，這次我選取兩個大家使用比較多的應用來介紹下 KISSY 在淘寶的實踐：

店鋪頁面

店鋪頁面是商家店鋪的門戶，除了淘寶頁頭之下都可以由商家自定義內容，如圖8所示：

圖8：典型的店鋪頁面

可以看出頁面本身就是區塊化的組織，在程序內部也是分成很多個模塊，例如店內搜索模塊，寶貝分類模塊，銷量統計模塊等， 每個模塊負責頁面一塊區域的交互實現，這些模塊又會調用 KISSY 的模塊來實現自身的邏輯。 而每個商家的店鋪可能使用到的區塊并不相同，這也意味著每個商家店鋪所用到的程序模塊也不相同。

店鋪模塊與 KISSY 模塊依賴關系如圖9所示：

圖9：店鋪模塊與 KISSY 模塊的關系

在實際開發中配置店鋪應用為一個包，其內的所有模塊都放入這個包內，***由頁面初始化腳本加載當前店鋪需要的模塊列表。例如：

KISSY.use('shop/search,shop/category,...'); 

在線上會發出兩個 combo 請求：一個為店鋪頁面需要的應用模塊集，一個為 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... 

寶貝詳情應用

寶貝詳情頁面用來展示商家單個商品的詳細信息，評價，成交趨勢等信息，并為下一步購買做準備，是目前淘寶訪問量***的頁面。

該應用和店鋪應用緊密相關，從頁面可以看出，很多區塊和店鋪頁面對應區塊相同，實際上在代碼層面也是引用同一份模塊， 首先寶貝詳情應用和店鋪應用一樣加載當前頁面用到的店鋪模塊，然后再加載這個頁面本身的應用模塊。 但是寶貝詳情業務本身邏輯十分復雜，若像店鋪應用一樣也是采用模塊 combo 的方式則會導致請求 url 過長， 進而 KISSY 會對過長的 combo url 拆分成多個短的 url，反而適得其反。 因此這里會把寶貝詳情頁自身的模塊打包合并，將自己模塊的主模塊和依賴模塊都合并到主模塊中去， 最終線上會發出三個請求，其中兩個為 combo 請求，一個為非 combo 請求，例如：

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 

總結

KISSY 才剛剛處于成長初期，相對于國外成熟框架尚有不小差距，不過依然承受住了淘寶復雜多變業務的考驗。 下一步 KISSY 會繼續完善基礎組件例如 date，datasource，selector，graphics 等， 重構已有組件例如 switchable，calendar 等， 增加 package manager 方便基于 KISSY 模塊的提交與共享，補全測試用例，實現代碼覆蓋率檢測，不斷提高運行穩定性。 將來我們堅信 KISSY 會隨著淘寶的發展而繼續成長，也會隨著國內外前端技術的不斷發展而不斷進步。 希望有興趣的你也能加入到 KISSY 開發中，一起學習進步，享受成長的樂趣。

原文鏈接：http://ued.taobao.com/blog/2013/03/modular-scalable-kissy/