主流JavaScript框架（Dojo、Google Closure、jQuery、Prototype、Mootools和YUI）的分析和对比

本文主要选取了目前比较流行的JavaScript框架Dojo、Google Closure、jQuery、Prototype、Mootools和YUI进行对比，主要是根据网上的资料整理而成，希望可以供大家参考，如有错误欢迎指出：）

主流框架对比

Dojo（重量级框架）

Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。

优点：

1. 功能强大，组件丰富（包括图表支持）
2. 面向对象的设计，有统一的命名空间和包管理机制，适用于企业级或是复杂的大型Web应用开发

缺点：

1. 复杂，学习曲线陡
2. html中也需要涉及dojo属性，将来换框架的成本高，例如：

<button dojoType="dijit.form.Button" id="helloButton">

3. 性能问题，dojo加载采用了同步机制，会暂时锁定浏览器

Google Closure（重量级框架）

Google Closure Tools是Google内部使用的JavaScript开发工具，主要包括Closure Compile、Closure Inspector、Closure Linter、Closure Stylesheets、Closure Library和Closure Templates，这些工具都可以独立使用。

Closure Compile

Closure Compile是一个独立的JavaScript编译器，主要用于对JavaScript进行压缩，但它与其他压缩器如JSMin、YUI Compressor不同的是，它不仅仅是去除注释和空白，还可以在保证代码正确性的情况下进一步地改写成更省空间的做法，例如：

a = new Object => a = {}
a = new Array => a = []
if (a) b() => a && b()
return 2 * 3; => return 6;

经过测试，非Closure Library编写的JavaScript代码经过Closure Compile编译后可用。

Closure Inspector

Closure Inspector是应用于火狐浏览器的插件，可以与Firebug协同工作，对压缩后的代码进行调试，提供了源码匹配、改进的栈跟踪、单元测试集成功能。

Closure Templates

Closure Templates工具提供了一个在JavaScript中做模板的机制及函数库，可以把HTML布局的部分写成一个模版，接着再利用Closure提供的工具把这个模板编译成JavaScript代码，这样可以省去很多处理页面的工作。Closure Templates既可以生成JavaScript，又可以实现Java，所以可以在服务器和客户端使用相同的模板。

Closure Linter

Closure Linter是针对Google推出的JavaScript编码规范 Google JavaScript Style对JavaScript编码风格进行校验的工具，能很大程度上提升代码的可读性。

Closure Stylesheets

Closure Stylesheets是一个Java程序，它向CSS中添加了变量、函数、条件语句以及混合类型，使得我们更易于处理大型的CSS文件。开发者可以用它来生成web应用程序或者网站所使用的真正的CSS文件。详见 Google Closure Stylesheets让我们更易于使用CSS

Closure Library

Closure Library是一个面向对象，模块化，跨浏览器的JavaScript库，同时提供了大量的UI组件以及一些底层的应用如DOM操作、服务器交互、动画、数据结构、单元测试、富文本编辑等。

优点：
1. 功能强大，组件丰富，文档齐全，适用于对性能要求高的Web应用
2. 面向对象，在模块化、程序结构组织、逻辑封装等方面有优势
3. 使用Closure Compile能大程度的进行压缩和优化
缺点
1. 与Dojo复杂程度相当，框架庞大，学习曲线陡
2. 代码中存在一些漏洞，详见 Google Closure: 糟糕的JavaScript
3. 相比jQuery，维护的人员要少

Closure Lite

Closure Lite是利用Closure Compile对Closure Library的核心进行编译后生成的一个单独js文件，只有33k，引用起来很方便。但是它并没有解决Closure Library中所提到的缺点。

参考资料

1. Google Closure and jQuery, Side by Side
2. Getting Closure: Don’t just use it, don’t just abuse it
3. closure-library 第一章 Closure介绍

jQuery（轻量级框架）

Jquery是轻量级的JavaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
优点
1. 简洁易用，文档齐全
2. 有大量成熟的插件可供使用，扩展性强
3. 开发社区最大，维护的人员最多
缺点
1. 对面向对象没有很好的支持
2. 不能向后兼容，每一个新版本不能兼容早期的版本
3. 很多功能需要依赖于插件，然而插件太多，良莠不齐，不知道如何选择，且插件之间有可能会出现冲突

Prototype

Prototype是最早的JavaScript框架之一，目前已经很成熟了。它的强大之处主要在于它对DOM元素的扩展和处理跨浏览器事件，同时它对面向对象和简化AJAX的支持也很好。
优点
1. 对DOM和底层类的扩展使得在开发的时候增加了很多遍历
2. 有很多实用的函数
缺点
1. 由于扩展了底层类和DOM中的元素，可能存在一些潜在的冲突
2. 易用性不如jQuery

Mootools（轻量级框架）

Mootools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等。
优点
1. 功能强大，支持面向对象
2. 模块化，各模块代码非常独立，可以选择导入哪些模块
缺点
1. 对DOM和Selector的操作不如jQuery强大
2. 由于API设计上的不足，与Prototype类似，存在一些当下的和潜在的冲突，如修改了底层类以及其扩展DOM的方式

参考资料

1.  jQuery与MooTools库的一些比对

YUI（重量级框架）

YUI由YAHOO官方团队开发，旨在构建一个富交互的Web应用程序函数库。它的全称是Yahoo UI，顾名思义，它提供了一套很强大的界面库，它能实现复杂的布局和很炫的界面效果。它由雅虎公司发布，与Google Closure类似，同时还提供了配套的压缩工具（YUI Compressor），文档生成工具（YUI Doc），单元测试工具（YUI Test）甚至开放了PHPLOADER（YUI PHP Loader ）。
优点

1. 面向对象，功能强大
2. 提供了丰富的UI库
3. API标准化、规范的类结构、命名空间等，易于维护
缺点
1. 速度相对jQuery慢
2. 易用性不如jQuery

各框架具体参数对比

提供一个wiki上的参数对比： Comparison of JavaScript frameworks

各框架对于移动平台的支持

以上框架中提供了移动平台的支持或插件的有Dojo、jQuery、Mootools和YUI。
Dojo提供了 Dojo Mobile，jQuery提供了 jQuery Mobile，Mootools提供了 Moobile，YUI提供了 Bottle。

总结

以上各框架中，jQuery、Mootools属于轻量级框架，Prototype属于中型框架，而Dojo、Google Closure、YUI则属于重量级框架。重量级框架适合大型的web应用，前期开发成本高，但后期维护成本低。轻量级框架适合开发中小型应用。

重量级框架中，Dojo由于修改了html，后期如果更换框架成本会很高，不建议使用；Google Closure的Compile、Stylesheets、Linter虽然很强大，但是Library相比YUI还是稍逊一筹，因此建议使用YUI。

轻量级框架中，jQuery上手快，易用性强，但是不支持面向对象，且更多功能需要依赖插件来实现，适合快速开发；Mootools支持面向对象，而且模块化程度高，适合长期维护。

因此，可以结合项目的需求以及各JavaScript框架的特点来选择，不管使用何种框架，都可以附加使用一些工具，如使用Closure Linter（或者 JSHint）来规范JS代码，使用Closure Compile来优化压缩JS代码，使用Closure Stylesheets（或者 Less.css）来生成CSS文件，使用YUI Doc来生成API文档。

如果大家觉得对自己有帮助的话，还希望能帮顶一下，谢谢：）

个人博客： http://blog.csdn.net/zhaoxy2850

本文地址： http://blog.csdn.net/zhaoxy2850/article/details/10276915

转载请注明出处，谢谢！