# Vue.js是一個用來建立使用者介面的輕量級漸進框架。它提供了一個類似React的虛擬DOM驅動視圖層,可以與其它類庫集成,用於建立強大的單頁應用程式。該框架是由之前在AngularJS工作過的Evan You創建的,他提取了AngularJS中自己喜歡的部分。
Vue.js使用HTML範本語法將DOM綁定到實例資料。 Model是在資料改變時更新view的純JavaScript物件。
優點:
可以快速使用,並且日益普及
很容易提高高水平開發人員的滿意度
依賴性小,效能好
缺點:
一個較新的專案– 風險可能會更大
部分依賴開發人員進行更新
相比於其它框架,資源較少
Backbone.js
Backbone.js |
# |
類型 |
#框架 |
#網址 |
backbonejs.org |
知識庫 |
github.com/jashkenas/backbone/ |
目前版本 |
1.3.3 |
開發人員 |
Jeremy Ashkenas |
#發布日期 |
2010年10月 |
|
|
|
|
|
|
大小
最小8kb
優點:
體積小,重量輕,複雜度低 不加入HTML邏輯 檔案豐富 採用了許多應用,包括Trello、WordPress.com、LinkedIn和Groupon
#缺點:
與AngularJS等其它框架相比,抽象度較低 |
| ##需要額外的元件來實現資料綁定等功能
##最新的框架已經不採用MVC架構了 |
|
Ember.js
|
|
Ember.js |
|
類型 |
|
|
|
##網址 | emberjs.com |
#知識庫 | github.com/emberjs/ember.js |
目前版本 | 2.15.0 |
#開發人員 | Ember team |
發布日期 ###2011年12月#############大小#######最小95kb############ #用途######單一頁面應用程式############使用度#######低###########Ember.js是基於Model-View-ViewModel(MVVM)模式的框架之一。它在單一套件中實現模板化、資料綁定和類別庫。
優點:
缺點:
Knockout.js
#Knockout.js |
|
型別 |
|
|
|
|
|
|
| #網站
knockoutjs.com |
| #知識庫
github.com/knockout/knockout | | #目前版本
3.4.2 |
| #開發人員
Steve Sanderson |
|
|
|
#發佈日期
2010年7月
大小
最小59kb-
##用途
- 單一頁面應用程式
- 使用度低
#Knockout.js是最早的MVVM框架之一,它確保了UI與底層資料保持同步,具有範本和依賴關係追蹤。
- 優點:
小而輕便,無依賴
優秀的瀏覽器支持,可以支援到IE6
良好的文件資源
- 缺點:
- ##較大的項目可能變得很複雜
- 發展已經放緩
- 使用似乎在減弱
- #更多的框架和類別庫以下項目雖然不是特別流行,但值得考慮:
Polymer – 可以跨瀏覽器支援HTML5網頁元件的類別庫
Meteor – 一個用於Web應用程式的全端平台
Aurelia – 一個相對較新的,輕量級的跨平台框架
Svelte – 一個將框架原始碼轉換為乾淨JavaScript的新專案 |
| Conditioner.js – 一個基於狀態自動載入和卸載模組的類別庫
| 工具:執行通用任務 | 建置工具會自動執行各種Web開發任務,例如預處理、編譯、最佳化影像、縮小程式碼、程式碼分析和運行測試等。任務可以在一個可執行套件中統一管理。
目前最受歡迎的工具如下: | Gulp.js |
|
| Gulp.js
|
| 網站
gulpjs.com
知識庫
github. com/gulpjs/gulp
目前版本
3.9.1 |
|
每月下載
300萬 |
|
雖然Gulp不是第一個任務執行工具,但它很快就成為了最受歡迎的。 Gulp使用易於閱讀的JavaScript程式碼,將原始檔案載入到串流中,並在將資料輸出到建置資料夾之前,透過各種插件管理資料。在任何其它選項之前檢查Gulp.js是簡單、快速和有趣的。 | NPM |
|
| NPM
|
| 網站
npmjs.com #########知識庫#######github.com/npm/npm###########目前版本######4.5.0############每月下載#######300萬####################################npm是Node.js套件管理器,但其腳本工具可用於執行通用任務。對於具有少量依賴關係的簡單項目來說,這是一個很好的選擇。然而,更複雜的任務可能會變得不太適用。
Grunt
#Grunt |
|
|
|
|
#網站 |
gruntjs.com
|
#知識庫 |
github.com/gruntjs/grunt
|
當前版本 |
1.0.1
每月下載#200萬
Grunt是第一批被大規模採用的JavaScript任務執行工具之一,但其速度和複雜的JSON配置卻導致了Gulp的興起。現在這些問題已經得到了解決,Grunt仍然是一個受歡迎的選擇。 工具:模組綁定多個JavaScript檔案的管理已經成為了一件繁瑣的事情。預設情況下,瀏覽器檔案不會被編譯,因此其依賴關係必須以適當的順序進行載入或連線。雖然有像ES6模組和CommonJS這樣的選項,但是瀏覽器支援是有限的,因此模組綁定變得十分重要。
WebPack |
|
|
#WebPack |
|
|
|
|
|
|
|
|
|
|
|
| ##網站
webpack.js.org |
| 知識庫
github.com/webpack/webpack |
| 目前版本
2.5.1
每月下載
600萬
## Webpack支援所有流行的模組選項,並已成為React開發的代名詞。雖然Webpack聲稱是一個模組捆綁程序,但是已經可以用作通用任務運行程序了。
Browserify |
|
|
#Browserify |
|
|
##網站
browserify.org |
|
知識庫
github.com/substack/node-browserify |
|
#目前版本 14.3.0
每月下載260萬
## Browserify支援Node.js正在使用的CommonJS模組,它將所有模組編譯成單一瀏覽器相容的檔案。
RequireJS
|
|
#RequireJS | |
|
|
#網站
requirejs.org |
|
知識庫
#github.com/jrburke/r.js |
|
############################### #目前版本######2.3.3############每月下載######百萬############### RequireJS是一種瀏覽器中的模組載入器,它也可以在Node.js中使用。 ######工具:程式碼分析######程式碼分析工具用於分析程式碼中潛在錯誤或偏離語法的標準。一個未閉合括號或未聲明的變數一定會被偵測出。 ######ESLint#########################ESLint###### ##################################################################網站######eslint.org############知識庫######github.com/eslint/eslint############目前版本######3.19.0############每月下載#######600萬############ESLint是一種可插拔的程式碼分析工具。每個規則都是一個插件,因此可以根據個人喜好進行配置。
JSHint
# #網站 | jshint.com |
知識庫 | github.com/jshint/jshint |
#當前版本 | 2.9.4 |
每月下載 | #200萬 |
##JSHint是一個靈活的JavaScript程式碼分析工具,它很好的平衡了真正的錯誤和老舊的語法。 | JSLint |
#JSLint
#網站
jslint.com |
|
##github.com/reid/node-jslint |
|
#目前版本
0.10.3 |
|
每月下載
50000 |
|
##JSLint是最早的程式碼分析工具之一,它實作了一套嚴格的預設規則。
工具:單元測試 |
測試驅動開發的任務要求需要編寫程式碼來測試自己的程式碼。目前有許多選擇,包括Ava, Tape 和Jest ,但目前最受歡迎的三個工具是: |
Mocha
Mocha
| 網站 | #mochajs.org
| 知識庫
github.com/mochajs/mocha |
目前版本 |
3.3.0 |
##每月下載 | #500萬 |
Mocha是一個JavaScript測試框架,可以在Node.js或瀏覽器中執行測試。它支援非同步測試,並且經常與Chai配合使用,這樣可以使測試程式碼以可讀取的方式表達。 |
Jasmine |
#############Jasmine###### ############網站######jasmine.github.io############知識庫######github.com/jasmine/jasmine-npm########## ###目前版本######2.6.0############每月下載######200萬############ ##Jasmine是一個行為驅動的測試工具,可以在瀏覽器中自動測試UI和互動。 ######QUnit#########################QUnit######社論######################################################################################################################################################################################################################網站#####################知識庫######github.com/kof/node-qunit###################################################################### #目前版本######1.0.0############每月下載######25000############QUnit是一個單元測試框架,可以在輸入特定參數時,檢查函數結果。它還上報測試結果,確保沒有錯過特定的程式碼分支。
總結與建議
目前最為流程的框架是React,同時其它的框架也在朝向流行的趨勢發展。
如果需要一個安全的、通用的網路應用程序,可以考慮使用Vue.js。
整體框架已經不再受歡迎了,如果你需要對一個較大型專案進行嚴格的結構管理,AngularJS是一個不錯的選擇。目前大多數人堅持使用Angular 1.0版本,但長遠來講,如果你願意學習TypeScript,Angular 4.x版本是個更好的選擇。
jQuery雖然現在不十分流行,在技術新聞中也很少會被提到,但不可否認它是積極開發的,同時也是網站和應用程式的有力工具。 jQuery具有平緩的學習曲線,全球許多開發人員能夠很好地理解。
如果你想要冒險,可以試試Svelte這是一個有趣的客戶端/伺服器框架,它可以在建置時預先呈現JavaScript,並且可以改變我們開發的方式。
工具的選擇因項目而異。雖然目前使用Gulp的開發者佔大多數,但WebPack卻越來越受歡迎。同時你也不能錯過ESLint和Mocha等測試工具。
|