|
|
這次，我們將以一個簡易的 JavaScript 組件開發為契機，逐步展開組件的分析、設計、實現、構建和測試等任務，探討組件開發過程涉及的方方面面。這些探討將分 4 篇陸續張貼出來（鏈接將在張貼后更新）：
- 分析和設計組件
- 編碼實現和算法
- 用 Ant 構建組件
- 測試 JavaScript 組件
現在，假設我們要從頭開始設計并實現一個隊列管理組件，先讓我們來認識一下隊列：
Queue
圖片來自 Wikipedia.
隊列是一個“先進先出”(FIFO) 的數據結構，只能向它的尾巴追加項，項從頭部取出使用，這個規則將應用到我們所探討的組件中去。對于隊列，相信學過 C 或是數據結構課程的同學已有所了解，如果你已經把它還給了老師，請使用搜索引擎簡單了解一下隊列的知識。
這個隊列管理組件具體要實現的功能是：它是個任務管理器，按高、中、低優先級維護著三個任務隊列，客戶（使用者）可以在任何時候把想要執行的任務添加到某個隊列，可以指定任務運行的上下文，并傳給它必要的數據。客戶也可以隨時運行這個隊列，隊列里的任務按照指定的依賴關系以合理的方式依次運行。
為了不至于使組件過于簡單而缺乏實用性，我們特意給它添加了一些“糖”：分優先級、傳入上下文和數據、處理依賴關系。如果把上面這段理解為需求的話，那么首先，我們要從中提取出最重要的關鍵詞，它們直接決定了這個組件應該如何設計：
- 隊列
- 優先級
- 依賴關系
然后，我們從中提煉出涉及的對象：
- 任務管理器 (TaskManager): 從目前需求來看，它只需要一個實例。
- 隊列 (Queue): 每個優先級對應一個隊列，由
TaskManager管理這三個Queue實例。 - 任務 (Task): 描述添加的任務，放在相應優先級的
Queue里面。 - 依賴 (Dependency): 描述單一的依賴，即
Task1依賴Task2, 顯然某個Task可能具有多個依賴。
它的對象模型可以大概表示如下：
設計初期的對象圖
注意到 Dependency 實際上并沒有做什么事，而 Queue 的兩個方法可以分別交給 TaskManager & Task 來負責。一個方法到底由哪個對象負責，是很容易引起爭論的話題，不在我們的討論范圍內。這次，我們的重點是，采用 JavaScript 實現這個組件，結合 JavaScript 獨特的語言特性，我們設想實現上述四個對象：
TaskManager直接通過對象 (Object) 實現。在 JavaScript 的世界，對象可以作為天然的靜態類來使用――你可以直接在“類”ClassObject里面定義屬性方法property，并以靜態類的方式來引用CassObject.property.Queue以數組 (Array) 的形式體現出來，Task則是數組中存放的每一項。對Queue進行操作必然要在其 prototype 中定義一些實例方法，由于每個 Queue 實例都是原生的數組，為了減少對Array.prototype的侵入，我們可以考慮將這些方法定義到Task.prototype上――將職責轉移到任務上。
將三個Queue數組集結在一起，形成一個“大數組”以表示三個不同優先級的隊列，這個大數組可以作為TaskManager的屬性。- 任務的核心是一個 function, 本來可以直接用 function 來表示一個任務，但考慮到它具有自身獨特的屬性（優先級、依賴等等），而且是最經常被操作的對象，以后可能還會進行擴展，所以我們決定單獨將其定義成對象。
- 依賴直接以數組的形式作為
Task的一個屬性存在――Task將依賴的其他多個Task標識符放在這個數組中，不再單獨定義這個對象。
分析下來，局勢逐漸明朗――我們需要將四個對象簡化成兩個：TaskManager & Task, 另外兩個對象用原生的數組來實現：
簡化后的對象模型
又注意到這里多次以數組來實現，而編碼過程中必然涉及到數組的遍歷、查找等操作，JavaScript 1.6 已經為我們實現了這些數組操作。為了充分利用數組內置的原生方法，又能在較老的瀏覽器中運行，我們使用了 Eric 的代碼。這樣，我們可以直接使用諸如 forEach/indexOf 等方法，更關注組件的功能實現，而且在現代瀏覽器中獲得較好的性能。
~~~~~~~~~~~~~ 八卦分割線 ~~~~~~~~~~~~~
嗯，在嚴肅地分析了組件設計之后，就要踏上快樂的編碼實現之旅了。別急，TaskManager 似乎俗氣了一點：不足以表達具有優先級、依賴管理的任務隊列，而且用它做命名空間有跟其他代碼沖突的可能性。好吧，這個組件就叫 Smart Queue 吧，響亮而又獨特.^^
分析設計好了，名字也有了，欲知具體實現過程，且聽下回分解。
JavaScript技術：JavaScript 組件之旅（一）分析和設計，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
