網頁制作poluoluo文章簡介：這次，我們將以一個簡易的 JavaScript 組件開發為契機，逐步展開組件的分析、設計、實現、構建和測試等任務，探討組件開發過程涉及的方方面面。這些探討將分 4 篇陸續張貼出來（鏈接將在張貼後更新）
毫無疑問，JavaScript 是一種非常靈活的腳本語言，有時候它像一只難以馴服的野馬——你受益於它的靈活性的同時，也要時刻提防它變得失去控制；另一方面，由於 JavaScript 通常會和宿主環境（比如浏覽器）緊密結合，因此缺乏功能強大而簡單易用的開發工具。在這樣的環境中，開發組件或框架成為一項具有挑戰的工作。
這次，我們將以一個簡易的 JavaScript 組件開發為契機，逐步展開組件的分析、設計、實現、構建和測試等任務，探討組件開發過程涉及的方方面面。這些探討將分 4 篇陸續張貼出來（鏈接將在張貼後更新）：
- 分析和設計組件
- 編碼實現和算法
- 用 Ant 構建組件
- 測試 JavaScript 組件
現在，假設我們要從頭開始設計並實現一個隊列管理組件，先讓我們來認識一下隊列：
Queue
圖片來自 Wikipedia.
隊列是一個“先進先出”(FIFO) 的數據結構，只能向它的尾巴追加項，項從頭部取出使用，這個規則將應用到我們所探討的組件中去。對於隊列，相信學過 C 或是數據結構課程的同學已有所了解，如果你已經把它還給了老師，請使用搜索引擎簡單了解一下隊列的知識。
這個隊列管理組件具體要實現的功能是：它是個任務管理器，按高、中、低優先級維護著三個任務隊列，客戶（使用者）可以在任何時候把想要執行的任務添加到某個隊列，可以指定任務運行的上下文，並傳給它必要的數據。客戶也可以隨時運行這個隊列，隊列裡的任務按照指定的依賴關系以合理的方式依次運行。
為了不至於使組件過於簡單而缺乏實用性，我們特意給它添加了一些“糖”：分優先級、傳入上下文和數據、處理依賴關系。如果把上面這段理解為需求的話，那麼首先，我們要從中提取出最重要的關鍵詞，它們直接決定了這個組件應該如何設計：
- 隊列
- 優先級
- 依賴關系
然後，我們從中提煉出涉及的對象：
- 任務管理器 (TaskManager): 從目前需求來看，它只需要一個實例。
- 隊列 (Queue): 每個優先級對應一個隊列，由 TaskManager 管理這三個 Queue 實例。
- 任務 (Task): 描述添加的任務，放在相應優先級的 Queue 裡面。
- 依賴 (Dependency): 描述單一的依賴，即 Task1 依賴 Task2, 顯然某個 Task 可能具有多個依賴。
網頁制作poluoluo文章簡介：這次，我們將以一個簡易的 JavaScript 組件開發為契機，逐步展開組件的分析、設計、實現、構建和測試等任務，探討組件開發過程涉及的方方面面。這些探討將分 4 篇陸續張貼出來（鏈接將在張貼後更新）
它的對象模型可以大概表示如下：
設計初期的對象圖
注意到 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 吧，響亮而又獨特.^^
分析設計好了，名字也有了，欲知具體實現過程，且聽下回分解。