JavaScript即未來:介紹14個(gè)JavaScript的框架和庫
JavaScript 即未來趨勢(shì)所在。
Javascript 得到了眾多的技術(shù)領(lǐng)導(dǎo)者的擁護(hù)和支持,其中一位就是 WordPress 的作者 Matt Mullenweg , 他表示 WordPress 開發(fā)者 應(yīng)該學(xué)習(xí) JavaScript , 這也清晰地向 WordPress 社區(qū)傳達(dá)了 JavaScript 在未來的重要性。 同時(shí),這一觀點(diǎn)也被普遍接受。向著更先進(jìn)的技術(shù)靠攏與過渡也同時(shí)保證了 WordPress 在未來的挑戰(zhàn)中不會(huì)落于人后。
JavaScript 同時(shí)也是眾多站在開源立場(chǎng)的技術(shù)中的佼佼者。與現(xiàn)在所流行的觀點(diǎn)相反,JavaScript 不是一個(gè)工程,而是一個(gè)由其核心團(tuán)隊(duì)共同制定和維護(hù)的開放標(biāo)準(zhǔn)。ECMAScript , 這是另一個(gè)和 JavaScript 相關(guān)的名字, 它雖然不是開源的,但它也有一個(gè)開放的標(biāo)準(zhǔn)。
當(dāng)你在瀏覽 GitHub 的時(shí)候你就可以發(fā)現(xiàn) JavaScript 在當(dāng)今有多么流行了。而且就倉庫的數(shù)量 而言,JavaScript 絕對(duì)位于所有的編程語言當(dāng)中最頂尖的那一層次。 同時(shí),在 Livecoding.tv 上你也能看出 JavaScript 有多么突出,這里的用戶發(fā)布的關(guān)于 JavaScript 的視頻的數(shù)量比其他的話題多得多。在寫這篇文章的時(shí)候(2016 年底),Livecoding.tv 上已經(jīng)有 45,919 個(gè) 用戶原創(chuàng)的 JavaScript 視頻教程 。
熱門的開源 JavaScript 框架和庫
回歸到主題, 龐大的社區(qū)是 JavaScript 的一個(gè)得天獨(dú)厚的優(yōu)勢(shì),同時(shí)這也推動(dòng)了 JavaScript 的蓬勃發(fā)展。這里有數(shù)以百千計(jì)的成熟的 JavaScript 框架和庫供開發(fā)者使用,同時(shí)這些最優(yōu)秀的框架和庫都是開源的。對(duì)當(dāng)前的 JavaScript 開發(fā)者來說,能夠使用這些優(yōu)秀的框架和庫來進(jìn)行快速開發(fā)已經(jīng)是必須技能了。當(dāng)今的市場(chǎng)需要快速開發(fā),但是,重復(fù)造輪子是沒有必要的。不論你是一個(gè) JavaScript 新手還是一個(gè)資深的 JavaScript 開發(fā)者,使用框架和庫都能極大提高你的工作效率。
好了,讓我們開始吧!
1. Angular.js
Angular.js 是目前最熱門的 JavaScript 框架之一。它用于開發(fā)者構(gòu)建復(fù)雜的 web 應(yīng)用。Angular.js 背后的思想是它的單頁應(yīng)用 model。同時(shí)它 也支持 MVC 架構(gòu)。在 Angular.js 中 ,開發(fā)者可以在前端中使用 JavaScript 代碼,并從字面上擴(kuò)展 HTML 詞匯。
Angular.js 自 2009 年出現(xiàn)以來已經(jīng)有了很大的改進(jìn)。Angular 1 當(dāng)前的穩(wěn)定版本是 1.5.8/1.2.30 。你也可以試一試 Angular 2 ,相對(duì)于 Angular 1 來說它有了重大的改進(jìn),但這個(gè)新版本仍未在全球范圍內(nèi)被普遍使用。
在 Angular.js 中,數(shù)據(jù)綁定是完成工作的一個(gè)重要概念。在用戶與接口的交互中,當(dāng)交互完成,view 就會(huì)自動(dòng)更新,隨即新值與 model 交互以確保一切都是同步的。底層的邏輯在 model 中執(zhí)行完成后,DOM 也會(huì)隨即更新。
2. Backbone.js
復(fù)雜 web 應(yīng)用并不適用于所有場(chǎng)景。一些較簡(jiǎn)單的 web 應(yīng)用框架例如 Backbone.js 就非常適合學(xué)習(xí) web app 開發(fā)。Backbone.js 是一個(gè)簡(jiǎn)單的框架,可以快速方便地構(gòu)建簡(jiǎn)單的 web 應(yīng)用。和 Angular.js 一樣,Backbone.js 也支持 MVC 。Backbone.js 還有一些其它關(guān)鍵特性如路由,RESTful API 支持,適當(dāng)?shù)臓顟B(tài)管理等等。你甚至還可以用 Backbone.js 來構(gòu)建單頁應(yīng)用。
當(dāng)前的穩(wěn)定版本是 1.3.3,可以在 GitHub 中找到。
3. D3.js
D3.js 是一個(gè)優(yōu)秀的 JavaScript 庫,它允許開發(fā)者創(chuàng)建具有數(shù)據(jù)處理功能的富 web 頁面。D3.js 使用 SVG、HTML 和 CSS 來實(shí)現(xiàn)這一切功能。使用 D3.js ,你可以更輕松地將數(shù)據(jù)綁定到 DOM 及啟用數(shù)據(jù)驅(qū)動(dòng)事件。使用 D3.js ,你還可以創(chuàng)建高質(zhì)量的數(shù)據(jù)驅(qū)動(dòng)的 web 頁面來提供一個(gè)更易于理解的視覺效果來呈現(xiàn)數(shù)據(jù)。查看示例 : LCF 符號(hào)哈密頓圖 ,由 D3.js 強(qiáng)力驅(qū)動(dòng)。
4. React.js
React.js 是一個(gè)使用起來很有趣的 JavaScript 框架。和其它的 JavaScript 框架不同,React.js 志在構(gòu)建一個(gè)高可擴(kuò)展的前端用戶界面。React.js 出現(xiàn)于 2013 年,它采用了 BSD 開源協(xié)議。它因其能夠開發(fā)復(fù)雜且漂亮的用戶界面所帶來的優(yōu)勢(shì)而迅速發(fā)展壯大。
React.js 背后的核心思想是虛擬 DOM 。虛擬 DOM 在客戶端和服務(wù)端之間扮演著一個(gè)中間人的角色并帶來了顯著的性能提升。虛擬 DOM 的改變和服務(wù)器端 DOM 一樣,只需要更新所需的元素,相對(duì)于傳統(tǒng)的 UI 渲染來說極大提升了渲染速度。
你還可以使用 Recat 來實(shí)現(xiàn) meterial 風(fēng)格的設(shè)計(jì),使你能夠開發(fā)具有無與倫比的性能的 web 應(yīng)用。
5. jQuery
jQuery 是一個(gè)非常流行的 JavaScript 庫,它擁有眾多特性例如事件處理、動(dòng)畫等。當(dāng)你在做一個(gè) web 項(xiàng)目的時(shí)候,你不會(huì)想要把時(shí)間浪費(fèi)在為一些簡(jiǎn)單的功能寫代碼上。jQuery 為減少你的工作量提供了一些易于使用的 API 。這些 API 在所有的常見的瀏覽器中都能夠使用。使用 jQuery, 你可以無縫地控制 DOM 以及 Ajax 這樣在近幾年來擁有大量需求的任務(wù)。使用 jQuery,開發(fā)者不必?fù)?dān)心一些低級(jí)的交互,同時(shí)可以使他們的 web 應(yīng)用的開發(fā)更加容易與迅速。
jQuery 同時(shí)便于分離 HTML 和 JavaScript 代碼,使開發(fā)者能夠編寫簡(jiǎn)潔而跨瀏覽器兼容的代碼。并且使用 jQuery 創(chuàng)建的 web 應(yīng)用在將來也易于改善和擴(kuò)展。
6. Ember.js
Ember.js 是一個(gè) Angular.js 和 React.js 的功能混合體。當(dāng)你在瀏覽社區(qū)的時(shí)候你能明顯地感受到 Ember.js 的熱門程度。Ember.js 的新特性也不斷地在添加。它在數(shù)據(jù)同步方面與 Angular.js 很像。 雙向的數(shù)據(jù)交換可以確保應(yīng)用的快速性和可擴(kuò)展性。同時(shí),它還能夠幫助開發(fā)者創(chuàng)建一些前端元素。
和 React.js 的相似之處在于,Ember.js 提供了同樣的服務(wù)器端虛擬 DOM 以確保高性能和高可擴(kuò)展。同時(shí), Ember.js 提倡簡(jiǎn)化代碼,提供了豐富的 API。Ember.js 還有非常優(yōu)秀的社區(qū)。
7. Polymer.js
如果你曾想過創(chuàng)建你自己的 HTML5 元素,那么你可以使用 Polymer.js 來做這些事。 Polymer 主要集中于通過給 web 開發(fā)者提供創(chuàng)建自己的標(biāo)簽的功能來提供擴(kuò)展功能。例如,你可以創(chuàng)建一個(gè)和 HTML5 中的 <video> 類似的具有自己的功能的 <my_video> 元素。
Polymer 在 2013 年被 Google 引入并以 三句版 BSD 協(xié)議發(fā)布。
8. Three.js
Three.js 又是另一個(gè) JavaScript 庫,主要用于 3D 效果開發(fā)。如果你在做游戲開發(fā)的動(dòng)畫效果,那么你可以利用 Three.js 的優(yōu)勢(shì)。Three.js 在底層中使用 WebGL 使 Three.js 可以輕松地被用于在屏幕上渲染 3D 物體。舉一個(gè)比較知名的使用 Three.js 的例子就是 HexGLA,這是一個(gè)未來派賽車游戲。
9. PhantomJS
使用 JavaScript 工作就意味著和不同的瀏覽器打交道,同時(shí),當(dāng)提及瀏覽器的時(shí)候,就不得不討論資源管理。在 PhantomJS 中,由于有 Headless WebKit 的支持,所以你可以隨時(shí)監(jiān)測(cè)你的 web 應(yīng)用。Headless WebKit 是 Chrome 和 Safari 使用的渲染引擎中的一部分。
這整個(gè)過程是自動(dòng)化的,你所需要做的只是使用這個(gè) API 來構(gòu)建你的 web 應(yīng)用。
10. BabylonJS
BabylonJS 與 Three.js 不相伯仲, 提供了創(chuàng)建平滑而強(qiáng)大的 3D web 應(yīng)用的 JavaScript API。它是開源的,且基于 JavaScript 和 WebGL 。創(chuàng)建一個(gè)簡(jiǎn)單的 3D 物體,比如一個(gè)球體是非常簡(jiǎn)單的,你只需要寫短短幾行代碼。通過這個(gè)庫提供的 文檔,你可以很好地掌握它的內(nèi)容。 同時(shí) BabylonJS 的主頁上也提供了一些優(yōu)秀的 demo 來當(dāng)作參考。在其官網(wǎng)上你可以找到這些 Demo。
11. Boba.js
Web 應(yīng)用總是有一個(gè)共通的需求,那就是分析。如果你還在苦于將數(shù)據(jù)的分析與統(tǒng)計(jì)插入到 JavaScript 的 web 應(yīng)用中,那么你可以試一下 Boba.js。Boba.js 可以幫助你將分析的數(shù)據(jù)插入到你的 web 應(yīng)用中并且支持舊的 ga.js 。你甚至可以把數(shù)據(jù)指標(biāo)和 Boba.js 集成在一起,只需要依賴 jQuery 即可。
12. Underscore.js
Underscore.js 解決了 “當(dāng)我面對(duì)一個(gè)空白 HTML 頁面并希望即刻開始工作,我需要什么” 這個(gè)問題。當(dāng)你剛開始一個(gè)項(xiàng)目,你可能會(huì)感到失落或者重復(fù)一系列你在之前項(xiàng)目中常做的步驟。 為了簡(jiǎn)化開啟一個(gè)項(xiàng)目的過程和給你起個(gè)頭,Underscore.js 這個(gè) JavaScript 庫給你提供了一系列的方法。例如,你可以使用你在之前項(xiàng)目中常用的 Backbone.js 中的 suspender 或者 jQuery 的一些方法。
一些實(shí)用的幫助例如 “filter” 和 “invoke the map” 可以給你起個(gè)好頭,以助于你盡可能快的投入到工作中。 Underscore.js 同時(shí)還自帶了一個(gè)套件來簡(jiǎn)化你的測(cè)試工作。
13. Meteor.js
Meteor.js 是一個(gè)快速構(gòu)建 JavaScript 應(yīng)用的框架。它是開源的且它能夠用于構(gòu)建桌面應(yīng)用、移動(dòng)應(yīng)用和 web 應(yīng)用。Meteor.js 是一個(gè)全棧的框架同時(shí)允許多平臺(tái)的端到端開發(fā)。 你可以使用 Meteor.js 來實(shí)現(xiàn)前端和后端功能,同時(shí)它也能密切監(jiān)視應(yīng)用的性能。Meteor.js 的社區(qū)非常龐大,所以它會(huì)有不斷的新特性更新或者是 bug 修復(fù)。Meteor.js 也是模塊化的,同時(shí)它能配合一些其它的優(yōu)秀的 API 使用。
14. Knockout.js
Knockout.js 在這些庫中可能是最被低估的一個(gè)。它是一個(gè)基于 MIT 開源協(xié)議的開源 JavaScript 框架。作者是 Steve Sanderson。它基于 MVVM 模式。
值得注意的是: Node.js
Node.js 是一個(gè)強(qiáng)有力的 JavaScript 運(yùn)行時(shí)環(huán)境。它可以被用于使用真實(shí)世界數(shù)據(jù)來構(gòu)建快速且可擴(kuò)展的應(yīng)用。它既不是一個(gè)框架也不是一個(gè)庫,而是一個(gè)基于 Google Chrome 的 V8 引擎的運(yùn)行時(shí)環(huán)境。你可以用 Node.js 來創(chuàng)建多元化的 JavaScript 應(yīng)用,包括單頁應(yīng)用、即時(shí) web 應(yīng)用等等。從技術(shù)層面上來講,由于它的事件驅(qū)動(dòng)式架構(gòu),所以 Node.js 支持異步 I/O 。這種做法使得它成為開發(fā)高可擴(kuò)展應(yīng)用的一個(gè)極好的解決方案的選擇。查看 Node.js在 livecoding.tv 上的視頻。
總結(jié)
JavaScript 是 web 開發(fā)中的通用語言。它之所以快速發(fā)展不僅僅是因?yàn)樗峁┑膬?nèi)容,更多的是因?yàn)樗凝嫶蟮拈_源社區(qū)的支持。以上提到的框架和庫對(duì)任何一個(gè) JavaScript 開發(fā)者來說都是必須知道的。它們都提供了一些途徑來探索 JavaScript 和前端開發(fā)。上面提及的大部分框架和庫頻繁地在 Livecoding.tv 上出現(xiàn),其大部分來自對(duì) JavaScript 及其相關(guān)技術(shù)感興趣的軟件工程師。


























