本文主要选取了目前比较流行的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来规范JS代码,使用Closure Compile来优化压缩JS代码,使用Closure Stylesheets来生成CSS文件,使用YUI Doc来生成API文档。