新的 Javascript 庫層出不窮，從而Web 社區愈發活躍、多樣、在多方面快速發展。詳細去描述每一種主流的 Javascript框架和庫近乎不可能，所以在這篇文章中主要介紹一些對前端發展最具影響力的前端框架。接下來讓我們來共同研究一些主流前端框架、庫和工具，並討論它們的適用場景。

1.angular.Js

地址：runoob.com/angularjs/an

代碼託管地址:github.com/angular/angu

AngularJS 誕生於2009年，由Misko Hevery等人創建，後為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。

2.Node.Js

地址：runoob.com/nodejs/nodej

如果你是一個前端程序員，你不懂得像PHP、Python或Ruby等動態編程語言，然後你想創建自己的服務，那麼Node.js是一個非常好的選擇。Node.js 是運行在服務端的 JavaScript，如果你熟悉Javascript，那麼你將會很容易的學會Node.js。當然，如果你是後端程序員，想部署一些高性能的服務，那麼學習Node.js也是一個非常好的選擇。

3.requirejs

地址：requirejs.cn/

RequireJS的目標是鼓勵代碼的模塊化，它使用了不同於傳統標籤的腳本載入步驟。可以用它來加速、優化代碼，但其主要目的還是為了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地址。RequireJS以一個相對於baseUrl的地址來載入所有的代碼。

4.Vue.js

地址：cn.vuejs.org/

Vue.js是用於構建互動式的 Web 界面的庫，它提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API，從技術上講，Vue.js 集中在 MVVM 模式上的視圖模型層，並通過雙向數據綁定連接視圖和模型。實際的 DOM操作和輸出格式被抽象出來成指令和過濾器。相比其它的MVVM 框架，Vue.js 更容易上手。

5.React.js

地址：reactjs.cn/react/docs/w

React是一個Facebook 和 Instagram 用來創建用戶界面的 JavaScript 庫。很多人認為 React 是 MVC中的V（視圖）。我們創造 React是為瞭解決一個問題：構建隨著時間數據不斷變化的大規模應用程序。為了達到這個目標，React採用下面兩個主要的思想。

6.backbone.js

地址：css88.com/doc/backbone/

代碼託管地址:github.com/jashkenas/ba

Backbone.js為複雜WEB應用程序提供模型(models)、集合(collections)、視圖(views)的結構。其中模型用於綁定鍵值數據和自定義事件；集合附有可枚舉函數的豐富API； 視圖可以聲明事件處理函數，並通過RESRful JSON介面連接到應用程序。

7.jQuery

代碼託管地址:github.com/jquery/jquer

jQuery是繼Prototype之後又一優秀JavaScript框架。它可方便地操作文檔對象、處理事件、實現動畫效果、使用Ajax與網站交互等。提供API，可供開始者編寫插件，且具有詳盡的說明文檔。兼容CSS3及各種瀏覽器（jQuery2.0及後續版本不支持IE6/7/8瀏覽器）。

8.Zepto.js

地址：css88.com/doc/zeptojs/

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫，它與jquery有著類似的api。 如果你會用jquery，那麼你也會用zepto。設計的目的是提供jquery的類似的APIs，但並不是100%覆蓋jquery為目的。zepto設計的目的是有一個5-10k的通用庫、下載並執行快、有一個熟悉通用的API，所以你能把你主要的精力放到應用開發上。

9.ember.js

官方地址：emberjs.com/

代碼託管地址:github.com/emberjs/embe

Ember.js是一款開源的JavaScriptMVC框架，用來創建Web應用程序。它免除了樣板文件並提供了一套標準的應用程序架構。Ember.js由YehudaKatz創建，它是由SproutCore 2.0改名進化而來。在2013年8月31日發布Ember.js 1.0版本。

10.Ionic

地址：ionic.wang/js_doc-index

Ionic既是一個CSS框架也是一個Javascript UI庫。許多組件需要Javascript才能產生神奇的效果，儘管通常組件不需要編碼，通過框架擴展可以很容易地使用，比如我們的AngularIonic擴展。Ionic遵循視圖控制模式，通俗的理解和Cocoa觸摸框架相似。在視圖控制模式中，我們將界面的不同部分分為子視圖或包含其他視圖的子視圖控制器。然後視圖控制器「驅動」內部視圖來提供交互和UI功能。一個很好的例子就是標籤欄（TabBar）視圖控制器處理點擊標籤欄在一系列可視化面板間切換。

11.SeaJS

官方文檔：zhangxinxu.com/sp/seajs

SeaJS是一個遵循CMD規範的JavaScript模塊載入框架，可以實現JavaScript的模塊化開發及載入機制。Sea.js 追求簡單、自然的代碼書寫和組織方式，具有以下核心特性：簡單友好的模塊定義規範：Sea.js 遵循 CMD 規範，可以像 Node.js 一般書寫模塊代碼。自然直觀的代碼組織方式：依賴的自動載入、配置的簡潔清晰，可以讓我們更多地享受編碼的樂趣。Sea.js 還提供常用插件，非常有助於開發調試和性能優化，並具有豐富的可擴展介面。

12.CommonJS

中文網：php.cn/js-tutorial-3601

Node應用由模塊組成，採用CommonJS模塊規範。根據這個規範，每個文件就是一個模塊，有自己的作用域。在一個文件裡面定義的變數、函數、類，都是私有的，對其他文件不可見。

13.Knockout.js

官方地址：knockoutjs.com/

Knockout是一個輕量級的UI類庫，通過應用MVVM模式使JavaScript前端UI簡單化。Knockout是一個以數據模型為基礎的能夠幫助你創建富文本，響應顯示和編輯用戶界面的JavaScript類庫。任何時候如果你的UI需要自動更新，比如：更新依賴於用戶的行為或者外部數據源的改變，KO能夠很簡單的幫你實現並且很容易維護。

14.Spine.js

代碼託管地址：github.com/spine

Spine是一個構建JavaScriptWeb應用的輕量級框架。Spine給你提供MVC框架，讓你放心做自己事,讓你集中精力在有意思的事情上，從而構建出令人驚嘆的Web應用。Spine用CoffeeScript寫成，但開發應用時不必要用CoffeeScript。你可以使用CoffeeScript或是JavaScript，選擇你最熟悉的就好。

15.Meteor

代碼託管地址:github.com/meteor/meteo

Meteor是一種新型JavaScript框架，用於WebApp應用程序開發。Meteor在2012年4月首次發布。Meteor的基礎構架是Node.JS+MongoDB，官方總結的Meteor的9個優勢是：純粹的JavaScript、實時頁面更新、強大的數據同步、延遲補償、代碼熱推送、敏感代碼運行於受限環境中、完全獨立應用包、互操作性強、智能的包。Meteor團隊表示，包括Facebook、Google及Twitter在內等多家互聯網巨頭在Web應用方面都採用了與Meteor一樣的技術，新一代實時框架，web網站的未來。

16.Dojo

官方地址：dojotoolkit.org/api/

Dojo是目前最為強大的j s框架，它在自己的Wiki上給自己下了一個定義，dojo是一個用JavaScript編寫的開源的DHTML工具箱。dojo很想做一個「大一統」的 工具箱，不僅僅是瀏覽器層面的，野心還是很大的。目前唯一能與 Sencha Ext JS 一較高下的框架就只有 Dojo(dojotoolkit.org)了。抱著 IBM, VMWare 等眾多大腿，Dojo 的一顰一笑都額外惹人注目。Dojo 項目的產品線和功能也特別豐富。首先，Dojo 有自己的 DOM 解析器 Nano，是 DOM 解析和處理的內核。此外，Dojo 的 Web 框架有非常豐富的佈局、版式、控制項以及特效，對多語言以及圖表的擴展支持都非常好，並支持對地圖的操作。

17.Prototype

是一個非常優雅的JS庫，定義了JS的面向對象擴展，DOM操作API，事件等等，以prototype為核心，形成了一個外圍的各種各樣 的JS擴展庫，是相當有前途的JS底層框架，值得推薦，感覺也是現實中應用最廣的庫類（RoR集成的AJAX JS庫），之上還有 Scriptaculous 實現一些JS組件功能和效果。作為 Rails 默認的 JavaScript 框架，相信對廣大開發人員也很有借鑒意義的。

18.Scriptaculous

Scriptaculous是基於prototype.js框架的JS效果。包含了6個js文件，不同的文件對應不同的js效果，所以說，如果底層用 prototype的話，做js效果用Scriptaculous那是再合適不過的了，連大名鼎鼎的digg都在用他，可見不一般

19.yui-ext

基於Yahoo UI的擴展包yui-ext是具有CS風格的Web用戶界面組件 能實現複雜的Layout佈局，界面效果可以和backbase媲美，而且使用純javascript代碼開發。真正的可編輯的表格Edit Grid，支持XML和Json數據類型，直接可以遷入grid。許多組件實現了對數據源的支持

20.YUI

地址：yuilibrary.com

YUI作為開源前端框架的鼻祖，在框架上的功力非常之深。有著自己的解析 DOM 的核心框架，並且在特效、動畫、圖表等方面都有豐富的擴展，並可以通過 YQL 直接訪問 Yahoo！的數據。在用戶經常使用的功能方面都有著不錯的表現。與 jQuery 靈活的語法相比，YUI 顯得更加中規中矩，在代碼組織、結構和模式方面都更加講究，更體現出工程師的嚴謹。同時 YUI也有著豐富的產品線，擁有測試框架 YUITest、文檔生成框架 YUIDoc、自動構建框架 YUI Build，滿足項目開發各方面的需求。隨著Yahoo!的沒落，YUI 也感覺逐漸步入暮年，但作為相當嚴謹完整的前端框架鼻祖，足以秒殺其他。

21.Mochikit

MochiKit自稱為一個輕量級的js框架。MochiKit 主要受到 Python 和 Python 標準庫提供的很多便利之處的啟發，另外還緩解了瀏覽器版本之間的不一致性。其中的 MochiKit.DOM 尤其方便，能夠以比原始 JavaScript 更友好的方式處理 DOM 對象。

22.Mootools

地址：mootools.net

Mootools可以說是目前最輕量級的前端框架，內核 js 壓縮完之後只有 8k，完整版壓縮之後也不到 100k，遠比其他框架要小很多。Mootools 有自己的面向對象設計的內核 Mootools Core。伴隨著最小的文件大小，框架的功能比其他框架也要弱不少，只有在控制項和特效上有少量支持。MooTools是一個簡潔，模塊化，面向對象的JavaScript框架。它能夠幫助你更快，更簡單地編寫可擴展和兼容性強的JavaScript代碼。Mootools跟prototypejs相類似，語法幾乎一樣。但它提供的功能要比prototypejs多，而且更強大。比如增加了動畫特效、拖放操作等等。

23.moo.fx

moo.fx是一個超級輕量級的javascript特效庫（7k）,能夠與prototype.js或mootools框架一起使用。它非常快、易於使用、跨瀏覽器、符合標準，提供控制和修改任何HTML元素的CSS屬性，包括顏色。它內置檢查器能夠防止用戶通過多次或瘋狂點擊來破壞效果。moo.fx整體採用模塊化設計，所以可以在它的基礎上開發你需要的任何特效。

24.Babylon.js

GitHub:github.com/BabylonJS/Ba

想要構建一個完全運行於現代瀏覽器上，並且能跨瀏覽器運行的視頻遊戲嗎？那就看看 Babylon.js 吧，它是一個 3D 遊戲引擎，基於 WebGL 和 JavaScript。你可以使用其物理、音頻和粒子系統創造出超乎預期的高質量遊戲來。什麼時候使用 Babylon.js?當你正在構建一個視頻遊戲或者一個某種類型的 3D 場景時。

25.Three.js

GitHub: github.com/mrdoob/three

想要構建一個 3D 視覺特效，但是又不需要一個功能完整的遊戲？Three.js 提供了一個輕量級的 3D庫，讓你可以將 3D 效果渲染成一個 HTML5 的 canvas, SVG, 和 WebGL。這是一個詳單簡單的庫，在three.js 陳列站點上可以看到數百個漂亮的示例。什麼時候使用 Three.js?當你需要一個簡單的能輸出為 Canvas 的 3D 視覺效果時。

26.PhantomJS

GitHub:github.com/ariya/phanto

運行全部的瀏覽器來測試你的代碼是要密集消耗內存和 CPU 的。PhantomJS讓你可以運行一個純粹的 WebKit —— Safari 和 之前版本的 Chrome 中的渲染引擎(現在是 Blink)。它能讓你通過一個JavaScript API 來運行測試、截屏、模擬網路以及自動的瀏覽頁面。什麼時候使用 PhantomJS ?當你需要進行更多的測試、操作網頁和模擬網路請求的操作時。

27.CanJS

CanJS是一個JavaScript庫，使開發複雜的應用，簡單快速。簡單易學，小，和張揚你的應用程序的結構，但具有現代特徵的自定義標籤和雙向結合。創建應用程序容易維護。

28.Extjs

Sencha Ext JS是業界最強大的桌面應用程序開發平臺具有無與倫比的跨瀏覽器兼容性，先進的MVC架構，插件免費圖表，和現代的UI小工具。

29.Sammy.js

Sammy是建立在一個插件和適配器系統。只包括你需要的代碼。它&rsquo；也容易提取自己的代碼為可重複使用的插件

30.Sencha Ext JS

官方網址：sencha.com/products/ext

Sencha Ext JS是 Sencha 基於 Ext JS 開發的前端框架，內容極其豐富，控制項、特效等支持非常非常豐富，表格、圖畫、報告、佈局、甚至數據連接，無所不包。只有您想不到，沒有它辦不到。基於 Sass 和 Compass，使得用戶對格式的修改和特效製作更加方便。此外，Sencha 有豐富的產品線，Sencha Desktop Packager 可以讓您的應用擁有桌面應用的效果, Sencha Animator 基於 CSS3 更加方便用戶對特效的製作，不光支持桌面端，移動端更是不在話下。在 Sencha 看來，用 Animator 做遊戲都是輕鬆拿下。Sencha Space 是基於 HTML5，提供製作跨平臺應用的利器。同時 Sencha Ext JS 對主流瀏覽器的支持也非常理想。

31.Foundation

官方網址：foundation.zurb.com/

是 ZURB 旗下的主要面向移動端的開發框架，但是也保持對桌面端的兼容，目前已經更新到 Foundation4 版本。框架主要採用 jQuery 和 Zepto（語法酷似 jQuery，但比 jQuery 更輕量級）作為 JavaScript 基礎，CSS 則基於 Sass、Compass，有著很好的擴展性，並有著豐富的佈局，版式和多種多樣的控制項與特效，非常方便開發者使用。控制項的響應式效果也幫助用戶識別不同瀏覽器效果。

32.Kissy

官方網址：docs.kissyui.com

Kissy是阿里集團自主開發的前端框架，目前在淘寶網、一淘網等阿里系網站上得到不少應用。Kissy 框架模仿 jQuery 編寫了自己的內核 Kissy Core，用於對 DOM 的解析，Ajax 處理等。同時，有著豐富的控制項，並實現了一些動畫效果和特效。同樣，在 Kissy 的控制項中也可以看到 Bootstrap 等國外框架的影子。此外，Kissy abc 項目工具可以幫助用戶實現自動化構建，並有很多擴展組件方便用戶使用。

33.Tangram

官方網址：tangram.baidu.com

Tangram是百度推出的另一個 JavaScript 框架，被廣泛應用於百度系旗下的產品，與 Qwrap 類似，Tangram 也只能算是一個 JavaScript 框架，對 JavaScript 做了不少擴展，但是作為前端開發框架還是顯得比較單薄。基於此，百度公司繼續推出了兩個基於 Tangram 的項目，Magic 和 Baidu Template。Magic 項目基於 Tangram 對控制項和特效都做了擴展，增加了 10 個新的控制項。Baidu Template 則更多是針對移動端開發的擴展，目前對於大多數主流移動設備和操作系統都有支持。

34..todomvc

代碼託管地址:github.com/tastejs/todo

TodoMVC是一款開源的JavaScript框架，它使用各種不同的MV*框架實現一個相同的Todo應用。TodoMVC最大的優點就是幫助開發者挑選出合適的MV*框架，從Backbone,Ember, AngularJS, Spine等一系列框架中決定使用哪個框架。

35.zoom.js

教程：lab.hakim.se/zoom-js/

zoom.js 提供的 JavaScript API 讓網站開發人員能夠給頁面內容添加縮放效果。在頁面上點擊，目標處的內容會放大，再次點擊或者按 ESC 鍵即可恢復原始大小。zoom.js 提供了兩個縮放模式，按目標元素縮放和按坐標縮放。是一款效果很獨特的頁面內容縮放插件。

以上這些，是近年來前端的一些開源框架和插件庫，僅供參考實際項目中，還是要結合自己的項目需求來修改。

關注「編程微刊」公眾號 ，在微信後臺回復「領取資源」，獲取IT資源200G乾貨大全。

推薦閱讀：

相關文章