發布時間： 2017-07-19 09:41:02
相比于JavaScript開發人員的數量，目前JavaScript框架、類庫和工具的數量似乎更多一些。本文將會討論目前最為流行的客戶端JavaScript框架、類庫和工具以及它們之間的基本差異。也許本文無法告訴你哪個是最好的，但是最適合自己項目的，就是最好的。
類庫
類庫是一個有組織的功能集合。典型的類庫包括字符串處理、日期、HTML DOM元素、事件、Cookie、動畫、網絡請求等功能。你可以自己實現一個函數，以便選擇該函數被調用時是否需要返回一個值。類庫通常提供一種高級別的抽象方法，能夠幫助順利實現項目的細節部分。例如Ajax通常依賴于XMLHttpRequest API，只需要幾行代碼就實現功能，只是瀏覽器之間存在細微的差異。類庫提供了更簡單的ajax()函數，因此開發者可以專注于更高級別的業務邏輯上。類庫能夠使將開發時間縮短20%，開發者不必擔心細節實現。但是也有缺點：
框架
框架是應用程序的骨架。它要求以特定的方式來進行軟件設計，在某些節點上實現自己的邏輯?？蚣芡ǔＬ峁┝耸录?、存儲和數據綁定等功能。框架通常提供了比類庫更高層次的抽象，幫助快速構建項目的前80%。框架的缺點：
工具
工具會幫助開發工作，但卻不是項目的組成部分。工具包括構建系統、編譯器、轉譯器、代碼分割器、圖像壓縮器、部署機制等。工具幫助實現一個更容易的開發過程。例如，對比于CSS，許多編碼者更喜歡Sass，因為它提供了代碼分離、嵌套、渲染時變量、循環和函數。瀏覽器不了解Sass / SCSS語法，因此在測試和部署之前，必須使用適當的工具將代碼編譯為CSS。
類庫、框架和工具的區別
類庫、框架和工具之間的區別很小?？蚣芸梢园ㄒ粋€類庫，類庫可以實現類似框架的方法，項目中任何一種工具都是必不可少的。所以不需要明確的區分類庫、框架和工具。
JavaScript框架和類庫
以下是按照流行程度進行的排序：
jQuery
優點：隨著WordPress、ASP.NET和一些其它框架的發布，jQuery仍然是最常用的JavaScript類庫。它通過將CSS選擇器引入到DOM節點檢索加鏈來應用事件處理程序、動畫和Ajax調用，這徹底改變了客戶端的開發。jQuery近年來備受青睞，對于需要少量JavaScript功能的項目來說，仍然是一個好選擇。
缺點：
Lodash 和 Underscore
優點：Lodash和Underscore在本節一起談論。它們提供了數百個功能性的JavaScript實用程序來補充原生字符串、數字、數組和其它原始對象方法。雖然兩個類庫之間有一些重疊，但是不太可能在一個項目中同時使用這兩個類庫。雖然兩個類庫在客戶端使用率很低，但是卻可以在服務器端的Node.js應用程序中使用這兩個類庫。
缺點：
AngularJS 1.x
優點：Angular是框架(或MVC應用程序框架)類列表中的第一個。目前最流行的Angular版本是1.x，它使用雙向數據綁定擴展HTML，同時解耦了DOM操作和應用程序邏輯。盡管版本2(現在是版本4!)已經發布了，但是Angular 1.x仍在開發中。
缺點：
Angular 2.x(現在是Angular 4.x)
優點：Angular 2.0于2016年9月發布。這是一個完整的重寫，它引入了使用TypeScript創建的基于模塊化組件的模型。Angular 4.0于2017年3月發布。Angular 2.x與v1版本截然不同，也不與其它版本兼容 – 也許Google應該給項目起一個不同的名字!
缺點：
React
優點：React是一個用于構建用戶界面的JavaScript類庫，也是去年最受關注的類庫。它專注于Model-View-Controller(MVC)開發的“View”部分，使用它可以輕松創建保留狀態的UI組件。它是實現虛擬DOM的首選類庫之一， 它的內存結構能夠有效地計算差異，頁面更新也更加有效。統計顯示React的使用度似乎很低，因為它是在應用程序中使用而不是在網站。
缺點：
Vue.js
優點：Vue.js是一個用于構建用戶界面的輕量級漸進框架。它提供了一個類似React的虛擬DOM驅動視圖層，可以與其它類庫集成，用于構建強大的單頁面應用。該框架是由之前在AngularJS工作過的Evan You創建的，他提取了AngularJS中自己喜歡的部分。Vue.js使用HTML模板語法將DOM綁定到實例數據。Model是在數據改變時更新view的純JavaScript對象。
缺點：
Backbone.js
優點：Backbone.js是提供服務器端框架中常見的MVC結構的最早客戶端選項之一。它唯一的依賴是Underscore.js。Backbone.js聲稱是一個類庫，因為它可以與其它項目集成，但是我覺得大多數開發人員都認為它是一個框架。
缺點：
Ember.js
優點：Ember.js是基于Model-View-ViewModel(MVVM)模式的框架之一。它在單個包中實現模板化、數據綁定和類庫。
缺點：
Knockout.js
優點：Knockout.js是最早的MVVM框架之一，它確保了UI與底層數據保持同步，具有模板和依賴關系跟蹤。
缺點：
更多的框架和類庫
以下項目雖然不是特別流行，但值得考慮：
工具：執行通用任務
構建工具自動執行各種Web開發任務，例如預處理、編譯、優化圖像、縮小代碼、代碼分析和運行測試等。任務可以在一個可執行包中統一管理。目前最受歡迎的工具如下：
Gulp.js
NPM雖然Gulp不是第一個任務執行工具，它卻很快成為了最受歡迎的。Gulp使用易于閱讀的JavaScript代碼，將源文件加載到流中，并在將數據輸出到構建文件夾之前，通過各種插件管理數據。在任何其它選項之前檢查Gulp.js是簡單、快速和有趣的。
Gruntnpm是Node.js包管理器，但其腳本工具可用于運行通用任務。對于具有少量依賴關系的簡單項目來說，這是一個很好的選擇。然而，更復雜的任務可能會變得不太適用。
工具：模塊綁定Grunt是第一批被大規模采用的JavaScript任務執行工具之一，但其速度和復雜的JSON配置卻導致了Gulp的興起?，F在這些問題已經得到了解決，Grunt仍然是一個受歡迎的選擇。
多個JavaScript文件的管理已經成為了一件繁瑣的事情。默認情況下，瀏覽器文件不會被編譯，因此其依賴關系必須以適當的順序進行加載或連接。雖然有像ES6模塊和CommonJS這樣的選項，但是瀏覽器支持是有限的，因此模塊綁定變得十分重要。
WebPack
BrowserifyWebpack支持所有流行的模塊選項，并已成為React開發的代名詞。雖然Webpack聲稱是一個模塊捆綁程序，但是已經可以用作通用任務運行程序了。
RequireJSBrowserify支持Node.js正在使用的CommonJS模塊，它將所有模塊編譯成單個瀏覽器兼容的文件。
工具：代碼分析RequireJS是一種瀏覽器中的模塊加載器，它也可以在Node.js中使用。
代碼分析工具用于分析代碼中潛在錯誤或偏離語法的標準。一個未閉合括號或未聲明的變量一定會被檢測出。
ESLint
JSHintESLint是一種可插拔的代碼分析工具。每個規則都是一個插件，因此可以根據個人喜好進行配置。
JSLintJSHint是一個靈活的JavaScript代碼分析工具，它很好的平衡了真正的錯誤和老舊的語法。
工具：單元測試JSLint是最早的代碼分析工具之一，它實現了一套嚴格的默認規則。
測試驅動開發的任務要求需要編寫代碼來測試自己的代碼。目前有許多選擇，包括Ava, Tape 和Jest ，但目前最流行的三個工具是：
Mocha
JasmineMocha是一個JavaScript測試框架，可以在Node.js或瀏覽器中運行測試。它支持異步測試，并且經常與Chai配合使用，這樣可以使測試代碼以可讀取的方式表達。
QUnitJasmine是一個行為驅動的測試工具，可以在瀏覽器中自動測試UI和交互。
總結與建議QUnit是一個單元測試框架，可以在輸入特定參數時，檢查函數結果。它還上報測試結果，確保沒有錯過特定的代碼分支。目前最為流程的框架是React，同時其它的框架也在向著流行的趨勢發展。如果需要一個安全的、通用的Web應用程序，可以考慮使用Vue.js。
整體框架已經不再受歡迎了，如果你需要對一個較大型項目進行嚴格的結構管理，AngularJS是一個不錯的選擇。目前大多數人堅持使用Angular 1.0版本，但是長遠來講，如果你愿意學習TypeScript，Angular 4.x版本是個更好的選擇。
jQuery雖然現在并不十分流行，在技術新聞中也很少會被提到，但不可否認它是積極開發的，同時也是網站和應用程序的有力工具。jQuery具有平緩的學習曲線，全球許多開發人員能夠很好地理解。
如果你想要冒險，可以試試Svelte這是一個有趣的客戶端/服務器框架，它可以在構建時預先呈現JavaScript，并且可以改變我們開發的方式。
工具的選擇因項目而異。雖然目前使用Gulp的開發者占大多數，但WebPack卻越來越受歡迎。同時你也不能錯過ESLint和Mocha等測試工具。
過去的十年，JavaScript經歷了革命性的發展。過去只有少量基本的類庫可以選擇，但是現在可供選擇的類庫已經鋪天蓋地。也許無法確定哪個類庫、框架和工具是最好的，但是最適合自己項目的，就是最好的。
上一篇： 騰科快訊-六種方式縮短你的網頁加載時間
18922156670
