另一方面，由于 JavaScript 通常會(huì)和宿主環(huán)境（比如瀏覽器）緊密結(jié)合，因此缺乏功能強(qiáng)大而簡(jiǎn)單易用的開發(fā)工具。在這樣的環(huán)境中，開發(fā)組件或框架成為一項(xiàng)具有挑戰(zhàn)的工作。
這次，我們將以一個(gè)簡(jiǎn)易的 JavaScript 組件開發(fā)為契機(jī)，逐步展開組件的分析、設(shè)計(jì)、實(shí)現(xiàn)、構(gòu)建和測(cè)試等任務(wù)，探討組件開發(fā)過(guò)程涉及的方方面面。這些探討將分 4 篇陸續(xù)張貼出來(lái)（鏈接將在張貼后更新）：

1. 分析和設(shè)計(jì)組件
2. 編碼實(shí)現(xiàn)和算法
3. 用 Ant 構(gòu)建組件
4. 測(cè)試 JavaScript 組件

現(xiàn)在，假設(shè)我們要從頭開始設(shè)計(jì)并實(shí)現(xiàn)一個(gè)隊(duì)列管理組件，先讓我們來(lái)認(rèn)識(shí)一下隊(duì)列：

圖片來(lái)自 Wikipedia.

隊(duì)列是一個(gè)“先進(jìn)先出”(FIFO) 的數(shù)據(jù)結(jié)構(gòu)，只能向它的尾巴追加項(xiàng)，項(xiàng)從頭部取出使用，這個(gè)規(guī)則將應(yīng)用到我們所探討的組件中去。對(duì)于隊(duì)列，相信學(xué)過(guò) C 或是數(shù)據(jù)結(jié)構(gòu)課程的同學(xué)已有所了解，如果你已經(jīng)把它還給了老師，請(qǐng)使用搜索引擎簡(jiǎn)單了解一下隊(duì)列的知識(shí)。

這個(gè)隊(duì)列管理組件具體要實(shí)現(xiàn)的功能是：它是個(gè)任務(wù)管理器，按高、中、低優(yōu)先級(jí)維護(hù)著三個(gè)任務(wù)隊(duì)列，客戶（使用者）可以在任何時(shí)候把想要執(zhí)行的任務(wù)添加到某個(gè)隊(duì)列，可以指定任務(wù)運(yùn)行的上下文，并傳給它必要的數(shù)據(jù)。客戶也可以隨時(shí)運(yùn)行這個(gè)隊(duì)列，隊(duì)列里的任務(wù)按照指定的依賴關(guān)系以合理的方式依次運(yùn)行。

為了不至于使組件過(guò)于簡(jiǎn)單而缺乏實(shí)用性，我們特意給它添加了一些“糖”：分優(yōu)先級(jí)、傳入上下文和數(shù)據(jù)、處理依賴關(guān)系。如果把上面這段理解為需求的話，那么首先，我們要從中提取出最重要的關(guān)鍵詞，它們直接決定了這個(gè)組件應(yīng)該如何設(shè)計(jì)：

• 隊(duì)列
• 優(yōu)先級(jí)
• 依賴關(guān)系

然后，我們從中提煉出涉及的對(duì)象：

• 任務(wù)管理器 (TaskManager): 從目前需求來(lái)看，它只需要一個(gè)實(shí)例。
• 隊(duì)列 (Queue): 每個(gè)優(yōu)先級(jí)對(duì)應(yīng)一個(gè)隊(duì)列，由 TaskManager 管理這三個(gè) Queue 實(shí)例。
• 任務(wù) (Task): 描述添加的任務(wù)，放在相應(yīng)優(yōu)先級(jí)的 Queue 里面。
• 依賴 (Dependency): 描述單一的依賴，即 Task1 依賴 Task2, 顯然某個(gè) Task 可能具有多個(gè)依賴。

它的對(duì)象模型可以大概表示如下：

注意到 Dependency 實(shí)際上并沒(méi)有做什么事，而 Queue 的兩個(gè)方法可以分別交給 TaskManager & Task 來(lái)負(fù)責(zé)。一個(gè)方法到底由哪個(gè)對(duì)象負(fù)責(zé)，是很容易引起爭(zhēng)論的話題，不在我們的討論范圍內(nèi)。這次，我們的重點(diǎn)是，采用 JavaScript 實(shí)現(xiàn)這個(gè)組件，結(jié)合 JavaScript 獨(dú)特的語(yǔ)言特性，我們?cè)O(shè)想實(shí)現(xiàn)上述四個(gè)對(duì)象：

• TaskManager 直接通過(guò)對(duì)象 (Object) 實(shí)現(xiàn)。在 JavaScript 的世界，對(duì)象可以作為天然的靜態(tài)類來(lái)使用——你可以直接在“類” ClassObject 里面定義屬性方法 property，并以靜態(tài)類的方式來(lái)引用 CassObject.property.
• Queue 以數(shù)組 (Array) 的形式體現(xiàn)出來(lái)，Task 則是數(shù)組中存放的每一項(xiàng)。對(duì) Queue 進(jìn)行操作必然要在其 prototype 中定義一些實(shí)例方法，由于每個(gè) Queue 實(shí)例都是原生的數(shù)組，為了減少對(duì) Array.prototype 的侵入，我們可以考慮將這些方法定義到 Task.prototype 上——將職責(zé)轉(zhuǎn)移到任務(wù)上。
  將三個(gè) Queue 數(shù)組集結(jié)在一起，形成一個(gè)“大數(shù)組”以表示三個(gè)不同優(yōu)先級(jí)的隊(duì)列，這個(gè)大數(shù)組可以作為 TaskManager 的屬性。
• 任務(wù)的核心是一個(gè) function, 本來(lái)可以直接用 function 來(lái)表示一個(gè)任務(wù)，但考慮到它具有自身獨(dú)特的屬性（優(yōu)先級(jí)、依賴等等），而且是最經(jīng)常被操作的對(duì)象，以后可能還會(huì)進(jìn)行擴(kuò)展，所以我們決定單獨(dú)將其定義成對(duì)象。
• 依賴直接以數(shù)組的形式作為 Task 的一個(gè)屬性存在——Task 將依賴的其他多個(gè) Task 標(biāo)識(shí)符放在這個(gè)數(shù)組中，不再單獨(dú)定義這個(gè)對(duì)象。

分析下來(lái)，局勢(shì)逐漸明朗——我們需要將四個(gè)對(duì)象簡(jiǎn)化成兩個(gè)：TaskManager & Task, 另外兩個(gè)對(duì)象用原生的數(shù)組來(lái)實(shí)現(xiàn)：

又注意到這里多次以數(shù)組來(lái)實(shí)現(xiàn)，而編碼過(guò)程中必然涉及到數(shù)組的遍歷、查找等操作，JavaScript 1.6 已經(jīng)為我們實(shí)現(xiàn)了這些數(shù)組操作。為了充分利用數(shù)組內(nèi)置的原生方法，又能在較老的瀏覽器中運(yùn)行，我們使用了 Eric 的代碼。這樣，我們可以直接使用諸如 forEach/indexOf 等方法，更關(guān)注組件的功能實(shí)現(xiàn)，而且在現(xiàn)代瀏覽器中獲得較好的性能。

~~~~~~~~~~~~~ 八卦分割線 ~~~~~~~~~~~~~

嗯，在嚴(yán)肅地分析了組件設(shè)計(jì)之后，就要踏上快樂(lè)的編碼實(shí)現(xiàn)之旅了。別急，TaskManager 似乎俗氣了一點(diǎn)：不足以表達(dá)具有優(yōu)先級(jí)、依賴管理的任務(wù)隊(duì)列，而且用它做命名空間有跟其他代碼沖突的可能性。好吧，這個(gè)組件就叫 Smart Queue 吧，響亮而又獨(dú)特.^^

分析設(shè)計(jì)好了，名字也有了，欲知具體實(shí)現(xiàn)過(guò)程，且聽下回分解。

最新評(píng)論