进阶攻略|最全的前端开源JS框架和库
新的 Javascript 库层出不穷，从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript框架和库近乎不可能，因此在这篇文章中主要介绍一些对前端发展最具影响力的前端框架。接下来让咱们来共同研究一些主流前端框架、库和工具，并讨论它们的适用场景。javascript
1.angular.Jsphp
地址：http://www.runoob.com/angularjs/angularjs-tutorial.htmlcss
代码托管地址:https://github.com/angular/angular.jshtml
AngularJS 诞生于2009年，由Misko Hevery等人建立，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。前端
2.Node.Jsvue
地址：http://www.runoob.com/nodejs/nodejs-tutorial.htmljava
若是你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，而后你想建立本身的服务，那么Node.js是一个很是好的选择。Node.js 是运行在服务端的 JavaScript，若是你熟悉Javascript，那么你将会很容易的学会Node.js。固然，若是你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个很是好的选择。node
3.requirejsreact
地址：http://www.requirejs.cn/jquery
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
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能够说是目前最轻量级的前端框架，内核 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
Kissy是阿里集团自主开发的前端框架，目前在淘宝网、一淘网等阿里系网站上获得很多应用。Kissy 框架模仿 jQuery 编写了本身的内核 Kissy Core，用于对 DOM 的解析，Ajax 处理等。同时，有着丰富的控件，并实现了一些动画效果和特效。一样，在 Kissy 的控件中也能够看到 Bootstrap 等国外框架的影子。此外，Kissy abc 项目工具能够帮助用户实现自动化构建，并有不少扩展组件方便用户使用。
33.Tangram
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”，拉你进程序员技术讨论群