新的 Javascript 庫層出不窮鳞陨，從而Web 社區(qū)愈發(fā)活躍、多樣洛巢、在多方面快速發(fā)展括袒。詳細去描述每一種主流的 Javascript框架和庫近乎不可能，所以在這篇文章中主要介紹一些對前端發(fā)展最具影響力的前端框架狼渊。接下來讓我們來共同研究一些主流前端框架恨豁、庫和工具柜蜈，并討論它們的適用場景脱货。
1.angular.Js
地址：http://www.runoob.com/angularjs/angularjs-tutorial.html
代碼托管地址:https://github.com/angular/angular.js
AngularJS 誕生于2009年碘菜，由Misko Hevery等人創(chuàng)建，后為Google所收購米苹。是一款優(yōu)秀的前端JS框架糕伐，已經(jīng)被用于Google的多款產(chǎn)品當中。AngularJS有著諸多特性蘸嘶，最為核心的是：MVVM良瞧、模塊化、自動化雙向數(shù)據(jù)綁定训唱、語義化標簽褥蚯、依賴注入等等。
2.Node.Js
地址：http://www.runoob.com/nodejs/nodejs-tutorial.html
如果你是一個前端程序員况增，你不懂得像PHP赞庶、Python或Ruby等動態(tài)編程語言，然后你想創(chuàng)建自己的服務，那么Node.js是一個非常好的選擇歧强。Node.js 是運行在服務端的 JavaScript澜薄，如果你熟悉Javascript，那么你將會很容易的學會Node.js摊册。當然肤京，如果你是后端程序員，想部署一些高性能的服務茅特，那么學習Node.js也是一個非常好的選擇忘分。
3.requirejs
地址：http://www.requirejs.cn/
RequireJS的目標是鼓勵代碼的模塊化，它使用了不同于傳統(tǒng)標簽的腳本加載步驟温治》古樱可以用它來加速戒悠、優(yōu)化代碼熬荆，但其主要目的還是為了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地址绸狐。RequireJS以一個相對于baseUrl的地址來加載所有的代碼卤恳。
4.Vue.js
地址：http://cn.vuejs.org/
Vue.js是用于構(gòu)建交互式的 Web? 界面的庫，它提供了 MVVM 數(shù)據(jù)綁定和一個可組合的組件系統(tǒng)寒矿，具有簡單突琳、靈活的 API，從技術(shù)上講符相，Vue.js 集中在 MVVM 模式上的視圖模型層拆融，并通過雙向數(shù)據(jù)綁定連接視圖和模型。實際的 DOM操作和輸出格式被抽象出來成指令和過濾器啊终。相比其它的MVVM 框架镜豹，Vue.js 更容易上手。
5.React.js
地址：http://reactjs.cn/react/docs/why-react.html
React是一個Facebook 和 Instagram 用來創(chuàng)建用戶界面的 JavaScript 庫蓝牲。很多人認為 React 是 MVC中的V（視圖）趟脂。我們創(chuàng)造 React是為了解決一個問題：構(gòu)建隨著時間數(shù)據(jù)不斷變化的大規(guī)模應用程序。為了達到這個目標例衍，React采用下面兩個主要的思想昔期。
6.backbone.js
地址：http://www.css88.com/doc/backbone/
代碼托管地址:https://github.com/jashkenas/backbone
Backbone.js為復雜WEB應用程序提供模型(models)、集合(collections)佛玄、視圖(views)的結(jié)構(gòu)硼一。其中模型用于綁定鍵值數(shù)據(jù)和自定義事件；集合附有可枚舉函數(shù)的豐富API梦抢； 視圖可以聲明事件處理函數(shù)般贼，并通過RESRful JSON接口連接到應用程序。
7.jQuery
代碼托管地址:https://github.com/jquery/jquery
jQuery是繼Prototype之后又一優(yōu)秀JavaScript框架。它可方便地操作文檔對象具伍、處理事件翅雏、實現(xiàn)動畫效果、使用Ajax與網(wǎng)站交互等人芽。提供API望几，可供開始者編寫插件，且具有詳盡的說明文檔萤厅。兼容CSS3及各種瀏覽器（jQuery2.0及后續(xù)版本不支持IE6/7/8瀏覽器）橄抹。
8.Zepto.js
地址：http://www.css88.com/doc/zeptojs/
Zepto是一個輕量級的針對現(xiàn)代高級瀏覽器的JavaScript庫，它與jquery有著類似的api惕味。? 如果你會用jquery楼誓，那么你也會用zepto。設計的目的是提供jquery的類似的APIs名挥，但并不是100%覆蓋jquery為目的疟羹。zepto設計的目的是有一個5-10k的通用庫、下載并執(zhí)行快禀倔、有一個熟悉通用的API榄融，所以你能把你主要的精力放到應用開發(fā)上。
9.ember.js
官方地址：https://emberjs.com/
代碼托管地址:https://github.com/emberjs/ember.js
Ember.js是一款開源的JavaScriptMVC框架救湖，用來創(chuàng)建Web應用程序愧杯。它免除了樣板文件并提供了一套標準的應用程序架構(gòu)。Ember.js由YehudaKatz創(chuàng)建鞋既，它是由SproutCore 2.0改名進化而來力九。在2013年8月31日發(fā)布Ember.js 1.0版本。
10.Ionic
地址：http://www.ionic.wang/js_doc-index.html
Ionic既是一個CSS框架也是一個Javascript UI庫邑闺。許多組件需要Javascript才能產(chǎn)生神奇的效果跌前，盡管通常組件不需要編碼，通過框架擴展可以很容易地使用检吆，比如我們的AngularIonic擴展舒萎。Ionic遵循視圖控制模式，通俗的理解和Cocoa觸摸框架相似蹭沛。在視圖控制模式中臂寝，我們將界面的不同部分分為子視圖或包含其他視圖的子視圖控制器。然后視圖控制器“驅(qū)動”內(nèi)部視圖來提供交互和UI功能摊灭。一個很好的例子就是標簽欄（TabBar）視圖控制器處理點擊標簽欄在一系列可視化面板間切換咆贬。
11.SeaJS
官方文檔：http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html
SeaJS是一個遵循CMD規(guī)范的JavaScript模塊加載框架，可以實現(xiàn)JavaScript的模塊化開發(fā)及加載機制帚呼。Sea.js 追求簡單掏缎、自然的代碼書寫和組織方式皱蹦，具有以下核心特性：簡單友好的模塊定義規(guī)范：Sea.js 遵循 CMD 規(guī)范，可以像 Node.js 一般書寫模塊代碼眷蜈。自然直觀的代碼組織方式：依賴的自動加載沪哺、配置的簡潔清晰，可以讓我們更多地享受編碼的樂趣酌儒。Sea.js 還提供常用插件辜妓，非常有助于開發(fā)調(diào)試和性能優(yōu)化，并具有豐富的可擴展接口忌怎。
12.CommonJS
中文網(wǎng)：http://www.php.cn/js-tutorial-360130.html
Node應用由模塊組成籍滴，采用CommonJS模塊規(guī)范。根據(jù)這個規(guī)范榴啸，每個文件就是一個模塊孽惰，有自己的作用域。在一個文件里面定義的變量鸥印、函數(shù)勋功、類，都是私有的辅甥，對其他文件不可見酝润。
13.Knockout.js
官方地址：http://knockoutjs.com/
Knockout是一個輕量級的UI類庫燎竖，通過應用MVVM模式使JavaScript前端UI簡單化璃弄。Knockout是一個以數(shù)據(jù)模型為基礎(chǔ)的能夠幫助你創(chuàng)建富文本，響應顯示和編輯用戶界面的JavaScript類庫构回。任何時候如果你的UI需要自動更新夏块，比如：更新依賴于用戶的行為或者外部數(shù)據(jù)源的改變，KO能夠很簡單的幫你實現(xiàn)并且很容易維護纤掸。
14.Spine.js
代碼托管地址：https://github.com/spine
Spine是一個構(gòu)建JavaScriptWeb應用的輕量級框架脐供。Spine給你提供MVC框架，讓你放心做自己事,讓你集中精力在有意思的事情上借跪，從而構(gòu)建出令人驚嘆的Web應用政己。Spine用CoffeeScript寫成，但開發(fā)應用時不必要用CoffeeScript掏愁。你可以使用CoffeeScript或是JavaScript歇由，選擇你最熟悉的就好。
15.Meteor
代碼托管地址:https://github.com/meteor/meteor
Meteor是一種新型JavaScript框架果港，用于WebApp應用程序開發(fā)沦泌。Meteor在2012年4月首次發(fā)布。Meteor的基礎(chǔ)構(gòu)架是Node.JS+MongoDB辛掠，官方總結(jié)的Meteor的9個優(yōu)勢是：純粹的JavaScript谢谦、實時頁面更新释牺、強大的數(shù)據(jù)同步、延遲補償回挽、代碼熱推送没咙、敏感代碼運行于受限環(huán)境中、完全獨立應用包千劈、互操作性強镜撩、智能的包。Meteor團隊表示队塘，包括Facebook袁梗、Google及Twitter在內(nèi)等多家互聯(lián)網(wǎng)巨頭在Web應用方面都采用了與Meteor一樣的技術(shù)，新一代實時框架憔古，web網(wǎng)站的未來遮怜。
16.Dojo
官方地址：http://dojotoolkit.org/api/
Dojo是目前最為強大的j s框架，它在自己的Wiki上給自己下了一個定義鸿市，dojo是一個用JavaScript編寫的開源的DHTML工具箱锯梁。dojo很想做一個“大一統(tǒng)”的 工具箱，不僅僅是瀏覽器層面的焰情，野心還是很大的陌凳。目前唯一能與 Sencha Ext JS 一較高下的框架就只有 Dojo(http://dojotoolkit.org)了。抱著 IBM, VMWare 等眾多大腿内舟，Dojo 的一顰一笑都額外惹人注目合敦。Dojo 項目的產(chǎn)品線和功能也特別豐富。首先验游，Dojo 有自己的 DOM 解析器 Nano充岛，是 DOM 解析和處理的內(nèi)核。此外耕蝉，Dojo 的 Web 框架有非常豐富的布局崔梗、版式、控件以及特效垒在，對多語言以及圖表的擴展支持都非常好蒜魄，并支持對地圖的操作。
17.Prototype
是一個非常優(yōu)雅的JS庫场躯，定義了JS的面向?qū)ο?/a>擴展谈为，DOM操作API，事件等等推盛，以prototype為核心峦阁，形成了一個外圍的各種各樣 的JS擴展庫，是相當有前途的JS底層框架耘成，值得推薦榔昔，感覺也是現(xiàn)實中應用最廣的庫類（RoR集成的AJAX JS庫）驹闰，之上還有 Scriptaculous 實現(xiàn)一些JS組件功能和效果。作為 Rails 默認的 JavaScript 框架撒会，相信對廣大開發(fā)人員也很有借鑒意義的嘹朗。
18.Scriptaculous
Scriptaculous是基于prototype.js框架的JS效果。包含了6個js文件诵肛，不同的文件對應不同的js效果屹培，所以說，如果底層用 prototype的話怔檩，做js效果用Scriptaculous那是再合適不過的了褪秀，連大名鼎鼎的digg都在用他，可見不一般
19.yui-ext
基于Yahoo UI的擴展包yui-ext是具有CS風格的Web用戶界面組件 能實現(xiàn)復雜的Layout布局薛训，界面效果可以和backbase媲美媒吗，而且使用純javascript代碼開發(fā)。真正的可編輯的表格Edit Grid乙埃，支持XML和Json數(shù)據(jù)類型闸英，直接可以遷入grid。許多組件實現(xiàn)了對數(shù)據(jù)源的支持
20.YUI
YUI作為開源前端框架的鼻祖介袜，在框架上的功力非常之深甫何。有著自己的解析 DOM 的核心框架，并且在特效遇伞、動畫辙喂、圖表等方面都有豐富的擴展，并可以通過 YQL 直接訪問 Yahoo赃额！的數(shù)據(jù)加派。在用戶經(jīng)常使用的功能方面都有著不錯的表現(xiàn)。與 jQuery 靈活的語法相比跳芳，YUI 顯得更加中規(guī)中矩，在代碼組織竹勉、結(jié)構(gòu)和模式方面都更加講究飞盆，更體現(xiàn)出工程師的嚴謹。同時 YUI也有著豐富的產(chǎn)品線次乓，擁有測試框架 YUITest吓歇、文檔生成框架 YUIDoc、自動構(gòu)建框架 YUI Build票腰，滿足項目開發(fā)各方面的需求城看。隨著Yahoo!的沒落，YUI 也感覺逐漸步入暮年杏慰，但作為相當嚴謹完整的前端框架鼻祖测柠，足以秒殺其他炼鞠。
21.Mochikit
MochiKit自稱為一個輕量級的js框架。MochiKit 主要受到 Python 和 Python 標準庫提供的很多便利之處的啟發(fā)轰胁，另外還緩解了瀏覽器版本之間的不一致性谒主。其中的 MochiKit.DOM 尤其方便，能夠以比原始 JavaScript 更友好的方式處理 DOM 對象赃阀。
22.Mootools
Mootools可以說是目前最輕量級的前端框架霎肯，內(nèi)核 js 壓縮完之后只有 8k，完整版壓縮之后也不到 100k榛斯，遠比其他框架要小很多观游。Mootools 有自己的面向?qū)ο笤O計的內(nèi)核 Mootools Core。伴隨著最小的文件大小驮俗，框架的功能比其他框架也要弱不少备典，只有在控件和特效上有少量支持。MooTools是一個簡潔意述，模塊化提佣，面向?qū)ο?/a>的JavaScript框架。它能夠幫助你更快荤崇，更簡單地編寫可擴展和兼容性強的JavaScript代碼拌屏。Mootools跟prototypejs相類似，語法幾乎一樣术荤。但它提供的功能要比prototypejs多倚喂，而且更強大。比如增加了動畫特效瓣戚、拖放操作等等端圈。
23.moo.fx
moo.fx是一個超級輕量級的javascript特效庫（7k）,能夠與prototype.js或mootools框架一起使用。它非匙涌猓快舱权、易于使用、跨瀏覽器仑嗅、符合標準宴倍，提供控制和修改任何HTML元素的CSS屬性，包括顏色仓技。它內(nèi)置檢查器能夠防止用戶通過多次或瘋狂點擊來破壞效果鸵贬。moo.fx整體采用模塊化設計，所以可以在它的基礎(chǔ)上開發(fā)你需要的任何特效脖捻。
24.Babylon.js
GitHub:https://github.com/BabylonJS/Babylon.js
想要構(gòu)建一個完全運行于現(xiàn)代瀏覽器上阔逼，并且能跨瀏覽器運行的視頻游戲嗎？那就看看 Babylon.js 吧地沮，它是一個 3D 游戲引擎嗜浮，基于 WebGL 和 JavaScript羡亩。你可以使用其物理、音頻和粒子系統(tǒng)創(chuàng)造出超乎預期的高質(zhì)量游戲來周伦。什么時候使用 Babylon.js?當你正在構(gòu)建一個視頻游戲或者一個某種類型的 3D 場景時夕春。
25.Three.js
GitHub:? ? https://github.com/mrdoob/three.js/
想要構(gòu)建一個 3D 視覺特效，但是又不需要一個功能完整的游戲专挪？Three.js 提供了一個輕量級的 3D庫及志，讓你可以將 3D 效果渲染成一個? HTML5 的 canvas, SVG, 和 WebGL。這是一個詳單簡單的庫寨腔，在three.js 陳列站點上可以看到數(shù)百個漂亮的示例速侈。什么時候使用 Three.js?當你需要一個簡單的能輸出為 Canvas 的 3D 視覺效果時。
26.PhantomJS
GitHub:https://github.com/ariya/phantomjs
運行全部的瀏覽器來測試你的代碼是要密集消耗內(nèi)存和 CPU 的迫卢。PhantomJS讓你可以運行一個純粹的 WebKit —— Safari 和 之前版本的 Chrome 中的渲染引擎(現(xiàn)在是 Blink)倚搬。它能讓你通過一個JavaScript API 來運行測試、截屏乾蛤、模擬網(wǎng)絡以及自動的瀏覽頁面每界。什么時候使用 PhantomJS ?當你需要進行更多的測試、操作網(wǎng)頁和模擬網(wǎng)絡請求的操作時家卖。
27.CanJS
CanJS是一個JavaScript庫眨层，使開發(fā)復雜的應用，簡單快速上荡。簡單易學趴樱，小，和張揚你的應用程序的結(jié)構(gòu)酪捡，但具有現(xiàn)代特征的自定義標簽和雙向結(jié)合叁征。創(chuàng)建應用程序容易維護。
28.Extjs
Sencha Ext JS是業(yè)界最強大的桌面應用程序開發(fā)平臺具有無與倫比的跨瀏覽器兼容性逛薇，先進的MVC架構(gòu)捺疼，插件免費圖表，和現(xiàn)代的UI小工具金刁。
29.Sammy.js
Sammy是建立在一個插件和適配器系統(tǒng)帅涂。只包括你需要的代碼。它&rsquo尤蛮；也容易提取自己的代碼為可重復使用的插件
30.Sencha Ext JS
官方網(wǎng)址：http://www.sencha.com/products/extjs
Sencha Ext JS是 Sencha 基于 Ext JS 開發(fā)的前端框架，內(nèi)容極其豐富斯议，控件产捞、特效等支持非常非常豐富，表格哼御、圖畫坯临、報告焊唬、布局、甚至數(shù)據(jù)連接看靠，無所不包赶促。只有您想不到，沒有它辦不到挟炬∨副酰基于 Sass 和 Compass，使得用戶對格式的修改和特效制作更加方便谤祖。此外婿滓，Sencha 有豐富的產(chǎn)品線，Sencha Desktop Packager 可以讓您的應用擁有桌面應用的效果, Sencha Animator 基于 CSS3 更加方便用戶對特效的制作粥喜，不光支持桌面端，移動端更是不在話下。在 Sencha 看來累榜，用 Animator 做游戲都是輕松拿下把夸。Sencha Space 是基于 HTML5，提供制作跨平臺應用的利器锋华。同時 Sencha Ext JS 對主流瀏覽器的支持也非常理想嗡官。
31.Foundation
官方網(wǎng)址：http://foundation.zurb.com/
是 ZURB 旗下的主要面向移動端的開發(fā)框架，但是也保持對桌面端的兼容供置，目前已經(jīng)更新到 Foundation4 版本谨湘。框架主要采用 jQuery 和 Zepto（語法酷似 jQuery芥丧，但比 jQuery 更輕量級）作為 JavaScript 基礎(chǔ)紧阔，CSS 則基于 Sass、Compass续担，有著很好的擴展性擅耽，并有著豐富的布局，版式和多種多樣的控件與特效物遇，非常方便開發(fā)者使用乖仇。控件的響應式效果也幫助用戶識別不同瀏覽器效果询兴。
32.Kissy
官方網(wǎng)址：http://docs.kissyui.com
Kissy是阿里集團自主開發(fā)的前端框架乃沙，目前在淘寶網(wǎng)、一淘網(wǎng)等阿里系網(wǎng)站上得到不少應用诗舰。Kissy 框架模仿 jQuery 編寫了自己的內(nèi)核 Kissy Core警儒，用于對 DOM 的解析，Ajax 處理等。同時蜀铲，有著豐富的控件边琉，并實現(xiàn)了一些動畫效果和特效。同樣记劝，在 Kissy 的控件中也可以看到 Bootstrap 等國外框架的影子变姨。此外，Kissy abc 項目工具可以幫助用戶實現(xiàn)自動化構(gòu)建厌丑，并有很多擴展組件方便用戶使用定欧。
33.Tangram
官方網(wǎng)址：http://tangram.baidu.com
Tangram是百度推出的另一個 JavaScript 框架，被廣泛應用于百度系旗下的產(chǎn)品蹄衷，與 Qwrap 類似忧额，Tangram 也只能算是一個 JavaScript 框架，對 JavaScript 做了不少擴展愧口，但是作為前端開發(fā)框架還是顯得比較單薄睦番。基于此耍属，百度公司繼續(xù)推出了兩個基于 Tangram 的項目托嚣，Magic 和 Baidu Template。Magic 項目基于 Tangram 對控件和特效都做了擴展厚骗，增加了 10 個新的控件示启。Baidu Template 則更多是針對移動端開發(fā)的擴展，目前對于大多數(shù)主流移動設備和操作系統(tǒng)都有支持领舰。
34..todomvc
代碼托管地址:https://github.com/tastejs/todomvc
TodoMVC是一款開源的JavaScript框架夫嗓，它使用各種不同的MV*框架實現(xiàn)一個相同的Todo應用。TodoMVC最大的優(yōu)點就是幫助開發(fā)者挑選出合適的MV*框架冲秽，從Backbone,Ember, AngularJS, Spine等一系列框架中決定使用哪個框架舍咖。
35.zoom.js
教程：http://lab.hakim.se/zoom-js/
zoom.js 提供的 JavaScript API 讓網(wǎng)站開發(fā)人員能夠給頁面內(nèi)容添加縮放效果。在頁面上點擊锉桑，目標處的內(nèi)容會放大排霉，再次點擊或者按 ESC 鍵即可恢復原始大小。zoom.js 提供了兩個縮放模式民轴，按目標元素縮放和按坐標縮放攻柠。是一款效果很獨特的頁面內(nèi)容縮放插件。
以上這些后裸，是近年來前端的一些開源框架和插件庫瑰钮，僅供參考實際項目中，還是要結(jié)合自己的項目需求來修改微驶。
原文作者：祈澈姑娘
技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子飞涂，愛編程，愛運營祈搜，愛折騰较店。
堅持總結(jié)工作中遇到的技術(shù)問題，堅持記錄工作中所所思所見容燕，歡迎大家一起探討交流梁呈。
文末福利：關(guān)注「編程微刊」公眾號 ，在微信后臺回復「領(lǐng)取資源」蘸秘，獲取IT資源200G干貨大全官卡。公眾號回復“1”，拉你進程序員技術(shù)討論群
