本文主要选取了目前比较流行的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的方式
参考资料
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文档。