常用js框架比较


常用JS框架比较 鲁超伍|Adam http://adamlu.com/ 我的博客 http://revieweb20.com/ 评论全球最酷Web2.0网站 http://t.sina.com.cn/adamlu 我的微博 自我介绍  2005年开始接触互联网开发,曾就职于千 橡互动校内网、雅虎中国、淘宝网,专注 于前端开发,见证了前端行业在中国的发 展,努力成为一个专业的前端工程师。  现负责新浪邮箱的RIA开发,喜欢创新互联 网应用服务,对互联网前端开发最新技术 如HTML5/CSS3和移动互联网开发感兴趣。 什么是框架?  中文解释:“框架”指一套包含工具、函 数库、约定,以及尝试从常用任务中抽象 出可以复用的通用模块,目标是使开发人 员把重点放在任务项目所特有的方面,避 免重复开发。  英文解释:Framework/Library/Toolkit 为什么需要框架?  JavaScript 框架或库是一组能轻松生成跨浏览器 兼容的 JavaScript 代码的工具和函数。每一个库 都在众多流行的 Web 浏览器的现代版本上进行了 可靠的测试,因此,您可以放心地使用这些框架, 您的基于 JavaScript 的 RIA 将会在不同浏览器和 平台上以类似的方式工作。  这些框架极大地简化了开发进程,并带来一致, 可靠,以及高度交互性的用户界面。 常用的Javascript框架  JQuery  YUI  Prototype  Mootools  ExtJS  MochiKit  Dojo  Kissy  Como JS  JET  JavaScriptMVC  Qooxdoo  SproutCore  Sencha Touch  IUI 我对框架的分类  Javascript库  解决浏览器兼容性  快速开发Web应用  丰富UI效果  跨浏览器RIA框架  类桌面应用  移动网络应用APP框架  为移动设备而设计  基于HTML5和CSS3 JQuery  jQuery由John Resig创建,其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 它是轻量级的js库(压缩后只有21k) ,它兼容 CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery是一个快速的, 简洁的javaScript库,使用户能更方便地处理 HTML documents、events、实现动画效果,并 且方便地为网站提供AJAX交互。jQuery还有一个 比较大的优势是,它的文档说明很全,而且各种 应用也说得很详细,同时还有许多成熟的插件可 供选择。 示例: http://www.box.net/ YUI  Yahoo! User Interface (YUI) Library是一组采用 DOM scripting,Dhtml和Ajax等技术开发的Web UI控件和工具。中文说过来就是“Yahoo用户界 面库”。  Yui 工具包利用DOM脚本来简化浏览器内的开发 (in-browser devolvement),使用DHTML和 AJAX的特性开发所有的Web程序。  YUI控件库为你页面提供一组高交互性性的可视 化元素。这些元素完全在客户端创建维护,不需 要请求服务器进行页面刷新。 示例: http://www.yahoo.com/ Prototype  prototype是一个易于使用、面向对象的 JavaScript框架。它封装并简化和扩展一些 在Web开发过程中常用到JavaScript方法与 Ajax交互处理过程。 示例: http://last.fm/ Mootools  MooTools 是一个简洁,模块化,面向对象 的JavaScript框架。它能够帮助你更快,更 简单地编写可扩展和兼容性强的JavaScript 代码。 Mootools从Prototype.js中汲取了许 多有益的设计理念,语法也和其极其类似。 但它提供的功能要比Prototype.js多,整体 设计也比Prototype.js要相对完善,功能更 强大,比如增加了动画特效、拖放操作等 等。 示例: http://vimeo.com/ ExtJS  ExtJS是一个跨浏览器,用于开发RIA (Rich Internet Application)应用的 JavaScript框架。提供:高性,可定制的 Web UI控件库。良好的设计、丰富的文档 和可扩展的组件模型。 示例: http://dev.sencha.com/deploy/dev/examples/ Mochikit  MochiKit 是一种有用的高端 JavaScript 库。 MochiKit 主要受到 Python 和 Python 标准 库提供的很多便利之处的启发,另外还缓 解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便,能够以比原始 JavaScript 更友好的方式处理 DOM 对象。 MochiKit.DOM 大部分都是针对 XHTML 文 档定制的,如果与 MochiKit 和 Ajax 结合在 一起,使用 XHTML 包装的微格式尤其方便。 示例:http://mochikit.com/demos.html Dojo  Dojo 是一个强大的面向对象JavaScript框 架。主要由三大模块组成:Core、Dijit、 DojoX。Core提供 Ajax,events, packaging,CSS-based querying, animations,JSON等相关操作API。Dijit是 一个可更换皮肤,基于模板的WEB UI控件 库。DojoX包括一些创新/新颖的代码和控 件:DateGrid,charts,离线应用,跨浏览 器矢量绘图等。 示例: http://demos.dojotoolkit.org/demos/ Kissy  KISSY 是一个小巧灵活、简洁实用的 UI 类 库,它希望使用者能愉悦编码、快乐开发。  Keep It Simple & Stupid, Short & Sweet, Slim & Sexy... 示例:http://www.taobao.com/ Como Js  Como JS是一款代码简易而功能强大的 Javascript框架,也是作者在工作过程中的 经验总结,实用性强;通过它,能够简化 Javascript代码开发,增强代码重用性,能 够异步按需加载js和css文件,增强page的 加载速度 示例:http://www.comojs.com/SlickSpeed/ Jet  JET 适用于 Web Page 和 Web App 的开发  微内核设计  内核可完全分离出来,用于构建自己的框架  自由拼装各个模块  命名空间、原生对象零污染  无缝集成各种js框架  与jQuery, YUI, Mootools, Prototype.js 等框架无缝集成  与多种局部框架无缝集成,如:Mini, Sizzle, cssQuery, xpath, JSON 等等  多版本共存  如采用的JET版本过旧,旧有的Javascript代码不能与新版本JET兼容,则可以采 用多版本共存的方式保持程序的可延续性  分层设计  Javascript核心层,与Javascript解释引擎无关的封装和扩展  浏览器端Javascript层,对浏览器中的Javascript引擎部分的封装和扩展 示例:http://web2.qq.com/ JavascriptMVC  JavaScriptMVC是一个功能强大的 JavaScript framework. 也是一个很棒的 JavaScript测试框架,它同样能提高开发的 速度。JavaScriptMVC应用了模型-视图-控 制器架构模式,把业务逻辑和表示分离, 使得代码更加模块化。 示例:http://docs.javascriptmvc.com/demos/index.html Qooxdoo  qooxdoo是一个 Ajax 应用框架使用基于面向对象 JavaScript,它让你可以用JavaScript来开发类似 于VB/Delphi风格的具有Ajax功能的web2.0应用程 序。qooxdoo具有客户端浏览器检测功能,具有 浏览器抽象层,可以无差别的创建跨浏览器的 Web应用程序,它提供方便的调试接口,具有事 件管理、聚焦管理、定时器、边框和对象属性等 特征。它提供一组窗体组件并扩展了布局,它还 提供跨平台的png图形透明支持功能。此外, qooxdoo提供一个原子组件,你可以在其基础上 开发你自己的组件。 示例:http://demo.qooxdoo.org/current/demobrowser/ SproutCore  SproutCore苹果对SproutCore的解释为“开源, 平台无关,类Cocoa的JavaScript框架,用于创建 具有桌面应用程序外观和操作感的Web应用程 序。”  现在有不少Web框架开始使用HTML5中的一些新 特性(如离线存储、HTML5 ApplicationCache等) 来构建富本地(rich native-class)应用,而 SproutCore则是其中之一。 示例:http://www.sproutcore.com/demos/ Sencha Touch  Sencha Touch可以让你的Web App看起来 像Native App。美丽的用户界面组件和丰富 的数据管理,全部基于最新的HTML5和 CSS3的 WEB标准,全面兼容Android和 Apple iOS设备。 示例:http://www.sencha.com/products/touch/demos.php Sencha Touch IUI  IUI 包含一套 JavaScript 库,CSS 式样表 及图片,是一个轻量级 iPhone UI 库,包含 iPhone 风格导航菜单,设备方向,iPhone 风格切换等功能,可以为你的 Web 程序带 来 iPhone 般的体验。 示例:http://adamlu.com/Speech/iui/ IUI Javascript框架使用比例 Javascript框架使用比例 http://bbs.9ria.com/thread-63683-1-1.html 怎么选择一款Javascript框架  你的项目需求  框架支持A级浏览器吗  是否利于团队协作开发  框架是否成熟  文档是否健全  社区支持是否充足  框架的扩展性如何  你是否喜欢API的风格  代码执行速度性能如何  代码是否为模块化  代码可重用性如何 几个JS框架比较 Jquery YUI Prototype Ext-JS Qooxdoo ver 1.4.2 3.0 1.6.1 3.1.1 1.2 DOM unextended Y Y N Y Y Data retrieval(XMLHTTP) Y Y Y Y Y Rich Text Editor With plugin Y N Y Y Drag and drop Y Y Y Y Y Input form With plugin Y Y Y Y Animation Y Y Y Y Y Event handling Y Y Y Y Y Automation tools With plugin Y Y Y Y Accessibility Y Y Y N N mobie/tablet support With plugin partial N Y N Jquery YUI DOM Prototype Ext JS Mootools Dojo Kissy ComoJS Jquery与YUI详细比较  DEMO http://adamlu.com/Speech/jsframeworkdiff.html 如何去写一款框架  写一个稳定的API  一个命名空间  不要扩展原生的对象  代码要容易被扩展  处理好浏览器兼容性问题  写好文档  测试你的框架 写适合自己的框架  分析业务需求  如何组织框架  实现底层库  实现UI库  实现扩展机制  兼容其它类库 总结  学习框架,但是不能依赖框架  根据项目需求选择/写 适合自己的框架  RIA和Mobile框架需要前端工程师更深入去 研究以及学习,我觉得将对以后的云计算 和移动互联网开发有很多帮助 参考资源  http://sixrevisions.com/javascript/promising_javascript_fr ameworks/  http://carlos.bueno.org/jq-yui.html  http://www.webdesigntoolslist.com/2009/04/webmasterto ols/javascript-cheat-sheets-quick-reference-guides-for- javascript-webmasters-coders-web-developers- designers/  http://en.wikipedia.org/wiki/Comparison_of_JavaScript_fr ameworks  http://matthiasschuetz.com/javascript-framework- matrix/en/jquery  http://www.ibm.com/developerworks/web/library/wa- jsframeworks/ Q&A Thanks! Email:luchaowu@gmail.com MSN:luchaowu@hotmail.com
还剩41页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享pdf获得金币 ] 2 人已下载

下载pdf

pdf贡献者

pgw6

贡献于2012-12-05

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf