新聞中心
相比于JavaScript開(kāi)發(fā)人員的數(shù)量,目前JavaScript框架、類庫(kù)和工具的數(shù)量似乎更多一些。截至2017年5月,GitHub上的快速搜索顯示,有超過(guò)110萬(wàn)個(gè)JavaScript項(xiàng)目。npmjs.org有50萬(wàn)個(gè)可用的軟件包,每月下載量近100億次。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比老邊網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式老邊網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋老邊地區(qū)。費(fèi)用合理售后完善,10多年實(shí)體公司更值得信賴。
本文將會(huì)討論目前最為流行的客戶端JavaScript框架、類庫(kù)和工具以及它們之間的基本差異。也許本文無(wú)法告訴你哪個(gè)是***的,但是最適合自己項(xiàng)目的,就是***的。
類庫(kù)
類庫(kù)是一個(gè)有組織的功能集合。典型的類庫(kù)包括字符串處理、日期、HTML DOM元素、事件、Cookie、動(dòng)畫、網(wǎng)絡(luò)請(qǐng)求等功能。你可以自己實(shí)現(xiàn)一個(gè)函數(shù),以便選擇該函數(shù)被調(diào)用時(shí)是否需要返回一個(gè)值。
類庫(kù)通常提供一種高級(jí)別的抽象方法,能夠幫助順利實(shí)現(xiàn)項(xiàng)目的細(xì)節(jié)部分。例如,Ajax通常依賴于XMLHttpRequest API,只需要幾行代碼就實(shí)現(xiàn)功能,只是瀏覽器之間存在細(xì)微的差異。類庫(kù)提供了更簡(jiǎn)單的ajax()函數(shù),因此開(kāi)發(fā)者可以專注于更高級(jí)別的業(yè)務(wù)邏輯上。
類庫(kù)能夠使將開(kāi)發(fā)時(shí)間縮短20%,開(kāi)發(fā)者不必?fù)?dān)心細(xì)節(jié)實(shí)現(xiàn)。
但是也有缺點(diǎn):
- 類庫(kù)中的錯(cuò)誤難以定位和修復(fù)
- 開(kāi)發(fā)團(tuán)隊(duì)不能保證快速發(fā)布補(bǔ)丁
- 補(bǔ)丁程序可能會(huì)更改API,導(dǎo)致大量代碼必須更改
框架
框架是應(yīng)用程序的骨架。它要求以特定的方式來(lái)進(jìn)行軟件設(shè)計(jì),在某些節(jié)點(diǎn)上實(shí)現(xiàn)自己的邏輯??蚣芡ǔL峁┝耸录⒋鎯?chǔ)和數(shù)據(jù)綁定等功能。
框架通常提供了比類庫(kù)更高層次的抽象,幫助快速構(gòu)建項(xiàng)目的前80%。
框架的缺點(diǎn):
- 如果你的應(yīng)用程序超出了框架的范圍,***20%可能會(huì)很難
- 框架更新很困難
- 核心框架代碼和概念很少更新
工具
工具會(huì)幫助開(kāi)發(fā)工作,但卻不是項(xiàng)目的組成部分。工具包括構(gòu)建系統(tǒng)、編譯器、轉(zhuǎn)譯器、代碼分割器、圖像壓縮器、部署機(jī)制等。
工具幫助實(shí)現(xiàn)一個(gè)更容易的開(kāi)發(fā)過(guò)程。例如,對(duì)比于CSS,許多編碼者更喜歡Sass,因?yàn)樗峁┝舜a分離、嵌套、渲染時(shí)變量、循環(huán)和函數(shù)。瀏覽器不了解Sass / SCSS語(yǔ)法,因此在測(cè)試和部署之前,必須使用適當(dāng)?shù)墓ぞ邔⒋a編譯為CSS。
類庫(kù)、框架和工具的區(qū)別
類庫(kù)、框架和工具之間的區(qū)別很小??蚣芸梢园ㄒ粋€(gè)類庫(kù),類庫(kù)可以實(shí)現(xiàn)類似框架的方法,項(xiàng)目中任何一種工具都是必不可少的。所以不需要明確的區(qū)分類庫(kù)、框架和工具。
JavaScript框架和類庫(kù)
以下是按照流行程度進(jìn)行的排序:
jQuery
| jQuery | |
| 類型 | 類庫(kù) |
| 網(wǎng)站 | jquery.com |
| 知識(shí)庫(kù) | github.com/jquery/jquery |
| 當(dāng)前版本 | 3.2.1 |
| 開(kāi)發(fā)人員 | jQuery團(tuán)隊(duì) |
| 發(fā)布日期 | 2006年8月 |
| 大小 | 最小30kb |
| 用途 | 通用 |
| 使用度 | 72.4%的網(wǎng)站 |
隨著WordPress、ASP.NET和一些其它框架的發(fā)布,jQuery仍然是最常用的JavaScript類庫(kù)。它通過(guò)將CSS選擇器引入到DOM節(jié)點(diǎn)檢索加鏈來(lái)應(yīng)用事件處理程序、動(dòng)畫和Ajax調(diào)用,這徹底改變了客戶端的開(kāi)發(fā)。
jQuery近年來(lái)備受青睞,對(duì)于需要少量JavaScript功能的項(xiàng)目來(lái)說(shuō),仍然是一個(gè)好選擇。
優(yōu)點(diǎn):
- 分布規(guī)模小
- 學(xué)習(xí)曲線平緩,豐富的在線幫助
- 簡(jiǎn)潔的語(yǔ)法
- 容易拓展
缺點(diǎn):
- 增加了原生API的速度開(kāi)銷
- 瀏覽器兼容性不好,但已得到改善
- 用法扁平
- 一些行業(yè)反對(duì)使用
Lodash 和 Underscore
| Lodash | |
| 類型 | 類庫(kù) |
| 網(wǎng)站 | lodash.com/ |
| 知識(shí)庫(kù) | github.com/lodash/lodash/ |
| 當(dāng)前版本 | 4.17.4 |
| 開(kāi)發(fā)人員 | John-David Dalton |
| 發(fā)布日期 | 2012年4月 |
| 大小 | 最小4kb – 24kb |
| 用途 | 通用 |
| 使用度 | 低 |
| Underscore | |
| 類型 | 類庫(kù) |
| 網(wǎng)站 | underscorejs.org/ |
| 知識(shí)庫(kù) | github.com/jashkenas/underscore |
| 當(dāng)前版本 | 1.8.3 |
| 開(kāi)發(fā)人員 | Jeremy Ashkenas |
| 發(fā)布日期 | 2009年10月 |
| 大小 | 最小6kb |
| 用途 | 通用 |
| 使用度 | 低 |
Lodash和Underscore在本節(jié)一起談?wù)?。它們提供了?shù)百個(gè)功能性的JavaScript實(shí)用程序來(lái)補(bǔ)充原生字符串、數(shù)字、數(shù)組和其它原始對(duì)象方法。雖然兩個(gè)類庫(kù)之間有一些重疊,但是不太可能在一個(gè)項(xiàng)目中同時(shí)使用這兩個(gè)類庫(kù)。
雖然兩個(gè)類庫(kù)在客戶端使用率很低,但是卻可以在服務(wù)器端的Node.js應(yīng)用程序中使用這兩個(gè)類庫(kù)。
優(yōu)點(diǎn):
- 小而簡(jiǎn)單
- 良好的文檔易于學(xué)習(xí)
- 與大多數(shù)類庫(kù)和框架兼容
- 不擴(kuò)展內(nèi)置對(duì)象
- 可以在客戶端或服務(wù)器上使用
缺點(diǎn):
- 有些方法只在ES2015及更高版本的JavaScript中可用。
AngularJS 1.x
| AngularJS | |
| 類型 | 框架 |
| 網(wǎng)站 | angularjs.org |
| 知識(shí)庫(kù) | github.com/angular/angular.js |
| 當(dāng)前版本 | 1.6.4 |
| 開(kāi)發(fā)人員 | |
| 發(fā)布日期 | 2010年10月 |
| 大小 | 144KB |
| 用途 | 單頁(yè)應(yīng)用程序 |
| 使用度 | 低 |
Angular是框架(或MVC應(yīng)用程序框架)類列表中的***個(gè)。目前***的Angular版本是1.x,它使用雙向數(shù)據(jù)綁定擴(kuò)展HTML,同時(shí)解耦了DOM操作和應(yīng)用程序邏輯。
盡管版本2(現(xiàn)在是版本4!)已經(jīng)發(fā)布了,但是Angular 1.x仍在開(kāi)發(fā)中。
優(yōu)點(diǎn):
- 一些大公司正在使用的流行框架
- 開(kāi)發(fā)現(xiàn)代Web應(yīng)用程序的解決方案
- 是標(biāo)準(zhǔn)MEAN棧(MongoDB,Express.JS,AngularJS,NodeJS)的一部分,有許多文章和教程可用
缺點(diǎn):
- 學(xué)習(xí)曲線陡峭
- 大的代碼庫(kù)
- 無(wú)法升級(jí)到Angular 2.x
Angular 2.x(現(xiàn)在是Angular 4.x)
| Angular | |
| 類型 | 框架 |
| 網(wǎng)站 | angular.io |
| 知識(shí)庫(kù) | github.com/angular/angular.js |
| 當(dāng)前版本 | 4.1 |
| 開(kāi)發(fā)人員 | |
| 發(fā)布日期 | 2016年9月 |
| 大小 | 最小450kb |
| 用途 | 單頁(yè)面應(yīng)用 |
| 使用度 | 低 |
Angular 2.0于2016年9月發(fā)布。這是一個(gè)完整的重寫,它引入了使用TypeScript創(chuàng)建的基于模塊化組件的模型。Angular 4.0于2017年3月發(fā)布。
Angular 2.x與v1版本截然不同,也不與其它版本兼容 – 也許Google應(yīng)該給項(xiàng)目起一個(gè)不同的名字!
優(yōu)點(diǎn):
- 開(kāi)發(fā)現(xiàn)代Web應(yīng)用程序的解決方案
- 是標(biāo)準(zhǔn)MEAN棧的一部分,盡管只有少量的教程可用
- 對(duì)于熟悉靜態(tài)類型語(yǔ)言(如C#和Java)的開(kāi)發(fā)人員,TypeScript提供了一些優(yōu)勢(shì)。
缺點(diǎn):
- 學(xué)習(xí)曲線陡峭
- 大的代碼庫(kù)
- 不能從Angular 1.x升級(jí)
- 與1.x相比,Angular 2.x較難理解
React
| React | |
| 類型 | 框架 |
| 網(wǎng)站 | facebook.github.io/react/ |
| 知識(shí)庫(kù) | github.com/facebook/react |
| 當(dāng)前版本 | 15.5.4 |
| 開(kāi)發(fā)人員 | Facebook和貢獻(xiàn)者 |
| 發(fā)布日期 | 2013年3月 |
| 大小 | 21kb分鐘 |
| 用途 | 單頁(yè)應(yīng)用程序 |
| 使用度 | 低 |
React是一個(gè)用于構(gòu)建用戶界面的JavaScript類庫(kù),也是去年最受關(guān)注的類庫(kù)。它專注于Model-View-Controller(MVC)開(kāi)發(fā)的“View”部分,使用它可以輕松創(chuàng)建保留狀態(tài)的UI組件。它是實(shí)現(xiàn)虛擬DOM的***類庫(kù)之一, 它的內(nèi)存結(jié)構(gòu)能夠有效地計(jì)算差異,頁(yè)面更新也更加有效。
統(tǒng)計(jì)顯示React的使用度似乎很低,因?yàn)樗窃趹?yīng)用程序中使用而不是在網(wǎng)站。
優(yōu)點(diǎn):
- 小巧,高效,快捷靈活
- 簡(jiǎn)單的組件模型
- 良好的文檔和在線資源
- 可實(shí)現(xiàn)服務(wù)器端渲染
- 目前受歡迎,經(jīng)歷了快速增長(zhǎng)
缺點(diǎn):
- 需要學(xué)習(xí)新的概念和語(yǔ)法
- 構(gòu)建工具很重要
- 需要其它類庫(kù)或框架提供model和Controller部分
- 與修改DOM的代碼和其它類庫(kù)不兼容
了解更多關(guān)于React the ES6 Way
Vue.js
| Vue.js | |
| 類型 | 框架 |
| 網(wǎng)站 | vuejs.org |
| 知識(shí)庫(kù) | github.com/vuejs/vue |
| 當(dāng)前版本 | 2.0 |
| 開(kāi)發(fā)人員 | Evan You |
| 發(fā)布日期 | 2014年2月 |
| 大小 | 最小19kb |
| 用途 | 單頁(yè)面應(yīng)用 |
| 使用度 | 低 |
Vue.js是一個(gè)用于構(gòu)建用戶界面的輕量級(jí)漸進(jìn)框架。它提供了一個(gè)類似React的虛擬DOM驅(qū)動(dòng)視圖層,可以與其它類庫(kù)集成,用于構(gòu)建強(qiáng)大的單頁(yè)面應(yīng)用。該框架是由之前在AngularJS工作過(guò)的Evan You創(chuàng)建的,他提取了AngularJS中自己喜歡的部分。
Vue.js使用HTML模板語(yǔ)法將DOM綁定到實(shí)例數(shù)據(jù)。Model是在數(shù)據(jù)改變時(shí)更新view的純JavaScript對(duì)象。
優(yōu)點(diǎn):
- 可以快速使用,并且日益普及
- 很容易提高高水平開(kāi)發(fā)人員的滿意度
- 依賴性小,性能好
缺點(diǎn):
- 一個(gè)較新的項(xiàng)目 – 風(fēng)險(xiǎn)可能會(huì)更大
- 部分依賴開(kāi)發(fā)人員進(jìn)行更新
- 相比于其它框架,資源較少
Backbone.js
| Backbone.js | |
| 類型 | 框架 |
| 網(wǎng)站 | backbonejs.org |
| 知識(shí)庫(kù) | github.com/jashkenas/backbone/ |
| 當(dāng)前版本 | 1.3.3 |
| 開(kāi)發(fā)人員 | Jeremy Ashkenas |
| 發(fā)布日期 | 2010年10月 |
| 大小 | 最小8kb |
| 用途 | 單頁(yè)面應(yīng)用 |
| 使用度 | 低 |
Backbone.js是提供服務(wù)器端框架中常見(jiàn)的MVC結(jié)構(gòu)的最早客戶端選項(xiàng)之一。它唯一的依賴是Underscore.js。
Backbone.js聲稱是一個(gè)類庫(kù),因?yàn)樗梢耘c其它項(xiàng)目集成,但是我覺(jué)得大多數(shù)開(kāi)發(fā)人員都認(rèn)為它是一個(gè)框架。
優(yōu)點(diǎn):
- 體積小,重量輕,復(fù)雜度低
- 不添加HTML邏輯
- 文件豐富
- 采用了許多應(yīng)用,包括Trello、WordPress.com、LinkedIn和Groupon
缺點(diǎn):
- 與AngularJS等其它框架相比,抽象度較低
- 需要額外的組件來(lái)實(shí)現(xiàn)數(shù)據(jù)綁定等功能
- ***的框架已經(jīng)不采用MVC架構(gòu)了
Ember.js
| Ember.js | |
| 類型 | 框架 |
| 網(wǎng)站 | emberjs.com |
| 知識(shí)庫(kù) | github.com/emberjs/ember.js |
| 當(dāng)前版本 | 2.15.0 |
| 開(kāi)發(fā)人員 | Ember team |
| 發(fā)布日期 | 2011年12月 |
| 大小 | 最小95kb |
| 用途 | 單頁(yè)面應(yīng)用 |
| 使用度 | 低 |
Ember.js是基于Model-View-ViewModel(MVVM)模式的框架之一。它在單個(gè)包中實(shí)現(xiàn)模板化、數(shù)據(jù)綁定和類庫(kù)。
優(yōu)點(diǎn):
- 為客戶端應(yīng)用程序提供了單一解決方案
- 開(kāi)發(fā)人員可以立刻提高開(kāi)發(fā)效率 – 它使用jQuery
- 良好的向后兼容性和升級(jí)選項(xiàng)
- 采用了現(xiàn)代Web開(kāi)發(fā)標(biāo)準(zhǔn)
缺點(diǎn):
- 大型分配式
- 與其它正在向較小組件結(jié)構(gòu)發(fā)展的框架相比,它十分的龐大
- 學(xué)習(xí)曲線陡峭
Knockout.js
| Knockout.js | |
| 類型 | 框架 |
| 網(wǎng)站 | knockoutjs.com |
| 知識(shí)庫(kù) | github.com/knockout/knockout |
| 當(dāng)前版本 | 3.4.2 |
| 開(kāi)發(fā)人員 | Steve Sanderson |
| 發(fā)布日期 | 2010年7月 |
| 大小 | 最小59kb |
| 用途 | 單頁(yè)面應(yīng)用 |
| 使用度 | 低 |
Knockout.js是最早的MVVM框架之一,它確保了UI與底層數(shù)據(jù)保持同步,具有模板和依賴關(guān)系跟蹤。
優(yōu)點(diǎn):
- 小而輕便,無(wú)依賴
- 優(yōu)秀的瀏覽器支持,可以支持到IE6
- 良好的文檔資源
缺點(diǎn):
- 較大的項(xiàng)目可能變得很復(fù)雜
- 發(fā)展已經(jīng)放緩
- 使用情況似乎在減弱
更多的框架和類庫(kù)
以下項(xiàng)目雖然不是特別流行,但值得考慮:
- Polymer – 可以跨瀏覽器支持HTML5網(wǎng)頁(yè)組件的類庫(kù)
- Meteor – 一個(gè)用于Web應(yīng)用程序的全棧平臺(tái)
- Aurelia – 一種相對(duì)較新的,輕量級(jí)的跨平臺(tái)框架
- Svelte – 一個(gè)將框架源代碼轉(zhuǎn)換為干凈JavaScript的新項(xiàng)目
- Conditioner.js – 一個(gè)基于狀態(tài)自動(dòng)加載和卸載模塊的類庫(kù)
工具:執(zhí)行通用任務(wù)
構(gòu)建工具自動(dòng)執(zhí)行各種Web開(kāi)發(fā)任務(wù),例如預(yù)處理、編譯、優(yōu)化圖像、縮小代碼、代碼分析和運(yùn)行測(cè)試等。任務(wù)可以在一個(gè)可執(zhí)行包中統(tǒng)一管理。
目前***的工具如下:
Gulp.js
| Gulp.js | |
| 網(wǎng)站 | gulpjs.com |
| 知識(shí)庫(kù) | github.com/gulpjs/gulp |
| 當(dāng)前版本 | 3.9.1 |
| 每月下載 | 300萬(wàn) |
雖然Gulp不是***個(gè)任務(wù)執(zhí)行工具,它卻很快成為了***的。Gulp使用易于閱讀的JavaScript代碼,將源文件加載到流中,并在將數(shù)據(jù)輸出到構(gòu)建文件夾之前,通過(guò)各種插件管理數(shù)據(jù)。在任何其它選項(xiàng)之前檢查Gulp.js是簡(jiǎn)單、快速和有趣的。
NPM
| NPM | |
| 網(wǎng)站 | npmjs.com |
| 知識(shí)庫(kù) | github.com/npm/npm |
| 當(dāng)前版本 | 4.5.0 |
| 每月下載 | 300萬(wàn) |
npm是Node.js包管理器,但其腳本工具可用于運(yùn)行通用任務(wù)。對(duì)于具有少量依賴關(guān)系的簡(jiǎn)單項(xiàng)目來(lái)說(shuō),這是一個(gè)很好的選擇。然而,更復(fù)雜的任務(wù)可能會(huì)變得不太適用。
Grunt
| Grunt | |
| 網(wǎng)站 | gruntjs.com |
| 知識(shí)庫(kù) | github.com/gruntjs/grunt |
| 當(dāng)前版本 | 1.0.1 |
| 每月下載 | 200萬(wàn) |
Grunt是***批被大規(guī)模采用的JavaScript任務(wù)執(zhí)行工具之一,但其速度和復(fù)雜的JSON配置卻導(dǎo)致了Gulp的興起。現(xiàn)在這些問(wèn)題已經(jīng)得到了解決,Grunt仍然是一個(gè)受歡迎的選擇。
工具:模塊綁定
多個(gè)JavaScript文件的管理已經(jīng)成為了一件繁瑣的事情。默認(rèn)情況下,瀏覽器文件不會(huì)被編譯,因此其依賴關(guān)系必須以適當(dāng)?shù)捻樞蜻M(jìn)行加載或連接。雖然有像ES6模塊和CommonJS這樣的選項(xiàng),但是瀏覽器支持是有限的,因此模塊綁定變得十分重要。
WebPack
| WebPack | |
| 網(wǎng)站 | webpack.js.org |
| 知識(shí)庫(kù) | github.com/webpack/webpack |
| 當(dāng)前版本 | 2.5.1 |
| 每月下載 | 600萬(wàn) |
Webpack支持所有流行的模塊選項(xiàng),并已成為React開(kāi)發(fā)的代名詞。雖然Webpack聲稱是一個(gè)模塊捆綁程序,但是已經(jīng)可以用作通用任務(wù)運(yùn)行程序了。
Browserify
| Browserify | |
| 網(wǎng)站 | browserify.org |
| 知識(shí)庫(kù) | github.com/substack/node-browserify |
| http://www.dlmjj.cn/article/dhpdesc.html |


咨詢
建站咨詢
