JavaScript 組件之旅（一）分析和設計

更新時間：2009年10月28日 14:44:55 作者：

毫無疑問，JavaScript 是一種非常靈活的腳本語言，有時候它像一只難以馴服的野馬——你受益于它的靈活性的同時，也要時刻提防它變得失去控制

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

分析和設計組件
編碼實現(xiàn)和算法
用 Ant 構建組件
測試 JavaScript 組件

現(xiàn)在，假設我們要從頭開始設計并實現(xiàn)一個隊列管理組件，先讓我們來認識一下隊列：

Queue

圖片來自 Wikipedia.

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

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

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

隊列
優(yōu)先級
依賴關系

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

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

它的對象模型可以大概表示如下：

設計初期的對象圖

注意到 Dependency 實際上并沒有做什么事，而 Queue 的兩個方法可以分別交給 TaskManager & Task 來負責。一個方法到底由哪個對象負責，是很容易引起爭論的話題，不在我們的討論范圍內。這次，我們的重點是，采用 JavaScript 實現(xiàn)這個組件，結合 JavaScript 獨特的語言特性，我們設想實現(xiàn)上述四個對象：

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

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

簡化后的對象模型

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

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

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

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