一站式前端框架ppt课件.ppt

一站式前端框架dojo简介,张卫滨,1,有没有搞错，没有HTML5？,2,Aboutme,2007.7至今东软基础软件事业部PSD关注领域Web前端开发技术：JavaScript、RIA框架、HTML5、性能优化Java开发技术，Spring、Hibernate、OSGi、Eclipse等软件复用联系我邮箱：levinzhang1981新浪微博：张卫滨1895技术博客：,3,Agenda,4,很久很久以前,互联网传输的速度很慢网站上，基本上都是以内容展现为主，较少的交互IE浏览器占据了市场的绝对优势浏览器中，JavaScript只是用来做表单验证等工作业务应用基本上均以Client/Server的架构提供总之，web1.0时代，是提供内容为主，至于你看不看，看了有啥想法，我不管,5,然后,互联网进入2.0的时代，代表事件为blog、论坛的兴起注重交互，任何人都是网络信息的生产者Brower/Server的架构大量应用于企业级应用的开发随着Ajax模式的兴起，JavaScript得到了广泛的应用CSS/DIV的理念被广泛应用于Web开发浏览器不再是IE一家独大大量的前端框架井喷出现，提高了开发的效率,6,再然后,对更炫的界面和更好用户体验的无休止追求开放平台和API方案兴起跨平台的web应用HTML5和CSS3得到业内的广泛关注我们正处于一轮巨大的变革之中,7,用个图来看看吧,8,Agenda,9,如果没有遇见你,处理让人头疼的浏览器兼容性问题处理所有的Ajax请求无休无止的规范，无休无止的beta好吧，给我做个像桌面应用一样酷的应用OK，终于做出来了，但你不能让我等10秒钟才看到页面吧大量前端代码的维护简直就是噩梦（这段代码曾经上帝和我能看懂，现在只有上帝能看懂啦）,10,框架大集合,11,世界因你而不同,不用担心浏览器兼容性问题了工具类处理dom、事件统一的Ajax封装，不用自己发请求，解析返回值大多提供类和继承机制，利于大规模程序的开发用户界面组件，界面统一，效率提升使得开发人员以一种类似的风格进行程序的开发，便于后来人员的维护,12,形象得看一下,浏览器API,Web应用,浏览器API,Web应用,前端框架,13,Agenda,14,dojo是什么？,由AlexRussell,DylanSchiemann等人始创于2004年UnbeatableJavaScriptTool开源、非盈利最新版本1.7.2谁在支持dojo？,15,为什么用dojo？,对JavaScript和DOM的增强完善的包和类管理机制AMD规范的良好支持Ajax的封装DOM的封装HTML5和CSS3的支持完善且样式统一的组件生命周期管理多种使用方式便于扩展工具自动构建测试其他众多厂商支持社区活跃,16,dojo的组成,一站式前端解决方案,Core,dijit,dojox,核心库AMD加载器类机制定义Dom和ajax封装数据结构,UI库组件的生命周期定义扩展的机制表单类组件容器类组件,各种你想要的东西dojomobileComet高级动画3D等图表,17,再近一点看看core,dojo.jsdojo/_basedojoCore,18,再近一点看看dijit,完善的组件生命周期丰富的组件库可扩展的插件开发机制,19,再近一点看看dojox,丰富多彩的开源库图表Mobile工具类仪表盘对HTML5的一些封装（如websocket、本地缓存等）注意：目录有些凌乱（好东西慢慢淘）稳定性难以保证,20,谁适合用dojo,如果您的应用满足以下条件，那推荐dojo：需要使用大量组件需要复杂的交互体验（类似桌面应用）另外，如果主要用于企业内联网，那dojo更适合了如果您的应用是以下的场景，请尽可能考虑其他框架：内容以展现为主，主要是静态内容不需要组件，只需要一些dom和ajax的工具,21,开始使用dojo,值得注意的是，可以通过data-dojo-config增加一些关于dojo的配置信息，如async属性设置是否异步加载依赖的JS文件。,22,dojo解决实际编程问题OO,概况dojo通过dojo.declare声明类支持类的多继承支持自定义构造方法和postscript方法支持链式调用父类方法示例参考文章：,23,dojo解决实际编程问题事件,概况dojo的事件主要是通过dojo.connet方法实现的支持dom对象的事件支持给已有的方法添加执行后的监听以后版本的事件将会通过dojo.on模块来实现使用aspect模块，实现了类似AOP的功能使用dojo的subscribe/publish，实现发布/订阅功能示例Dom方法,24,dojo解决实际编程问题Ajax,dojo对JavaScript的Ajax请求进行了封装，提炼出了以下方法：dojo.xhrGetdojo.xhrPostdojo.xhrPutdojo.xhrDeletedojo.xhr,25,dojo解决实际编程问题other,dndAOPHTML动画数据结构,26,dijit中的常见组件,27,怎样使用组件,声明式程序编码,28,dijit组件的生命周期,组件是怎样展现出来的呢？用个图来看看,29,再看一眼,widget,dijit._Widget,dijit._TemplatedMixin,CSS,images,30,怎样做一个组件？,让我们想一个较为常见的场景？表单输入中，最常见的是不是这样的呢？先是一个label标签，给出提示然后是一个文本框，要求用户输入文本框可以设置默认值,31,我们做的组件RIA,32,新产品WebWidgetFramework,33,dojox各种有趣东西的大派对,图表http:/localhost/dojo/dojox/charting/tests/仪表盘http:/localhost/dojo/dojox/gauges/tests/Grid组件http:/localhost/dojo/dojox/grid/tests/CSS3http:/localhost/dojo/demos/css3/Formhttp:/localhost/dojo/dojox/form/tests/容器http:/localhost/dojo/dojox/layout/tests/,34,你不应该错过的是,dojomobile在dojox包下实现了一系列的组件这些组件模拟了移动终端的操作模式通过不同的样式，能够模拟出不同操作系统终端的效果示例http:/localhost/dojo/dojox/mobile/tests/我们做的简单例子：http:/localhost:8080/html5-acorn/,35,不得不提的util包,DOH自动化测试构建系统JS文档自动生成工具,36,Agenda,37,站得高一点看看,dojo是一个功能完整的前端框架dojo对原生的JavaScript和DOM都进行了增强dojo提供了丰富的UI组件dojo特别适用于交互性要求高的场景dojo得到了众多厂商的支持并且开发状态活跃,38,dojo和jQuery不得不说的那些事,子曾经曰过：君子性非异也，