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