選擇最適合專案需求的JavaScript框架,可以提升你發佈有競爭力的web app的能力。
最後,你對基於JavaScript的app或網站找到了一個奇妙的想法。選擇正確的框架可能對你專案的成功有相當大的影響。它可以影響你按時完成專案並在將來維護程式碼的能力。 JavaScript框架,如Angular.js,Ember.js或React.js,為你的程式碼帶來結構,並保持其有序化,從而使您你的app更靈活,更具可擴展性,並更容易開發。
Web開發的變更發生的很快。幾乎每個月都會引入一個新的JavaScript框架,現有的框架經常被更新。由於這些框架是開放原始碼的,因此世界各地的大型社群也都可以不斷地使之豐滿起來。因此,了解每個框架的優點和它們之間的區別並不是一件容易的事情。
許多開發人員因為JavaScript框架的種類繁多而感到眼花繚亂——框架外觀和功能非常不同。
讓我們來比較三個最受歡迎和廣泛使用的JavaScript框架的優勢:AngularJS,ReactJS和EmberJS。
框架 |
AngularJS |
ReactJS |
|
##Ember.js | 是什麼? | 超級JavaScript MVW框架 | 一個不只用於建立使用者介面的JavaScript庫 |
一個用於建立高要求的web應用程式的框架 | #建立 | 由MiškoHevery建立於2009年 | #創建者:Jordan Walke,2013年開源 |
最初由Yehuda Katz於2007年創立叫做SproutCore,後來被Facebook收購,並於2011年更名為EmberJS |
#官方首頁 |
http://www.php.cn/ | http://www.php.cn/ |
http://www.php.cn/ | #Github |
http://www.php.cn/ |
#http://www.php.cn/ |
http:/ /www.php.cn/ | Bug 報告 | http://www.php.cn/ | |
許可證 | MIT | MIT | |
#BSD-3-Clause | |||
Angular.js是一個開源的Web應用程式框架,具有由Google提供的Model-View-Controller(MVC)架構(Angular 1)和Model-View- ViewModel(MVVM)架構(Angular 2)。它是上面提到的三個框架中最古老的。因此,它擁有最大的社區。 Angular.js透過使用指令擴充HTML的功能來解決開發SPA(單頁應用程式)的問題。此框架強調讓你的app快速完成和運行。
優點:
#建立自訂的文件物件模型(DOM)元素。
簡單的UI設計與變更。
在HTML文件中建立輸入欄位時,將為每個已渲染欄位建立單獨的資料綁定。 Angular傾向於在重新渲染之前檢查頁面上的每個單一綁定欄位的任何變更。
依賴注入。
簡單路由。
易於測試的程式碼。
此框架利於HTML語法的擴展,並透過指令建立可重複使用的元件。
強大的範本建置解決方案。在HTML屬性中使用綁定表達式來驅動模板功能。 Angular的模板引擎對DOM有著深入的理解,且其結構良好的模板減少了創建結果頁面所需的程式碼總量。
資料建模限於小資料模型的使用,以使程式碼簡單且易於測試。
在渲染靜態清單時速度快。
偉大的程式碼重用(Angular函式庫)。
缺點:
指令API的複雜性。
對於具有許多互動元素的頁面,Angular變得緩慢。
原始設計往往很慢。
由於許多DOM元素,效能方面有問題。
複雜的第三方整合。
陡峭的學習曲線。
範圍很容易使用,但很難除錯。
路由受限。
注意。 Angular 2的功能與上述不同。 Angular 2不是從Angular 1重新設計的,它被完全重寫了。兩個版本的框架之間的巨大變化在開發人員之間引起了相當大的爭議。
ReactJS是一個開源的JavaScript函式庫,用於建立高效能的使用者介面,專注於由Facebook引入和提供的驚人的渲染效能。 React專注於模型視圖控制器(Model View Controller)架構中的「V」。在React第一次發布後,它迅速吸引了大量用戶。它是為了解決與其他JavaScript框架的常見問題——大數據集的高效渲染而創建的。
優點:
#簡單的介面設計與學習API。
比其他JavaScript框架顯著的效能提升。
更快的更新。 React使用最新的資料創建新的虛擬DOM和修補機制,並有效地將其與先前的版本進行比較,創建一個最小的更新部分列表,使其與真正的DOM同步,而不是每次更改時重渲染整個網站。
伺服器端渲染允許建立同構/通用web app。
容易匯入元件,儘管具有很少的依賴性。
良好的程式碼重複使用。
非常適合JavaScript偵錯。
完全有可能用React增強Angular以增強麻煩的元件的效能。
完全基於元件的架構。
JSX,一種JavaScript擴充語法,允許引用HTML並使用HTML標記語法來渲染子元件。
React本機函式庫。
缺點:
不是一個完整的框架,而是一個函式庫。
非常複雜的視圖層。
Flux架構不同於開發人員習慣的範例。
很多人不喜歡JSX。
陡峭的學習曲線。
將React整合到傳統的MVC框架,如Rails中需要一些設定。
EmberJS是一個用於建立單一頁面客戶端網頁應用程式的開源JavaScript應用程式框架,使用Model-View-Controller (MVC)模式。此框架提供通用資料綁定和URL驅動方法,用於建立不同的應用程序,重點放在可擴展性。
Ember在2007年最初被發佈時,叫做SproutCore。 2011年,它被Facebook收購,並重新命名為Ember。它結合了本地框架,例如Apple的Cocoa的經過驗證的概念以及輕量級的敏感度。
優點:
#約定優於設定。 Ember.js不是為應用程式中的各種路由提供詳細的配置,而是喜歡遵循命名約定並自動產生結果程式碼,僅在不遵守約定的情況下指定配置。
客戶端渲染和結構到可擴展的web應用程式超出視圖層。
URL支援。
Ember的物件模型利於鍵值觀測。
嵌套的UI。
最小化DOM。
適用於大型應用程式生態系統。
強資料層與Java整合良好。
完全成型的模板機制(Handlebars模板引擎建構在流行的Mustache 模板引擎上)減少了編寫的程式碼總量。它對DOM一無所知,而是依賴直接的文字操作,動態地建構HTML文件。
使用觀察者來改變值,這將導致僅渲染更改的值。
透過使用附件避免「髒檢查」。
更快的啟動時間和固有的穩定性。
效能焦點。
友善的文件和API。
缺點:
Ember.js缺少控制器層級的元件重複使用。
有很多過時的不再工作的內容和範例。
陡峭的學習曲線。
Handlebars使用許多