|
目錄：
- JavaScript組件之旅:分析和設(shè)計(jì)
- JavaScript組件之旅:編碼實(shí)現(xiàn)和算法
- JavaScript組件之旅:用Ant構(gòu)建組件
- JavaScript組件之旅:測(cè)試組件
話說(shuō)上期我們討論了隊(duì)列管理組件的設(shè)計(jì)，并且給它取了個(gè)響亮而獨(dú)特的名字：Smart Queue. 這次，我們要將之前的設(shè)計(jì)成果付諸實(shí)踐，用代碼來(lái)實(shí)現(xiàn)它。
首先，我們要考慮一下它的源文件布局，也就是決定代碼如何拆分到獨(dú)立的文件中去。為什么要這么做呢？還記得上期結(jié)尾處我提到這個(gè)組件會(huì)使用“外部代碼”嗎？為了區(qū)分代碼的用途，決定將代碼至少分成兩部分：外部代碼文件和 Smart Queue 文件。
區(qū)分用途只是其一，其二，分散到獨(dú)立文件有利于代碼的維護(hù)。試想，以后的某一天你決定要在現(xiàn)有的隊(duì)列管理基本功能之上，添加一些新的擴(kuò)展功能，或是把它包裝成某個(gè)實(shí)現(xiàn)特定任務(wù)的組件，而又希望保持現(xiàn)有功能（內(nèi)部實(shí)現(xiàn)）和調(diào)用方式（對(duì)外接口）不變，那么將新的代碼寫到單獨(dú)的文件是最好的選擇。
嗯，下期會(huì)重點(diǎn)談?wù)勎募季值脑掝}，現(xiàn)在要開始切入正題了。第一步，當(dāng)然是要為組件創(chuàng)建自己的命名空間，組件所有的代碼都將限制在這個(gè)頂層命名空間內(nèi)：
var SmartQueue = window.SmartQueue || {};
SmartQueue.version = '0.1';
初始化的時(shí)候，如果碰到命名空間沖突就把它拉過(guò)來(lái)用。通常這個(gè)沖突是由重復(fù)引用組件代碼導(dǎo)致的，因此“拉過(guò)來(lái)用”會(huì)將對(duì)象以同樣的實(shí)現(xiàn)重寫一次；最壞的情況下，如果碰巧頁(yè)面上另一個(gè)對(duì)象也叫 SmartQueue, 那不好意思了，我會(huì)覆蓋你的實(shí)現(xiàn)——如果沒(méi)有進(jìn)一步的命名沖突，基本上兩個(gè)組件可以相安無(wú)事地運(yùn)行。同時(shí)順便給它一個(gè)版本號(hào)。
接著，按三個(gè)優(yōu)先級(jí)為 SmartQueue 創(chuàng)建三個(gè)隊(duì)列：
var Q = SmartQueue.Queue = [[], [], []];
每個(gè)都是空數(shù)組，因?yàn)檫�沒(méi)有任務(wù)加進(jìn)去嘛。又順便給它建個(gè)“快捷方式”，后面要訪問(wèn)數(shù)組直接寫 Q[n] 就可以啦。
接下來(lái)，我們的主角 Task 隆重登場(chǎng)——怎么 new 一個(gè) Task, 定義在這里：
var T = SmartQueue.Task = function(fn, level, name, dependencies) {
if(typeof fn !== FUNCTION) {
throw new Error('Invalid argument type: fn.');
}
this.fn = fn;
this.level = _validateLevel(level) ? level : LEVEL_NORMAL;
// detect type of name
this.name = typeof name === STRING && name ? name : 't' + _id++;
// dependencies could be retrieved as an 'Object', so use instanceof instead.
this.dependencies = dependencies instanceof Array ? dependencies : [];
};
里面的具體細(xì)節(jié)就不說(shuō)了，有必要的注釋，一般我們的代碼也能做到自我描述，后面代碼也是這樣。這里告訴客戶（使用者）：你想新建一個(gè) SmartQueue.Task 實(shí)例，就要至少傳一個(gè)參數(shù)給這個(gè)構(gòu)造函數(shù)（后 3 個(gè)都可以省略進(jìn)行缺省處理），否則拋出異常伺候。
但是這還不夠，有時(shí)候，客戶希望從已有 Task 克隆一個(gè)新實(shí)例，或是從一個(gè)“殘廢體”（具有部分 Task 屬性的對(duì)象）修復(fù)出“健康體”（真正的 Task 對(duì)象實(shí)例），通過(guò)上面的構(gòu)造方式就有點(diǎn)不爽了——客戶得這樣寫：
var task1 = new SmartQueue.Task(obj.fn, 1, '', obj.dependencies);
出處：Alipay UED
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) JavaScript組件之旅:編碼實(shí)現(xiàn)和算法 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) JavaScript組件之旅:編碼實(shí)現(xiàn)和算法 [1]
第 2 頁(yè) 
