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

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

(一)Kit目錄格式

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

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

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

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

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

我們以對(duì)話框組件舉例，每個(gè)組件都類似如下

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

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

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

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

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

可能有同學(xué)會(huì)問(wèn)，為什么不把init方法直接放在構(gòu)造器里面，而要另外單獨(dú)放出來(lái)?

1是因?yàn)樵诶^承時(shí)候需要實(shí)例化父類，當(dāng)子類繼承于父類的時(shí)候，會(huì)設(shè)置子類的prototype對(duì)象為父類的new Instance新的實(shí)例對(duì)象，如果在構(gòu)造器里面放了init的初始化方法，會(huì)導(dǎo)致父類的HTML被直接執(zhí)行，生成垃圾代碼，

2是因?yàn)榭紤]懶加載的情況，需要HTML代碼在恰當(dāng)?shù)臅r(shí)間執(zhí)行，而不是一開(kāi)始初始化時(shí)立即執(zhí)行

所以使用kitjs組件的默認(rèn)方式是

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

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

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

(四)KitJs的繼承

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

原因是：

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

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

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

當(dāng)子類需要修改父類的方法時(shí)，只需要在子類的prototype里從定義一個(gè)同名的method即可覆蓋父類的繼承方法。

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

kitjs的繼承實(shí)現(xiàn)也很簡(jiǎn)單

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

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

kit的組件構(gòu)造器習(xí)慣傳入一個(gè) Map類型的參數(shù)，從來(lái)個(gè)性化組件，在kit組件初始化的時(shí)候，會(huì)自動(dòng)用用戶提交的config參數(shù)覆蓋默認(rèn)的defaultConfig后開(kāi)始初始化。

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

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

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

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

在HTML模板與Css的耦合分解上，kit用了一個(gè)技巧就是把className用js模板的方式，分解開(kāi)來(lái)

通過(guò)在init方法中的$kit.tpl 將config 中的html以${xxx}的方式對(duì)應(yīng)config中的xxx做替換

同時(shí)所有的樣式都在css里面設(shè)置，

如果有多套皮膚需要切換，可以選擇在初始化時(shí)候，通過(guò)config指定${cls}對(duì)應(yīng)的實(shí)際className來(lái)達(dá)到修改模板的className，來(lái)達(dá)到換膚的效果。

(六)小結(jié)

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

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

最新評(píng)論