閱讀62 返回首頁    go 阿裏雲 go 技術社區[雲棲]


JavaScript 即未來:介紹 14 個 JavaScript 的框架和庫

Javascript 得到了眾多的技術領導者的擁護和支持,其中一位就是 WordPress 的作者 Matt Mullenweg , 他表示 WordPress 開發者 應該學習 JavaScript , 這也清晰地向 WordPress 社區傳達了 JavaScript 在未來的重要性。 同時,這一觀點也被普遍接受。向著更先進的技術靠攏與過渡也同時保證了 WordPress 在未來的挑戰中不會落於人後。

JavaScript 同時也是眾多站在開源立場的技術中的佼佼者。與現在所流行的觀點相反,JavaScript 不是一個工程,而是一個由其核心團隊共同製定和維護的開放標準。ECMAScript , 這是另一個和 JavaScript 相關的名字, 它雖然不是開源的,但它也有一個開放的標準。

當你在瀏覽 GitHub 的時候你就可以發現 JavaScript 在當今有多麼流行了。而且就倉庫的數量 而言,JavaScript 絕對位於所有的編程語言當中最頂尖的那一層次。 同時,在 Livecoding.tv 上你也能看出 JavaScript 有多麼突出,這裏的用戶發布的關於 JavaScript 的視頻的數量比其他的話題多得多。在寫這篇文章的時候(2016 年底),Livecoding.tv 上已經有 45,919 個 用戶原創的 JavaScript 視頻教程 。

熱門的開源 JavaScript 框架和庫

回歸到主題, 龐大的社區是 JavaScript 的一個得天獨厚的優勢,同時這也推動了 JavaScript 的蓬勃發展。這裏有數以百千計的成熟的 JavaScript 框架和庫供開發者使用,同時這些最優秀的框架和庫都是開源的。對當前的 JavaScript 開發者來說,能夠使用這些優秀的框架和庫來進行快速開發已經是必須技能了。當今的市場需要快速開發,但是,重複造輪子是沒有必要的。不論你是一個 JavaScript 新手還是一個資深的 JavaScript 開發者,使用框架和庫都能極大提高你的工作效率。

好了,讓我們開始吧!

1. Angular.js

Angular.js 是目前最熱門的 JavaScript 框架之一。它用於開發者構建複雜的 web 應用。Angular.js 背後的思想是它的單頁應用 model。同時它 也支持 MVC 架構。在 Angular.js 中 ,開發者可以在前端中使用 JavaScript 代碼,並從字麵上擴展 HTML 詞匯。

Angular.js 自 2009 年出現以來已經有了很大的改進。Angular 1 當前的穩定版本是 1.5.8/1.2.30 。你也可以試一試 Angular 2 ,相對於 Angular 1 來說它有了重大的改進,但這個新版本仍未在全球範圍內被普遍使用。

在 Angular.js 中,數據綁定是完成工作的一個重要概念。在用戶與接口的交互中,當交互完成,view 就會自動更新,隨即新值與 model 交互以確保一切都是同步的。底層的邏輯在 model 中執行完成後,DOM 也會隨即更新。

2. Backbone.js

複雜 web 應用並不適用於所有場景。一些較簡單的 web 應用框架例如 Backbone.js 就非常適合學習 web app 開發。Backbone.js 是一個簡單的框架,可以快速方便地構建簡單的 web 應用。和 Angular.js 一樣,Backbone.js 也支持 MVC 。Backbone.js 還有一些其它關鍵特性如路由,RESTful API 支持,適當的狀態管理等等。你甚至還可以用 Backbone.js 來構建單頁應用。

當前的穩定版本是 1.3.3,可以在 GitHub 中找到。

3. D3.js

D3.js 是一個優秀的 JavaScript 庫,它允許開發者創建具有數據處理功能的富 web 頁麵。D3.js 使用 SVG、HTML 和 CSS 來實現這一切功能。使用 D3.js ,你可以更輕鬆地將數據綁定到 DOM 及啟用數據驅動事件。使用 D3.js ,你還可以創建高質量的數據驅動的 web 頁麵來提供一個更易於理解的視覺效果來呈現數據。查看示例 : LCF 符號哈密頓圖 ,由 D3.js 強力驅動。

4. React.js

React.js 是一個使用起來很有趣的 JavaScript 框架。和其它的 JavaScript 框架不同,React.js 誌在構建一個高可擴展的前端用戶界麵。React.js 出現於 2013 年,它采用了 BSD 開源協議。它因其能夠開發複雜且漂亮的用戶界麵所帶來的優勢而迅速發展壯大。

React.js 背後的核心思想是虛擬 DOM 。虛擬 DOM 在客戶端和服務端之間扮演著一個中間人的角色並帶來了顯著的性能提升。虛擬 DOM 的改變和服務器端 DOM 一樣,隻需要更新所需的元素,相對於傳統的 UI 渲染來說極大提升了渲染速度。

你還可以使用 Recat 來實現 meterial 風格的設計,使你能夠開發具有無與倫比的性能的 web 應用。

5. jQuery

jQuery 是一個非常流行的 JavaScript 庫,它擁有眾多特性例如事件處理、動畫等。當你在做一個 web 項目的時候,你不會想要把時間浪費在為一些簡單的功能寫代碼上。jQuery 為減少你的工作量提供了一些易於使用的 API 。這些 API 在所有的常見的瀏覽器中都能夠使用。使用 jQuery, 你可以無縫地控製 DOM 以及 Ajax 這樣在近幾年來擁有大量需求的任務。使用 jQuery,開發者不必擔心一些低級的交互,同時可以使他們的 web 應用的開發更加容易與迅速。

jQuery 同時便於分離 HTML 和 JavaScript 代碼,使開發者能夠編寫簡潔而跨瀏覽器兼容的代碼。並且使用 jQuery 創建的 web 應用在將來也易於改善和擴展。

6. Ember.js

Ember.js 是一個 Angular.js 和 React.js 的功能混合體。當你在瀏覽社區的時候你能明顯地感受到 Ember.js 的熱門程度。Ember.js 的新特性也不斷地在添加。它在數據同步方麵與 Angular.js 很像。 雙向的數據交換可以確保應用的快速性和可擴展性。同時,它還能夠幫助開發者創建一些前端元素。

和 React.js 的相似之處在於,Ember.js 提供了同樣的服務器端虛擬 DOM 以確保高性能和高可擴展。同時, Ember.js 提倡簡化代碼,提供了豐富的 API。Ember.js 還有非常優秀的社區。

7. Polymer.js

如果你曾想過創建你自己的 HTML5 元素,那麼你可以使用 Polymer.js 來做這些事。 Polymer 主要集中於通過給 web 開發者提供創建自己的標簽的功能來提供擴展功能。例如,你可以創建一個和 HTML5 中的 <video> 類似的具有自己的功能的 <my_video> 元素。

Polymer 在 2013 年被 Google 引入並以 三句版 BSD 協議發布。

8. Three.js

Three.js 又是另一個 JavaScript 庫,主要用於 3D 效果開發。如果你在做遊戲開發的動畫效果,那麼你可以利用 Three.js 的優勢。Three.js 在底層中使用 WebGL 使 Three.js 可以輕鬆地被用於在屏幕上渲染 3D 物體。舉一個比較知名的使用 Three.js 的例子就是 HexGLA,這是一個未來派賽車遊戲。

9. PhantomJS

使用 JavaScript 工作就意味著和不同的瀏覽器打交道,同時,當提及瀏覽器的時候,就不得不討論資源管理。在 PhantomJS 中,由於有 Headless WebKit 的支持,所以你可以隨時監測你的 web 應用。Headless WebKit 是 Chrome 和 Safari 使用的渲染引擎中的一部分。

這整個過程是自動化的,你所需要做的隻是使用這個 API 來構建你的 web 應用。

10. BabylonJS

BabylonJS 與 Three.js 不相伯仲, 提供了創建平滑而強大的 3D web 應用的 JavaScript API。它是開源的,且基於 JavaScript 和 WebGL 。創建一個簡單的 3D 物體,比如一個球體是非常簡單的,你隻需要寫短短幾行代碼。通過這個庫提供的 文檔,你可以很好地掌握它的內容。 同時 BabylonJS 的主頁上也提供了一些優秀的 demo 來當作參考。在其官網上你可以找到這些 Demo。

11. Boba.js

Web 應用總是有一個共通的需求,那就是分析。如果你還在苦於將數據的分析與統計插入到 JavaScript 的 web 應用中,那麼你可以試一下 Boba.js。Boba.js 可以幫助你將分析的數據插入到你的 web 應用中並且支持舊的 ga.js 。你甚至可以把數據指標和 Boba.js 集成在一起,隻需要依賴 jQuery 即可。

12. Underscore.js

Underscore.js 解決了 “當我麵對一個空白 HTML 頁麵並希望即刻開始工作,我需要什麼” 這個問題。當你剛開始一個項目,你可能會感到失落或者重複一係列你在之前項目中常做的步驟。 為了簡化開啟一個項目的過程和給你起個頭,Underscore.js 這個 JavaScript 庫給你提供了一係列的方法。例如,你可以使用你在之前項目中常用的 Backbone.js 中的 suspender 或者 jQuery 的一些方法。

一些實用的幫助例如 “filter” 和 “invoke the map” 可以給你起個好頭,以助於你盡可能快的投入到工作中。 Underscore.js 同時還自帶了一個套件來簡化你的測試工作。

13. Meteor.js

Meteor.js 是一個快速構建 JavaScript 應用的框架。它是開源的且它能夠用於構建桌麵應用、移動應用和 web 應用。Meteor.js 是一個全棧的框架同時允許多平台的端到端開發。 你可以使用 Meteor.js 來實現前端和後端功能,同時它也能密切監視應用的性能。Meteor.js 的社區非常龐大,所以它會有不斷的新特性更新或者是 bug 修複。Meteor.js 也是模塊化的,同時它能配合一些其它的優秀的 API 使用。

14. Knockout.js

Knockout.js 在這些庫中可能是最被低估的一個。它是一個基於 MIT 開源協議的開源 JavaScript 框架。作者是Steve Sanderson。它基於 MVVM 模式。

值得注意的是: Node.js

Node.js 是一個強有力的 JavaScript 運行時環境。它可以被用於使用真實世界數據來構建快速且可擴展的應用。它既不是一個框架也不是一個庫,而是一個基於 Google Chrome 的 V8 引擎的運行時環境。你可以用 Node.js 來創建多元化的 JavaScript 應用,包括單頁應用、即時 web 應用等等。從技術層麵上來講,由於它的事件驅動式架構,所以 Node.js 支持異步 I/O 。這種做法使得它成為開發高可擴展應用的一個極好的解決方案的選擇。查看 Node.js在 livecoding.tv 上的視頻。

總結

JavaScript 是 web 開發中的通用語言。它之所以快速發展不僅僅是因為它所提供的內容,更多的是因為它的龐大的開源社區的支持。以上提到的框架和庫對任何一個 JavaScript 開發者來說都是必須知道的。它們都提供了一些途徑來探索 JavaScript 和前端開發。上麵提及的大部分框架和庫頻繁地在 Livecoding.tv 上出現,其大部分來自對 JavaScript 及其相關技術感興趣的軟件工程師。

原文發布時間為:2017-04-07

本文來自雲棲社區合作夥伴“Linux中國”

最後更新:2017-05-23 15:03:17

  上一篇:go  用 Winetricks 配置 WINE
  下一篇:go  幹貨丨喬俊飛:麵向汙水處理過程控製的多目標智能優化方法研究