Kit作為一個UI庫，我并沒有打算讓大家都來學習我的Kit的Core，背熟我的API，這種跟風的學習方式一點意義都沒有，今天jQuery熱，大家都是學jQ，明天SeaJs火了，大家都去炒SeaJs，所以我在KitJs里面，專門為jQ的用戶準備了一個語法糖（Suger.js），完全模擬jQ的API，除了實現(xiàn)，接口都一樣，也方便大家直接拿來主義的改造Kit的組件。當然，作為一個純技術(shù)Fan來說，深入理解一門技術(shù)是如何實現(xiàn)的，遠比拿來主義更有趣的多^_^。當然了，如果你出于KPI考慮，或者老板的老板的項目獎金，直接拿來主義抄襲Kit的組件代碼，完成你的KPI，我也不介意這樣的行為，只要您喝水不忘挖井人，在和同事吹水的時候，也能宣傳一個KitJs，我就很感激您了。同時，Kit也是一個很年輕的庫，出于不斷的發(fā)展之中，有一些BUG以及瀏覽器兼容問題，在所難免，我一個人也精力有限，在這個前端戰(zhàn)火紛飛的年代，歡迎更多志同道合的基友一起把他搞大，共同進步。

同時，今天發(fā)布了一個kitjs的對話框組件，demo地址為http://xueduany.github.com/KitJs/KitJs/demo/Dialog/demo.html

(一)Kit目錄格式

言歸正傳，在KitJs里，kit.js是作為核心的Core文件的存在，他包含了一些最常用的Dom以及Object，繼承的操作，同級目錄下按照功能的劃分擴展了一批string.js，math.js等等都是為了實現(xiàn)特定方向功能的擴展。每一個獨立的js文件都包含一個Class的構(gòu)造器，以及一個全局對象的實例，

以kit.js為例，包含了$Kit類，以及$Kit類的實例$kit（以$開頭是為了避免與常用的變量沖突），

其他各類，都以Link的方式，掛在$Kit，以及$kit實例實例上，如math.js，包含了$Kit.Math類，以及$kit.math實例，這樣保證全局范圍里只有$Kit和$kit兩個污染。同時，在kit.js，我們定義了一個命名空間叫做$kit.ui，在物理目錄下，以kit.js同級的Widget目錄，一字排開，多個首字母大寫的目錄

widget目錄下所有目錄都是kitjs的組件目錄，每個獨立js文件只包含一個獨立組件的class構(gòu)造器（非實例），同時可以兼容commonJs的module模式(可以符合CommonJs的Modules/1.1 規(guī)范，以及AMD方式改造，具體改造方式后面會以后會詳細提及)

（二）Kit組件默認代碼模板，注釋符合jsdoc規(guī)范

我們以對話框組件舉例，每個組件都類似如下

首先是jsdoc的注釋，@class申明是一個什么類，@require xxx.js，申明依賴哪些組件

（三）構(gòu)造器以及初始化方法

每個類都是標準的function(config){}的方式定義個構(gòu)造器，這里需要注意的是，每個kitjs組件的構(gòu)造器默認預留一個config參數(shù)，作為個性化配置的輸入，

同時在類的構(gòu)造器，有個一個靜態(tài)成員，defaultConfig對象，用來存放kitjs組件的默認配置

在使用kitjs的組件，首先是需要通過new Instance的方式new $kit.ui.Dialog.YesOrNo，初始化一個新的實例對象出來，這是僅僅是初始化了一個js的組件對象，還沒有HTML，需要執(zhí)行init方法，創(chuàng)建HTML，加入doc中，等于給靈魂澆上血肉^_^。

可能有同學會問，為什么不把init方法直接放在構(gòu)造器里面，而要另外單獨放出來?

1是因為在繼承時候需要實例化父類，當子類繼承于父類的時候，會設置子類的prototype對象為父類的new Instance新的實例對象，如果在構(gòu)造器里面放了init的初始化方法，會導致父類的HTML被直接執(zhí)行，生成垃圾代碼，

2是因為考慮懶加載的情況，需要HTML代碼在恰當?shù)臅r間執(zhí)行，而不是一開始初始化時立即執(zhí)行

所以使用kitjs組件的默認方式是

實例化之后，執(zhí)行init方法（init方法會返回當前組件對象，有return代碼7）

上圖可以發(fā)現(xiàn)，在dialog中所有API method都是掛在prototype上，通過原型擴展的方式實現(xiàn)繼承以及傳遞給實例對象

觀察$kit.ui.Dialog.YesOrNo組件的構(gòu)造器代碼，

(四)KitJs的繼承

他通過$kit.inherit方法申明了與$kit.ui.Dialog對象的繼承關(guān)系，這里會有同學要問，為什么要在構(gòu)造器里面繼承，而不是直接寫在外面?

原因是：

1.kitjs是一個基于prototype維護繼承關(guān)系的

2.要使用kitjs的組件，必須要實例化該組件對象，每個組件都是通過new Instance的方式，通過構(gòu)造器創(chuàng)建的

所以我把繼承關(guān)系的執(zhí)行放在代碼的構(gòu)造器中，這樣在實例化一個新的組件時，就會順著當前組件的構(gòu)造器的繼承方法，逐級去繼承到他父類的成員以及方法。

當子類需要修改父類的方法時，只需要在子類的prototype里從定義一個同名的method即可覆蓋父類的繼承方法。

在命名上，kitjs遵循，子類延續(xù)父類的類名作為Namespace，一直鏈下去，如上圖的$kit.ui.Dialog，$kit.ui.Dialog.YesOrNo

kitjs的繼承實現(xiàn)也很簡單

實例化一個父類對象，將父類的實例所有成員copy到子類的原型上，然后重置子類的原型的構(gòu)造器為子類構(gòu)造器，再給子類構(gòu)造器掛一個link，指向父類，通過$kit.inherit方法，在子類$kit.ui.Dialog.YesOrNo實例化的過程中，就可以繼承父類$kit.ui.Dialog的所有子類不存在的成員，實現(xiàn)類似靜態(tài)語言的繼承

(五)config參數(shù)，HTML與Css的耦合拆解/換膚？

kit的組件構(gòu)造器習慣傳入一個 Map類型的參數(shù)，從來個性化組件，在kit組件初始化的時候，會自動用用戶提交的config參數(shù)覆蓋默認的defaultConfig后開始初始化。

對于任何一個組件來說，擺脫不了是HTML結(jié)構(gòu)的變化，以及Css樣式的改變

kit把這種耦合分解在config的參數(shù)配置里面，

首先是使用HTML模板技術(shù)，kit提倡使用$kit.newHTML方法直接根絕HTML String，生成HTML DOM插入文檔流，

所以我們抽取組件的大概HTML內(nèi)容，封裝成HTML String模板，存放在組件的defaultConfig里面，如果用戶需要修改HTML模板，自己在初始化的時候使用自定義的config，覆蓋默認的defaultConfig里面的模板字段即可，

在HTML模板與Css的耦合分解上，kit用了一個技巧就是把className用js模板的方式，分解開來

通過在init方法中的$kit.tpl 將config 中的html以${xxx}的方式對應config中的xxx做替換

同時所有的樣式都在css里面設置，

如果有多套皮膚需要切換，可以選擇在初始化時候，通過config指定${cls}對應的實際className來達到修改模板的className，來達到換膚的效果。

(六)小結(jié)

基本上，透過對$kit.ui.Dialog.YesOrNo組件的代碼分析，我們對kitjs的組件實現(xiàn)結(jié)構(gòu)有了一個大概的了解。其實設計一個頁面組件并不難，但是設計一個能適應各種要求，在各種場合下，可以很快速的變形，并適應開發(fā)，是一個很難的要求。kit通過對HTML模板以及Css的拆分，自定義config參數(shù)與defaultConfig的配合，子類通過繼承的方式獲得父類的屬性以及方法，同時根據(jù)不同的業(yè)務需要重構(gòu)相關(guān)代碼，基本上可以靈活的滿足各種層次，各種環(huán)境下的業(yè)務UI組件需求。

KitJs包括了基本庫和UI庫，
基本庫： 選擇器功能，dom操作功能，動畫功能，增強dom事件，增加hashtree數(shù)據(jù)結(jié)構(gòu)，io功能，本地存儲功能，多線程，range等等
還有一個模擬jquery操作格式的suger.js
UI庫包括了：增強的form元素，彈出層，媒體播放器，驗證框架，瀑布流，聯(lián)動，幻燈片，日歷，上傳組件，模板引擎等等

最新評論