 |
VOOZH | about |
|
VOOZH | about |
JavaScript框架，庫和工具似乎比他們的開發人員多出很多。截至2017年5月，在 GitHub 上快速搜索 JavaScript 項目顯示已經超過110萬個。npmjs.org 有 50 萬個可用的軟體包，每月下載量近100億次。
2017.05.29：該文章已更新，以反映 JavaScript 生態的當前狀態。
本文將努力解釋最流行的客戶端 JavaScript 框架、庫和工具之間的基本內容和差異。他們對你來說是否是 「最好的」 選擇是另一個問題。選擇一些東西，堅持一段時間。你需要知道的是：你最喜歡的選項終將被「更好」的東西取代，無論你選擇什麼！
在閱讀本文之前請接受以下術語和情況…！
術語「framework(框架)」，「library(庫)」和「tool(工具)」 可以根據情境，在不同時期，對不同的人，意味著不同的東西。這裡使用的一般定義如下：
庫是有用功能的有組織的集合。一個庫的典型功能包括處理字符串、日期、HTML DOM元素、事件、Cookie、動畫、網絡請求等等。每個函數都將值返回給調用應用程式，該應用程式可以在您選擇的情況下實現。你可以把它想像成汽車零件的選擇：你可以自由地使用任何零件來建造一輛能跑的車，但是你必須自己造一個引擎。
庫通常是提供一個更高的抽象層，平滑的實現細節和矛盾。例如，Ajax通常依賴於 XMLHttpRequest API ，但這需要幾行代碼，並且在不同的瀏覽器之間存在細微的差異。但是庫可以提供一個更簡單的
ajax函數，讓程式設計師更專注於高層次的業務邏輯。
一個庫可以將開發時間縮短20%，因為您不必擔心細節問題。但是它也不是沒有缺點的：
框架是一個應用程式的骨架。它要求您以一種特定的方式來處理軟體設計，，並在某些點插入您自己的邏輯。通常為您提供諸如事件、存儲和數據綁定之類的功能。使用汽車類比，那麼框架提供了一輛車的底盤，車身和發動機。 為了讓車輛始終保持運行狀態，你可以添加、刪除或修改某些組件。
框架通常比庫提供更高的抽象層，並且可以幫助您快速構建項目的 80%。但它的缺點是：
工具有助於開發，但不是項目的一個組成部分。工具包括系統構建、編譯器、轉譯器、代碼壓縮、圖像壓縮、部署機制等等。
工具應該提供一個更容易的開發過程。 例如，許多程式設計師喜歡用 Sass 編譯成CSS，因為它提供了代碼分離，嵌套，渲染時變量，循環和函數。 瀏覽器不了解 Sass / SCSS 語法，因此在測試和部署之前，必須使用適當的工具將代碼編譯為 CSS。
庫，框架和工具之間的區別很少。框架可以包括一個庫。庫可以實施類似框架的方法。對於前面二者來說，工具又是必不可少的。
我試圖標記每個提到的項目，看看他們屬於庫，框架還是工具，但尺度不同，標記的類型也可能會有所不同。
如果這聽起來太複雜，可以考慮編寫 vanilla JavaScript。沒關係，但是您將不可避免地編寫自己的庫 和/或 框架代碼。JavaScript 本身就是一種瀏覽器和作業系統抽象塔的抽象！
JavaScript 框架和庫項目根據流行度排序…
| 官網 | |
| 中文文檔 | jQuery API 中文文檔 v3.2.1 |
| 代碼倉庫 | github.com/jquery/jquery |
| 當前版本 | 3.2.1 |
| 開發者 | jQuery team |
| 發布日期 | August 2006 |
| 文件尺寸 | 30kb min |
| 用途 | 通用 |
jQuery 仍然是最常用的 JavaScript 庫，WordPress，ASP.NET和其他幾個框架的創建和分發都依賴於它。它徹底改變了客戶端的開發，將 CSS 選擇器引入到 DOM 節點檢索加連結來應用事件處理程序、動畫和Ajax調用。
雖然 jQuery 最近幾年失寵，但對於需要少量 JavaScript 功能的項目來說，它仍然是一個可行的選擇。
優點：
缺點：
| 類型 | library |
| 官網 | facebook.github.io/react/ |
| 中文文檔 | React 中文文檔 v15.5.4 |
| 代碼倉庫 | github.com/facebook/react |
| 當前版本 | 15.5.4 |
| 開發者 | Facebook 與 貢獻者 |
| 發布日期 | March 2013 |
| 文件尺寸 | 21kb min |
| 用途 | 單頁面應用 |
| 使用率 | low |
React 也許是過去一年裡最受關注的庫了吧。React 是一個用於構建用戶界面的 JavaScript 庫，它專注於 MVC 模式(Model-View-Controller) 的 「View」 部分，並且可以輕鬆創建保留狀態的 UI 組件。 它是實現虛擬 DOM 的第一個庫， 內存結構計算差異，有效地更新頁面。
從統計數據中看，反應的使用似乎很低，可能是因為它更多的在應用程式中使用，而不是網站上使用。38%的程式設計師表示他們正在使用該庫(愚人碼頭註：譯文)。
本節將 Lodash 和 Underscore 放在一起，因為它們提供了數百個功能性的 JavaScript 實用程序來補充原生字符串，數字，數組和其他原始對象的方法。二者有一些功能性的重疊，所以你不太可能在一個項目中同事需要這兩個庫。
它在客戶端使用率似乎很低，但是可以在伺服器端的 Node.js 應用程式中使用這兩個庫。
優點：
缺點：
在這個列表中，Angular是第一個框架（或MVC應用程式框架）。最流行的版本是 1.x 版本，它使用雙向數據綁定擴展 HTML ，同時將 DOM 操作與應用程式邏輯分離 。
儘管版本2（現在是版本4！）已經發布，Angular 1.x仍在開發中。 見下文…
優點：
Angular 2.0 於 2016 年 9 月發布。這是一次完全的重寫，它引入了基於模塊化組件的模型，使用 TypeScript（被編譯為JavaScript ）創建。讓人困惑的是，版本 4.0 於 2017 年 3 月發布（ v3 被跳過以避免語義版本的問題）。
Angular 2+ 與 v1 截然不同。與其他也不兼容 – 也許 Google 應該給該項目另外起一個名字。
缺點：
| Vue.js |
|---|
Vue.js 是一個用於構建用戶界面的輕量級漸進式框架。core(核心) 提供了一個類似於 React 的虛擬 DOM 視圖層，它可以與其他庫集成，但它也能支持單頁應用程式。該框架由以前在 AngularJS 工作過的 Evan You 創建，所以該框架提取了 AngularJS 中作者喜歡的部分。
Vue.js 使用 HTML 模板語法將 DOM 綁定到實例數據。模型是在更改數據時更新視圖的純 JavaScript 對象。附加工具提供了腳手架，路由，狀態管理，動畫等功能。
優點：
| Backbone.js | |
|---|---|
| 最新版本 | 1.3.3 |
| 開發者 | Jeremy Ashkenas |
| 發布日期 | 2010年10月 |
| 文件大小 | 8kb min |
| 用途 | 單頁應用 |
Backbone.js 是提供常見的伺服器端框架MVC結構最早的客戶端選項之一，它唯一的依賴是由同一開發人員創建的 Underscore.js 。
Backbone.js 聲稱是一個庫，因為它可以與其他項目集成，但我認為大多數程式設計師都認為它是一個框架。
優點：
| Ember.js |
|---|
Ember.js是基於Model-View-ViewModel(MVVM)模式的框架之一。 它在單個包中實現模板化，數據綁定和庫。如果 Ruby on Rails體驗的用戶，能夠迅速熟悉其配置概念。
優點：
| Knockout.js | |
|---|---|
| 最新版本 | 3.4.2 |
| 開發者 | Steve Sanderson |
| 發布日期 | 2010年7月 |
| 文件大小 | 59kb min |
| 用途 | 單頁應用 |
較早的MVVM框架之一，Knockout.js 使用觀察者來確保 UI 與底層數據保持同步。它具有模板和依賴關係跟蹤。
優點：
缺點：
如果你希望了解更多項目？以下項目不太受歡迎，但值得考慮：
Tools(工具)：通用的任務執行工具構建工具可自動執行各種 Web 開發任務，例如預處理，編譯，優化圖像，壓縮代碼，代碼檢查，運行測試等。所有的任務都可以在一個可執行包中管理，最受歡迎的選擇包括：
| Gulp.js | |
|---|---|
| 官網 | |
| 倉庫地址 | github.com/gulpjs/gulp |
| 最新版本 | 3.9.1 |
| 月下載量 | 300萬 |
Gulp 雖然它不是第一個任務執行工具，但它很快就成為了最受歡迎的工具，也是我個人最喜歡的任務執行器。Gulp 使用易讀的 JavaScript 代碼，它將源文件加載到一個流中，並通過各種插件將數據輸出到構建文件夾中。這是一種簡單、快速和有趣的方式，所以我把 Gulp.js 放在其他工具選項之前。
| 最新版本 | 4.5.0 |
| 月下載量 | 300萬 |
npm 是 Node.js 包管理器，但是它的 scripts 功能可以用於通用的任務執行。對於那些沒有多少依賴性的簡單項目來說，這是一個很不錯的選擇。然而，對於複雜的任務來說，它可能就有些力不從心。
| 官網 | |
| 倉庫地址 | github.com/gruntjs/grunt |
| 最新版本 | 1.0.1 |
| 月下載量 | 200萬 |
Grunt 是第一個實現批量執行的 JavaScript 任務執行器，但速度和複雜的JSON配置導致了 Gulp 的崛起。現在，最糟糕的問題已經解決，Grunt 仍然是一個不錯的選擇。
Tools(工具)：模塊打包工具管理多個 JavaScript 文件是一件繁瑣的事情。在默認情況下，瀏覽器文件未被編譯，因此依賴關係必須以適當的順序加載或連接。
雖然有很多選項，如 ES6 Modules 和 CommonJS ，但瀏覽器支持是有限的，因此模塊打包工具變得至關重要。
| 官網 | webpack.js.org |
| 中文文檔 | webpack 中文文檔 v2.2 |
| 倉庫地址 | github.com/webpack/webpack |
| 最新版本 | 2.5.1 |
| 月下載量 | 600萬 |
Webpack 支持所有流行的模塊選項，並成為 React 開發的代名詞。儘管他聲稱自己是一個模塊打包工具，但是 Webpack 可以作為一個通用的任務執行工具使用。
| 官網 | browserify.org |
| 倉庫地址 | github.com/substack/node-browserify |
| 最新版本 | 14.3.0 |
| 月下載量 | 260萬 |
Browserify 支持 Node.js 使用的 CommonJS 模塊，將所有模塊編譯成單個瀏覽器兼容的文件。
| 官網 | requirejs.org |
| 倉庫地址 | github.com/jrburke/r.js |
| 最新版本 | 2.3.3 |
| 月下載量 | 100萬 |
RequireJS 是一個瀏覽器中的模塊加載器，它也可以在Node.js中使用。
Tools(工具)：代碼檢查工具(Linting)愚人碼頭註：很多編輯器，IDE都集成了這類相關的工具，或許對你來說這些工具挺陌生，但是其實你一直在使用。
「Linting」 是分析你的代碼中潛在錯誤 或 偏離語法標準的隱患。有了這種工具，你永遠不會遺漏一個結束括號 或 未聲明一個變量！
| 官網 | eslint.org |
| 倉庫地址 | github.com/eslint/eslint |
| 最新版本 | 3.19.0 |
| 月下載量 | 600萬 |
ESLint 是一種插件式的代碼檢查工具，每個規則都是一個插件，因此可以根據你的喜好進行配置。
| 官網 | |
| 倉庫地址 | github.com/jshint/jshint |
| 最新版本 | 2.9.4 |
| 月下載量 | 200萬 |
一個靈活的 JavaScript 代碼檢查工具，它能在真正的錯誤 和 看似錯誤的語法需求之間找到一個平衡點。JSHint是我個人最喜歡的。
| 官網 | |
| 倉庫地址 | github.com/reid/node-jslint |
| 最新版本 | 0.10.3 |
| 月下載量 | 5萬 |
這是最先實現一套嚴格默認規則的代碼校驗工具之一，但是這對於我是使用場景貌似不太一致（我不喜歡使用這個工具）。
Tools(工具)：測試套件測試驅動開發(Test-Driven-Development) 需要求你在開始編寫代碼之前，首先編寫測試代碼來測試你的代碼。也歡迎你編寫代碼來測試你的測試代碼！
代碼測試的工具有很多，如 Ava ，Tape 和 Jest，但最流行的三個選項是：
| 官網 | mochajs.org |
| 倉庫地址 | github.com/mochajs/mocha |
| 最新版本 | 3.3.0 |
| 月下載量 | 500萬 |
Mocha 是一個 JavaScript 測試框架，可以在 Node.js 或 瀏覽器 中運行測試。js或瀏覽器。它支持異步測試，經常與 Chai 搭配，以使測試代碼以一種可讀的方式表達。
| 官網 | jasmine.github.io |
| 倉庫地址 | github.com/jasmine/jasmine-npm |
| 最新版本 | 2.6.0 |
| 月下載量 | 200萬 |
Jasmine 是一個行為驅動的測試套件，可以在瀏覽器中自動測試你的UI和交互。
| 官網 | |
| 倉庫地址 | github.com/kof/node-qunit |
| 最新版本 | 1.0.0 |
| 月下載量 | 2.5萬 |
毫無疑問，QUnit是一個單元測試框架，它可以在傳遞特定參數時檢查函數結果。它還將報告測試覆蓋率，以確保您沒有遺漏特定的代碼分支。
Tools(工具)：其他測試工具儘管我盡了最大的努力，但我也不是每個人都喜歡 JavaScript ！諸如 TypeScript ，LiveScript 和 CoffeeScript 等編譯器可以使你的開發生活更加愉快。或者，考慮一下 Babel 轉譯工具，它可以將現代的、簡潔的 ES2015 原始碼轉譯為跨瀏覽器兼容的 ES5 代碼。
有幾十種 JavaScript 驅動的 HTML 模板引擎，包括 Mustache ，Handlebars ，Pug (Jade) 和 EJS 。但就我而言，更喜歡保留 JavaScript 語法(如 EJS 和 doT )的輕量級選項。
最後，當你可以自動化生成文檔時，為什麼要自己編寫呢？與ES2015兼容的文檔生成器包括 ESDoc ， JSDoc （JSDoc 中文文檔） ，YUIdoc ， documentation.js 和 Transcription 。
總結與建議如果你想跟上在技術的潮流，那麼 React 以及和其相關的技術發展方向值得關注。如果你想要為Web應用程式選擇一個安全、通用的選項，那麼你可以考慮 Vue.js 。
雖然整體框架現在不再那麼受歡迎，但是如果你是要做嚴格的大型項目結構，AngularJS 會是一個不錯的選擇。雖然，現在大多數人還在使用 1.0 版本，但是可能不是長久之計。從長遠來看，學習一下 TypeScript ，選擇 4.0 版本會更加安全。
不要貶損 jQuery 。它雖然已經不怎麼流行了，在技術媒體上也很少提及，但它還在積極的開發維護，而且完全能夠勝任網站和應用程式的開發。jQuery 學習曲線平緩，並且全世界的許多開發人員都可以很好的理解。
如果你敢於冒險，喜歡嘗鮮，Svelte 是一個有趣的 客戶端/伺服器 選項它在構建時預先渲染 JavaScript，並可能改變我們開發的方式。
工具的選擇會因項目而異。大多數使用的是 Gulp ，但是 WebPack 越來越受歡迎。你可以用 ESLint 和 Mocha 進行測試，但是有很多其他的選擇。
也就是說，每個項目、團隊和技能都是不同的。你的評估時間有限，所以你很容易使用你所知道的東西。這篇文章將會接受評論和建議，但是當你有一把錘子的時候，一切看起來都像釘子。
最後，不要忘記庫、框架和工具是可選的！在過去的十年中，JavaScript 的開發已經發生了革命性的變化; 我們已經從幾個簡陋的輔助庫選擇的時代進入到了一個壓倒性的選擇的時代。所以很容易陷入日益複雜的陷阱，或者每隔幾個月就切換到最新最熱框架。對於小型的或簡單的任務考慮使用輕量級的 JavaScript 庫或框架。在為其他項目選擇框架時，現有的知識不會變成無價之寶。
我是否錯過了你最喜歡的JavaScript庫、框架或工具？我當然有！歡迎評論…
原文連結：