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.jsloadrunner這樣的異步模塊定義(Asynchronous Module Definition,簡稱AMD)。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com