三款Javascript SPAs框架资料整理和总结

一、框架介绍

RequireJS

资料：http://www.requirejs.cn/

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速

、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

Angularjs

资料：http://www.runoob.com/angularjs/angularjs-tutorial.html

AngularJS是一个开源的JavaScript框架，由Google发明并负责演进和维护。AngularJS基于MVC架构，目标是使得开发和测试更富有效率、更加容易。AngularJS扩展了传统的HTML代码，使得动态内容能够和页面元素进行双向绑定。AngularJS是一个独立的框架，这意味着它不依赖于任何别的JavaScript框架。

Durandaljs

资料：http://durandaljs.com/docs.html

Durandal是一个JS框架用于构建客户端single page application(SPAs).它支持MVC,MVP与MVVM前端构架模式

。使用RequireJS做为其基本约定层，Durandal能提供高效的可维护的SOLID代码标准。

BackboneJs

资料:http://www.css88.com/doc/backbone/

Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于

绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESRful

JSON接口连接到应用程序。

二、比较

1、社区

选择框架的一个重要因素是框架社区的规模和开发者的数量和活跃度。三者相比，AngularJS社区规模最大

、发展更快、社区也最有活力。而且AngularJS在GitHub的跟随者也更多，在StackOverflow的问答也更多。

2、框架的大小

页面加载时间是Web应用成功的关键因素之一。用户需要能快速地访问信息，影响页面加载时间的两个因素

：JavaScript框架的大小和启动它所需的时间。 比较这三个框架的压缩版：AngularJS 1.2版有105KB，

EmberJS 1.9.1版有97KB，BackboneJS 1.1.2版有65KB。但是，AngularJS框架无任何依赖，BackboneJS框架依

赖于Underscore.js库（52KB），EmberJS框架和BackboneJS框架通常需要jQuery库（82KB）来简化操作。因此

，AngularJS框架的大小才是真正最小的。

3、模板

AngularJS框架和EmberJS框架都包含了一个模板引擎。而BackboneJS框架无模板引擎，开发者需要选择一个

第三方模板引擎集成到项目中。当然，对于BackboneJS框架来说，Underscore.js库就包含了模板引擎，可以

用它。

4、灵活性

有很多JavaScript插件可以完成很多专门的工作。这是非常有用的，因为每一种框架都无法做到面面俱到。

所以，对于框架来说，支持插件、支持扩展就很重要了。三者相比，BackboneJS框架是最灵活的框架，因为它

的约定最少，开发者在使用时可以自己做很多决定。EmberJS框架和AngularJS框架在某种程度上来说是灵活的

，但不够灵活。

5、学习曲线

AngularJS框架的开发者可以快速构建Web应用，快速使用双向绑定，基本上无需学习。但是要深入掌握

AngularJS框架，就需要学习一些专业术语，学习曲线也比较陡峭。EmberJS框架的学习曲线就比AngularJS平

滑一些。 BackboneJS框架更容易学习，但是要掌握它还需学习Underscore.js库。

三、结论

没有最好的JavaScript框架，只有最适合自己的JavaScript框架。一般来说，AngularJS框架相对更好一些

，它发展最迅猛，更有活力，有庞大的社区和Google在背后支持。BackboneJS是极简主义的框架，它体积小、

易于学习。 最流行的JavaScript库是jQuery，它提供了一套JavaScript函数，减少了很多开发工作。但是

jQuery只是一个辅助库，真正要在前端MVC模式上有大作为的库，还是要数下面的三个JavaScript库：

AngularJS、BackboneJS和EmberJS。下面我将对这三个JavaScript库做对比。

参考信息：

http://wenku.baidu.com/link?url=Yqdre1IzWiH_9HoU3AL4zS8gnZqx2RwQtTBX-J_65_0h8QzQuwOE2ImJU2BtdjdlWrZYEQwmpZP2e18znyV3fQBMcQSxWOb7Zm4-wZMHylm