首頁  >  文章  >  web前端  >  最新的前端框架、類別庫、工具比較

最新的前端框架、類別庫、工具比較

零下一度
零下一度原創
2017-06-25 09:44:481585瀏覽

比起JavaScript開發人員的數量,目前JavaScript框架、類別庫和工具的數量似乎更多一些。截至2017年5月,GitHub上的快速搜尋顯示,有超過110萬個JavaScript專案。 npmjs.org有50萬個可用的軟體包,每月下載量近100億次。

本文將會討論目前最受歡迎的客戶端JavaScript框架、類別庫和工具以及它們之間的基本差異。也許本文無法告訴你哪個是最好的,但是最適合自己專案的,就是最好的。

類別庫

類別庫是一個有組織的功能集合。典型的類別庫包括字串處理、日期、HTML DOM元素、事件、Cookie、動畫、網頁請求等功能。你可以自己實作一個函數,以便選擇該函數被呼叫時是否需要傳回一個值。

類別庫通常提供一種高階的抽象方法,能夠幫助順利實作專案的細節部分。例如,Ajax通常依賴XMLHttpRequest API,只需要幾行程式碼就實作功能,但瀏覽器之間有細微的差異。類別庫提供了更簡單的ajax()函數,因此開發者可以專注於更高層級的業務邏輯。

類別函式庫能夠使開發時間縮短20%,開發者不必擔心細節實作。

但也有缺點:

  • 類別庫中的錯誤難以定位和修復

  • 開發團隊無法保證快速發布補丁

  • 修補程式可能會改變API,導致大量程式碼必須更改

  • 學習過程中遇到什麼問題或想取得學習資源的話,歡迎加入學習交流群組
    343599877,我們一起學習前端!

框架

框架是應用程式的骨架。它要求以特定的方式來進行軟體設計,在某些節點上實現自己的邏輯。框架通常提供了事件、儲存和資料綁定等功能。

框架通常提供了比類別庫更高層次的抽象,幫助快速建立專案的前80%。

框架的缺點:

  • 如果你的應用程式超出了框架的範圍,最後20%可能會很難

  • 框架更新很困難

  • 核心框架程式碼和概念很少更新

工具

工具會幫助開發工作,但卻不是專案的組成部分。工具包括建置系統、編譯器、轉譯器、程式碼分割器、影像壓縮器、部署機制等。

工具幫助實現一個更容易的開發過程。例如,對比於CSS,許多編碼者更喜歡Sass,因為它提供了程式碼分離、巢狀、渲染時變數、循環和函數。瀏覽器不了解Sass / SCSS語法,因此在測試和部署之前,必須使用適當的工具將程式碼編譯為CSS。

類別庫、框架和工具的差異

類別庫、框架和工具之間的差異很小。框架可以包括一個類別庫,類別庫可以實作類似框架的方法,專案中任何一種工具都是必不可少的。所以不需要明確的區分類庫、框架和工具。

JavaScript框架和類別庫

以下是依照流行程度的排序:

#jQuery

##網站jquery.com知識庫github.com/jquery/jquery##目前版本開發人員發布日期##2006年8月大小最小30kb用途##通用72.4%的網站
jQuery  
類型 類別庫
3.2.1
jQuery團隊
使用度
#

隨著WordPress、ASP.NET和一些其它框架的發布,jQuery仍然是最常用的JavaScript類別函式庫。它透過將CSS選擇器引入到DOM節點檢索加鏈來應用事件處理程序、動畫和Ajax調用,這徹底改變了客戶端的開發。

jQuery近年來備受青睞,對於需要少量JavaScript功能的專案來說,仍然是一個好選擇。

優點:

  • 分佈規模小

  • 學習曲線平緩,豐富的線上幫助

  • 簡潔的語法

  • 容易拓展

缺點:

  • 增加了原生API的速度開銷

  • 瀏覽器相容性不好,但已改善

  • 用法扁平

  • 一些業界反對使用

Lodash 和 Underscore

 類別庫lodash.com/github.com/lodash/lodash/##目前版本4.17.4開發人員John-David Dalton##用途
Lodash
#類型
網站
#知識庫
##發布日期 2012年4月
大小 #最小4kb – 24kb
######### #通用############使用度######低#############Underscore###### ######## ####類型######類別庫############網站#######underscorejs.org/###########知識庫######github.com/jashkenas/underscore############目前版本#######1.8.3############開發人員######Jeremy Ashkenas############發布日期######2009年10月################# #最小6kb############用途######通用#############使用度################################################## ######

Lodash和Underscore在本節一起談論。它們提供了數百個功能性的JavaScript實用程式來補充原生字串、數字、陣列和其它原始物件方法。雖然兩個類別庫之間有一些重疊,但不太可能在一個專案中同時使用這兩個類別庫。

雖然兩個類別庫在客戶端使用率很低,但卻可以在伺服器端的Node.js應用程式中使用這兩個類別庫。

優點:

  • 小而簡單

  • #好的文件易於學習

  • #與大多數類別庫和框架相容

  • 不擴展內建物件

  • ##可以在客戶端或伺服器上使用

缺點:

  • #有些方法只在ES2015及更高版本的JavaScript中可用。

AngularJS 1.x

AngularJS 類型框架網站angularjs.org##知識庫#目前版本開發人員發布日期##大小144KB用途單頁應用程式使用度低Angular是框架(或MVC應用程式框架)類別清單中的第一個。目前最流行的Angular版本是1.x,它使用雙向資料綁定擴展HTML,同時解耦了DOM操作和應用程式邏輯。
github.com/angular/angular.js
1.6.4
Google
2010年10月
儘管版本2(現在是版本4!)已經發布了,但是Angular 1.x仍在開發中。

優點:

一些大公司正在使用的流行框架
  • 開發現代Web應用程式的解決方案
  • 是標準MEAN堆疊(MongoDB,Express.JS,AngularJS,NodeJS)的一部分,有許多文章和教程可用
  • #缺點:

學習曲線陡峭
  • 大的程式碼庫
  • 無法升級到Angular 2.x
  • Angular 2.x(現在是Angular 4.x)

Angular 類型「框架##目前版本4.1開發人員Google#發表日期#2016年9月大小最小450kb#用途
#angular.io
知識庫 github.com/angular/angular.js
###單一頁面應用程式###### ######使用度數######低############

Angular 2.0於2016年9月發布。這是一個完整的重寫,它引入了使用TypeScript創建的基於模組化組件的模型。 Angular 4.0於2017年3月發布。

Angular 2.x與v1版本截然不同,也不與其它版本相容 – 也許Google應該為專案取一個不同的名字!

優點:

  • 開發現代Web應用程式的解決方案

  • 是標準MEAN棧的一部分,儘管只有少量的教程可用

  • 對於熟悉靜態類型語言(如C#和Java)的開發人員,TypeScript提供了一些優勢。

缺點:

  • #學習曲線陡峭

  • 大的程式碼函式庫

  • 不能從Angular 1.x升級

  • #與1.x相比,Angular 2.x較難理解


  • #學習過程中遇到什麼問題或想取得學習資源的話,歡迎加入學習交流群組
    343599877,我們一起學習前端!

React

## 類型框架網站#facebook.github.io/react/知識庫github.com/facebook/react#目前版本15.5.4開發人員Facebook和貢獻者發布日期2013年3月大小21kb分鐘用途單頁應用程式##使用度React是一個用來建立使用者介面的JavaScript類別庫,也是去年最受關注的類別庫。它專注於Model-View-Controller(MVC)開發的「View」部分,使用它可以輕鬆建立保留狀態的UI元件。它是實現虛擬DOM的首選類別庫之一, 它的記憶體結構能夠有效地計算差異,頁面更新也更有效。
#React

統計顯示React的使用度似乎很低,因為它是在應用程式中使用而不是在網站上。

優點:

    小巧,高效,快速靈活
  • ##簡單的元件模型
  • 良好的文件和線上資源
  • 可實現伺服器端渲染
  • 目前受歡迎,經歷了快速成長
  • 缺點:

#需要學習新的概念和文法
  • 建置工具很重要
  • 需要其它類別庫或框架提供model和Controller部分
  • 與修改DOM的程式碼和其它類別庫不相容
  • 了解更多關於React the ES6 Way
Vue.js

##Vue.js 框架##網址vuejs.org知識庫github.com/vuejs/vue目前版本2.0開發人員Evan You發布日期2014年2月大小最小19kb#用途
#類型
##單一頁面應用程式
使用度數
#

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

    用途
  • #單一頁面應用程式

  • ##使用度

  • Backbone.js是提供伺服器端框架中常見的MVC結構的最早客戶端選項之一。它唯一的依賴是Underscore.js。
  • Backbone.js聲稱是一個類別庫,因為它可以與其它專案集成,但是我覺得大多數開發人員都認為它是一個框架。

優點:

    體積小,重量輕,複雜度低
  • 不加入HTML邏輯
  • 檔案豐富
  • 採用了許多應用,包括Trello、WordPress.com、LinkedIn和Groupon

#缺點:

##需要額外的元件來實現資料綁定等功能Ember.js##網址emberjs.com#知識庫github.com/emberjs/ember.js目前版本2.15.0#開發人員Ember team發布日期
與AngularJS等其它框架相比,抽象度較低
##最新的框架已經不採用MVC架構了
Ember.js  
類型
###2011年12月#############大小#######最小95kb############ #用途######單一頁面應用程式############使用度#######低###########

Ember.js是基於Model-View-ViewModel(MVVM)模式的框架之一。它在單一套件中實現模板化、資料綁定和類別庫。

優點:

  • 為客戶端應用程式提供了單一解決方案

  • 開發人員可以立刻提高開發效率– 它使用jQuery

  • 良好的向後相容性和升級選項

  • 採用了現代Web開發標準

缺點:

  • 大型分配式

  • 與其它正在向較小元件結構發展的框架相比,它十分的龐大

  • #學習曲線陡峭

Knockout.js

#網站knockoutjs.com#知識庫github.com/knockout/knockout#目前版本3.4.2#開發人員Steve Sanderson#發佈日期
#Knockout.js  
型別

2010年7月

大小

    最小59kb
  • ##用途
  • 單一頁面應用程式

  • 使用度

#Knockout.js是最早的MVVM框架之一,它確保了UI與底層資料保持同步,具有範本和依賴關係追蹤。

  • 優點:

  • 小而輕便,無依賴

  • 優秀的瀏覽器支持,可以支援到IE6

良好的文件資源

  • 缺點:

  • ##較大的項目可能變得很複雜

  • 發展已經放緩

  • 使用似乎在減弱

  • #更多的框架和類別庫

    以下項目雖然不是特別流行,但值得考慮:

Polymer – 可以跨瀏覽器支援HTML5網頁元件的類別庫

Meteor – 一個用於Web應用程式的全端平台

Aurelia  – 一個相對較新的,輕量級的跨平台框架

Svelte – 一個將框架原始碼轉換為乾淨JavaScript的新專案Conditioner.js  – 一個基於狀態自動載入和卸載模組的類別庫工具:執行通用任務建置工具會自動執行各種Web開發任務,例如預處理、編譯、最佳化影像、縮小程式碼、程式碼分析和運行測試等。任務可以在一個可執行套件中統一管理。 目前最受歡迎的工具如下:Gulp.jsGulp.js  網站gulpjs.com

知識庫

github. com/gulpjs/gulp

目前版本每月下載雖然Gulp不是第一個任務執行工具,但它很快就成為了最受歡迎的。 Gulp使用易於閱讀的JavaScript程式碼,將原始檔案載入到串流中,並在將資料輸出到建置資料夾之前,透過各種插件管理資料。在任何其它選項之前檢查Gulp.js是簡單、快速和有趣的。 NPMNPM 網站npmjs.com
3.9.1
300萬
#########知識庫#######github.com/npm/npm###########目前版本######4.5.0############每月下載#######300萬####################################

npm是Node.js套件管理器,但其腳本工具可用於執行通用任務。對於具有少量依賴關係的簡單項目來說,這是一個很好的選擇。然而,更複雜的任務可能會變得不太適用。

Grunt

gruntjs.comgithub.com/gruntjs/grunt1.0.1
#Grunt  
#網站
#知識庫
當前版本

每月下載

#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  

# #網站jshint.com知識庫github.com/jshint/jshint#當前版本2.9.4每月下載#200萬##JSHint是一個靈活的JavaScript程式碼分析工具,它很好的平衡了真正的錯誤和老舊的語法。 JSLint

#JSLint

 

#網站 #目前版本每月下載##JSLint是最早的程式碼分析工具之一,它實作了一套嚴格的預設規則。 Mocha
jslint.com
##github.com/reid/node-jslint
0.10.3
50000
工具:單元測試 測試驅動開發的任務要求需要編寫程式碼來測試自己的程式碼。目前有許多選擇,包括Ava, Tape 和Jest ,但目前最受歡迎的三個工具是:

Mocha

 網站#mochajs.org知識庫##每月下載#500萬

github.com/mochajs/mocha
目前版本 3.3.0
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等測試工具。

以上是最新的前端框架、類別庫、工具比較的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn