Twitter Flight 學習小結

連結： twitter flight 關鍵字： 基于事件互動；輕量級的元件； flight特點：      component基于dom：元件綁定到dom上      事件驅動：元件依賴event通信      分離關注點原則（展現在元件無引用、元件間完全解耦 ，和 AOP的應用） 介于單頁面型應用和開放型應用之間的架構，核心是事件驅動、基于dom的元件，強調元件之間相對獨立松散的架構，但對元件的定義又十分嚴格，具有一定的侵入性和排他性。   Flight component的 概念：

• 元件，就是一個構造器，帶有混入（mixin）其原型的屬性。
• 每個元件都有一些基本功能，比如事件處理群組件注冊。
• 此外，每個元件的定義都混入一系列自定義屬性中，這些屬性定義了元件的行為。
• 當向一個DOM節點附加一個元件時，該元件的一個新執行個體就得以建立。每個元件執行個體通過其node屬性引用DOM節點。
• 元件執行個體不能直接引用，它們與其他元件通過事件通信。 （補充：并非不能獲得，不使用其attachTo，而是new 的話還是可獲得元件引用;不建議使用該方式）

如何定義？      通過 component子產品 提供的define元件的方法來定義  如何執行個體化？          通過 attachTo（） 方法綁定到dom節點，即建立了執行個體。 如何互動？      完全通過event。   flight  component 特點：      擴充：        基于架構提供的mixin擴充，基于架構提供的advice 切面擴充（優劣）      不提供元件對象的引用：直接綁定到dom，避免元件間通過event外的方式互動（優劣）      簡單的生命周期：   initialize （before，after） ，teardown                               當然對于開發階段來說有用的是initialize                               對于運作階段，teardown提供了一個銷毀對象的接口，避免記憶體洩露   元件無引用也有兩面性：一方面避免了耦合，并且通過統一的注冊機制也可以做到資源的合理釋放； 另一方面隻能通過事件通信對于一些元件來說增加了互動複雜度，比如， 對于有嵌套（繼承）關系的元件（視圖類有嵌套關系的元件等），父子之間不能直接的引用互動，而隻能通過事件。       flight事件模型特點：      基于/依賴 jquery dom事件模型 ，而非建立新的事件總線          優勢：

• 毫不費力地得到事件廣播功能
• 元件可以在文檔層面訂閱給定的事件類型，或者選擇監聽來自某特定DOM節點的事件
• 訂閱元件不會區分事件來自其他元件的自定義事件，還是原生DOM節點事件，并且會以完全相同方式處理這兩種類型的事件。

 補充 : 利用jq的dom及事件銷毀機制，及時釋放無效的事件監聽。節省記憶體。 基于事件驅動的前端工程特點：     優點：子產品間完全解耦。便于重用、便于測試          缺點： 閱讀代碼很難理清程式的流程，需要輔助文檔來說明 元件提供的事件及關注的事件等。                不利于調試（雖然flight提供了debugging子產品來輔助調試）                需要有一個清晰易分辨的事件命名規則           （ 自己調試 圖檔牆的例子：                     首先是遺忘了具體的流程細節，                     在代碼中難以梳理出程式執行的先後，誤判了邏輯執行的時間點，導緻了錯誤的排查方向。           ）   與我們前端對比：      相同之處：基于AMD的子產品管理；基于事件的元件間互動（部分使用）；        不同之處：我們未提供一個基礎的、統一的元件定義方案，元件的定義相對随意，概念也相對模糊。                   flight的輕量級元件是一個抽象層，提供一些實用的方法來規範、管理元件，但沒有限制元件的職責。            flight元件的優勢是可以mixin一些通用功能，而不用為元件重新編寫，盡管我們沒有類似功能，但目前的應用來看頁面上很少能提取出通用的邏輯（或許頁面邏輯不夠複雜，或許我們的抽象不夠合理）， mixin功能對我們的吸引力不大； 我們的元件互動事件與flight在本質上是一樣的，隻不過flight把jQ的相應方法封裝到了元件原型對象上，隻暴露了相對簡易的使用接口。       與其他mvc架構對比：      flight不關注如何提供資料、如何渲染視圖、如何處理路由，flight的component很容易讓人與ui類對應上，雖然flight并沒有 view(ui)、model（data)、controller(router)等類型之分， 但在實際使用中（示例），還是需要你對 data和ui類的元件做好區分。       如果說 一些mvc架構是輕量級的，flight是更輕量級的，對于建構MVC的工程來說，使用flight開發者還需要做很多基礎的事情。   适用何時？何地？何人？ SPA應用（目前twitter是唯一使用者，類似應用應該都是用的其他mvc架構） 希望建立一些可重用的（ui widget ）component .......   浏覽器支援及依賴 ie7+ , others 依賴： jquery es5-shim amd(requirejs or loadrunner)