進階攻略|最全的前端開源JS框架和庫

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

網絡配圖

1.angular.Js

地址：http://www.runoob.com/angularjs/angularjs-tutorial.html

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

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

2.Node.Js

地址：http://www.runoob.com/nodejs/nodejs-tutorial.html

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

3.requirejs

地址：http://www.requirejs.cn/

RequireJS的目標是鼓勵代碼的模塊化，它使用了不一樣於傳統標籤的腳本加載步驟。能夠用它來加速、優化代碼，但其主要目的仍是爲了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地址。RequireJS以一個相對於baseUrl的地址來加載全部的代碼。

4.Vue.js

地址：http://cn.vuejs.org/

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

5.React.js

地址：http://reactjs.cn/react/docs/why-react.html

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

6.backbone.js

地址：http://www.css88.com/doc/backbone/

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

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

7.jQuery

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

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

8.Zepto.js

地址：http://www.css88.com/doc/zeptojs/

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

9.ember.js

官方地址：https://emberjs.com/

代碼託管地址:https://github.com/emberjs/ember.js

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

10.Ionic

地址：http://www.ionic.wang/js_doc-index.html

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

11.SeaJS

官方文檔：http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html

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

12.CommonJS

中文網：http://www.php.cn/js-tutorial-360130.html

Node應用由模塊組成，採用CommonJS模塊規範。根據這個規範，每一個文件就是一個模塊，有本身的做用域。在一個文件裏面定義的變量、函數、類，都是私有的，對其餘文件不可見。

13.Knockout.js

官方地址：http://knockoutjs.com/

Knockout是一個輕量級的UI類庫，經過應用MVVM模式使JavaScript前端UI簡單化。Knockout是一個以數據模型爲基礎的可以幫助你建立富文本，響應顯示和編輯用戶界面的JavaScript類庫。任什麼時候候若是你的UI須要自動更新，好比：更新依賴於用戶的行爲或者外部數據源的改變，KO可以很簡單的幫你實現而且很容易維護。

14.Spine.js

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

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

15.Meteor

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

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

16.Dojo

官方地址：http://dojotoolkit.org/api/

Dojo是目前最爲強大的j s框架，它在本身的Wiki上給本身下了一個定義，dojo是一個用JavaScript編寫的開源的DHTML工具箱。dojo很想作一個「大一統」的 工具箱，不只僅是瀏覽器層面的，野心仍是很大的。目前惟一能與 Sencha Ext JS 一較高下的框架就只有 Dojo(http://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

地址：http://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

地址：http://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:https://github.com/BabylonJS/Babylon.js

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

25.Three.js

GitHub:    https://github.com/mrdoob/three.js/

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

26.PhantomJS

GitHub:https://github.com/ariya/phantomjs

運行所有的瀏覽器來測試你的代碼是要密集消耗內存和 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

官方網址：http://www.sencha.com/products/extjs

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

官方網址：http://foundation.zurb.com/

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

32.Kissy

官方網址：http://docs.kissyui.com

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

33.Tangram

官方網址：http://tangram.baidu.com

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

34..todomvc

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

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

35.zoom.js

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

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

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

原文做者：祈澈姑娘

技術博客：https://www.jianshu.com/u/05f416aefbe1

90後前端妹子，愛編程，愛運營，愛折騰。

堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，歡迎你們一塊兒探討交流。

文末福利：關注「編程微刊」公衆號 ，在微信後臺回覆「領取資源」，獲取IT資源200G乾貨大全。公衆號回覆「1」，拉你進程序員技術討論羣