一站式前端框架.ppt

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