《常用JS框架比较》PPT课件.ppt

《《常用JS框架比较》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《常用JS框架比较》PPT课件.ppt（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、常用JS框架比较鲁超伍|Adam我的博客评论全球最酷网站我的微博自我介绍n2005年开始接触互联网开发，曾就职于千橡互动校内网、雅虎中国、淘宝网，专注于前端开发，见证了前端行业在中国的发展，努力成为一个专业的前端工程师。n现负责新浪邮箱的RIA开发，喜欢创新互联网应用服务，对互联网前端开发最新技术如HTML5/CSS3和移动互联网开发感兴趣。什么是框架？n中文解释：中文解释：“框架”指一套包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，目标是使开发人员把重点放在任务项目所特有的方面，避免重复开发。n英文解释：英文解释：Framework/Library/Toolkit为什

2、么需要框架？nJavaScript框架或库是一组能轻松生成跨浏览器兼容的JavaScript代码的工具和函数。每一个库都在众多流行的Web浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于JavaScript的RIA将会在不同浏览器和平台上以类似的方式工作。n这些框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。常用的Javascript框架nJQuerynYUInPrototypenMootoolsnExtJSnMochiKitnDojonKissynComoJSnJETnJavaScriptMVCnQooxdoonSproutCorenSenc

3、haTouchnIUI我对框架的分类nJavascript库解决浏览器兼容性快速开发Web应用丰富UI效果n跨浏览器RIA框架类桌面应用n移动网络应用APP框架为移动设备而设计基于HTML5和CSS3JQuerynjQuery由JohnResig创建，其宗旨是WRITELESS,DOMORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k)，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，

4、并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。示例：http:/YUInYahoo!UserInterface(YUI)Library是一组采用DOMscripting，Dhtml和Ajax等技术开发的WebUI控件和工具。中文说过来就是“Yahoo用户界面库”。nYui工具包利用DOM脚本来简化浏览器内的开发（in-browserdevolvement），使用DHTML和AJAX的特性开发所有的Web程序。nYUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需

5、要请求服务器进行页面刷新。示例：http:/Prototypenprototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。示例：http:/MootoolsnMooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools从中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比多，整体设计也比要相对完善，功能更强大，比如增加了动画特效、拖放操作等等。示例：http:/ExtJSnE

6、xtJS是一个跨浏览器，用于开发RIA（RichInternetApplication）应用的JavaScript框架。提供：高性，可定制的WebUI控件库。良好的设计、丰富的文档和可扩展的组件模型。示例：http:/deploy/dev/examples/MochikitnMochiKit是一种有用的高端JavaScript库。MochiKit主要受到Python和Python标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。其中的尤其方便，能够以比原始JavaScript更友好的方式处理DOM对象。大部分都是针对XHTML文档定制的，如果与MochiKit和Ajax结合

7、在一起，使用XHTML包装的微格式尤其方便。示例：http:/DojonDojo是一个强大的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供Ajax，events，packaging，CSS-basedquerying，animations，JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEBUI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。示例：http:/demos/KissynKISSY是一个小巧灵活、简洁实用的UI类库，它希望使用者能愉悦编码、快乐开发

8、。nKeepItSimple&Stupid,Short&Sweet,Slim&Sexy.示例：http:/ComoJsnComoJS是一款代码简易而功能强大的Javascript框架，也是作者在工作过程中的经验总结，实用性强；通过它，能够简化Javascript代码开发，增强代码重用性，能够异步按需加载js和css文件，增强page的加载速度示例：http:/JetnJET适用于WebPage和WebApp的开发n微内核设计微内核设计内核可完全分离出来，用于构建自己的框架n自由拼装各个模块自由拼装各个模块n命名空间、原生对象零污染命名空间、原生对象零污染n无缝集成各种无缝集成各种js框架框架与

9、jQuery,YUI,Mootools,等框架无缝集成与多种局部框架无缝集成，如：Mini,Sizzle,cssQuery,xpath,JSON等等n多版本共存多版本共存如采用的JET版本过旧，旧有的Javascript代码不能与新版本JET兼容，则可以采用多版本共存的方式保持程序的可延续性n分层设计分层设计Javascript核心层，与Javascript解释引擎无关的封装和扩展浏览器端Javascript层，对浏览器中的Javascript引擎部分的封装和扩展示例：JavascriptMVCnJavaScriptMVC是一个功能强大的JavaScriptframework.也是一个很棒的J

10、avaScript测试框架，它同样能提高开发的速度。JavaScriptMVC应用了模型-视图-控制器架构模式，把业务逻辑和表示分离，使得代码更加模块化。示例：http:/Qooxdoonqooxdoo是一个Ajax应用框架使用基于面向对象JavaScript，它让你可以用JavaScript来开发类似于VB/Delphi风格的具有Ajax功能的应用程序。qooxdoo具有客户端浏览器检测功能，具有浏览器抽象层，可以无差别的创建跨浏览器的Web应用程序，它提供方便的调试接口，具有事件管理、聚焦管理、定时器、边框和对象属性等特征。它提供一组窗体组件并扩展了布局，它还提供跨平台的png图形透明支持

11、功能。此外，qooxdoo提供一个原子组件，你可以在其基础上开发你自己的组件。示例：http:/SproutCorenSproutCore苹果对SproutCore的解释为“开源，平台无关，类Cocoa的JavaScript框架，用于创建具有桌面应用程序外观和操作感的Web应用程序。”n现在有不少Web框架开始使用HTML5中的一些新特性（如离线存储、HTML5ApplicationCache等）来构建富本地（richnative-class）应用，而SproutCore则是其中之一。示例：http:/demos/SenchaTouchnSenchaTouch可以让你的WebApp看起来像Na

12、tiveApp。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的WEB标准，全面兼容Android和AppleiOS设备。示例：http:/SenchaTouchIUInIUI包含一套JavaScript库，CSS式样表及图片，是一个轻量级iPhoneUI库，包含iPhone风格导航菜单，设备方向，iPhone风格切换等功能，可以为你的Web程序带来iPhone般的体验。示例：http:/IUIJavascript框架使用比例Javascript框架使用比例怎么选择一款Javascript框架n你的项目需求n框架支持A级浏览器吗n是否利于团队协作开发n框架是否成熟n文档

13、是否健全n社区支持是否充足n框架的扩展性如何n你是否喜欢API的风格n代码执行速度性能如何n代码是否为模块化n代码可重用性如何几个JS框架比较Jquery YUI Prototype Ext-JS Qooxdoover1.4.23.01.6.13.1.11.2DOMunextendedYYNYYDataretrieval(XMLHTTP)YYYYYRichTextEditorWithpluginYNYYDraganddropYYYYYInputformWithpluginYYYYAnimationYYYYYEventhandlingYYYYYAutomationtoolsWithpluginY

14、YYYAccessibilityYYYNNmobie/tabletsupportWithpluginpartialNYNJqueryYUIDOMPrototypeExtJSMootoolsDojoKissyComoJSJquery与YUI详细比较nDEMOhttp:/如何去写一款框架n写一个稳定的APIn一个命名空间n不要扩展原生的对象n代码要容易被扩展n处理好浏览器兼容性问题n写好文档n测试你的框架写适合自己的框架n分析业务需求n如何组织框架n实现底层库n实现UI库n实现扩展机制n兼容其它类库总结n学习框架，但是不能依赖框架n根据项目需求选择/写适合自己的框架nRIA和Mobile框架需要前端工程师更深入去研究以及学习，我觉得将对以后的云计算和移动互联网开发有很多帮助参考资源nnn/Q&AThanks!Email:MSN: