Twitter發布基於組件的輕量級JavaScript架構——Flight

Twitter發布了Flight項目。Flight是一個輕量級的、基於組件的JavaScript架構，可以將行為映射到DOM節點上。Twitter將其用在自己的Web應用上,Twitter基於MIT許可證開放了Flight的原始碼，同時提供了一個示範應用，還提供了用於解釋如何設定Flight、如何開始建立、測試和調試組件的文檔。。

Flight團隊這樣解釋為什麼要開發Flight：

Flight與其他現有架構的不同之處在於：對於web應用，它不會預先規定或提供任何特定呈現或提供資料的方法。對於請求如何被路由，你使用什麼樣的範本語言、甚至你如何在用戶端或伺服器上呈現你的HTML，它都不關心。有些web架構鼓勵開發人員圍繞一個預先規定好的模型層編寫、安排代碼，Flight直接圍繞現有的DOM模型組織代碼，功能直接映射到DOM節點上。

這樣做可以避免加入額外的資料結構，因為它們不可避免地會影響更大的架構，同時，直接將功能映射到原生web頁面的做法，可以利用原生的特性。比如，我們可以直接在DOM的事件冒泡特性基礎上自訂事件廣播，而且我們的事件處理基礎架構代碼能夠同時處理原生和自訂事件。

那麼Flight中的組件是什麼含義？網站上這麼說：

• 組件，就是一個構造器，帶有混入其原型的屬性。
• 每個組件都有一些準系統，比如事件處理和組件註冊。
• 此外，每個組件的定義都混入一系列自訂屬性中，這些屬性定義了組件的行為。
• 當向一個DOM節點附加一個組件時，該組件的一個新執行個體就得以建立。每個組件執行個體通過其node屬性引用DOM節點。
• 組件執行個體不能直接引用，它們與其他組件通過事件通訊。

Flight遵循嚴格的關注點分離原則。當你建立一個組件時，你無法直接處理它。因此，組件無法被其他組件引用，而且無法成為全域樹的屬性。架構設計的本意如此。組件不能彼此直接存取，實際上，它們會以事件來廣播自己的行為，而且其他組件可以訂閱這些行為。

能看出，事件在Flight架構中十分重要，Flight團隊這樣解釋他們使用事件的原因：

事件是開放性的。當一個組件觸發某個事件，對於自己的請求如何被滿足、或是誰來滿足，它毫不知情。這強制了功能的解耦，工程師因此可以獨立思考每個組件的功用，而不是必須去擔心整個應用的複雜性不斷增加。

讓DOM節點的事件代理組件事件，有如下3點好處：

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

在可移植性和測試方面，每個組件都是一個模組，除了少數幾個標準依賴程式庫外，對其他沒有引用。因此，一個給定的組件會以同樣方式響應一個給定事件，而不管環境如何。測試因此變得簡單可靠，因為事件是唯一的變數，而且生產環境中的事件很容易在測試中複製。要調試一個組件，在控制台中觸發事件就可以了。

至於混入（mixin），Flight對函數式混入提供內建支援，同時保護無意的重寫和混入複製。雖然經典的JavaScript模式只支援單繼承，組件（或其他對象）都可以支援應用多個混入。

對於Flight的未來，團隊表示：

Flight是一個處於不斷開發中的項目。我們準備加入一個完整的測試架構，同時公開更多Twitter網站使用的前端工具。

在Github上，Flight團隊發布了一個用Flight架構構建的簡單email用戶端示範。

Flight使用了es5-shim項目和jQuery，如果要安裝，還需要包括require.js或loadrunner這樣的非同步模組定義（Asynchronous Module Definition，簡稱AMD）。