进阶攻略|最全的前端开源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”，拉你进程序员技术讨论群