欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 組件之旅(一)分析和設計

 更新時間:2009年10月28日 14:44:55   作者:  
毫無疑問,JavaScript 是一種非常靈活的腳本語言,有時候它像一只難以馴服的野馬——你受益于它的靈活性的同時,也要時刻提防它變得失去控制
另一方面,由于 JavaScript 通常會和宿主環(huán)境(比如瀏覽器)緊密結合,因此缺乏功能強大而簡單易用的開發(fā)工具。在這樣的環(huán)境中,開發(fā)組件或框架成為一項具有挑戰(zhàn)的工作。
這次,我們將以一個簡易的 JavaScript 組件開發(fā)為契機,逐步展開組件的分析、設計、實現(xiàn)、構建和測試等任務,探討組件開發(fā)過程涉及的方方面面。這些探討將分 4 篇陸續(xù)張貼出來(鏈接將在張貼后更新):
  1. 分析和設計組件
  2. 編碼實現(xiàn)和算法
  3. 用 Ant 構建組件
  4. 測試 JavaScript 組件

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

Queue

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 可能具有多個依賴。

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

aaa

設計初期的對象圖

注意到 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):

refactored-object-diagram

簡化后的對象模型

又注意到這里多次以數(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)過程,且聽下回分解。

相關文章

最新評論