常用JS框架比较.ppt
常用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 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_frameworks/ http:/carlos.bueno.org/jq-yui.html http:/www.webdesigntoolslist.com/2009/04/webmastertools/javascript-cheat-sheets-quick-reference-guides-for-javascript-webmasters-coders-web-developers-designers/ http:/en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks http:/matthiasschuetz.com/javascript-framework-matrix/en/jquery http:/www.ibm.com/developerworks/web/library/wa-jsframeworks/,Q&A,Thanks! Email:luchaowugmail.com MSN:luchaowuhotmail.com,
