首页 > 代码库 > 我的DOJO学习之路(一)
我的DOJO学习之路(一)
新进公司,因为公司项目开发的架构跟之前的不一样,要抛弃以前的easy-ui,去学习新的DHTML语言DOJO,特此做个记录,方便自己以及后来者的学习。
建造JavaScript富客户端应用时,你会遇到大量令人烦恼的事情。浏览器的兼容性、对于降级(degradation)的支持、混杂在一起的DOM处理、还有那些鲜血淋淋的hack技巧(例如离线存储),所有这些事情都会冒出来。使用这些DHTML语言类似EXTJS,EASYUI,LIGERUI,DOJO就是懒得自己造轮子,OK,现在进入正题,今天计划用DOJO的API做一颗动态树。
既然用到了DOJO,首先是加载package包,在shared文件夹下的Layout里加载配置包(3个CSS文件和一个JS文件,配图。)
本测试项目以公司的项目为参考,Dojo的包都在MESTResource下的Dojo文件夹内
前台可以获得效果:
当点击模块时触发onSelected事件将当前单击模块的id和para(所需要的除ID以
外的数据的封装)传递到TreeHandler一般处理程序里,返回数据格式为(附图)
在加载子级菜单时,DOJO树为异步分布加载,先new ItemFileWriteStore()对象来缓存获取的Data,再new ForestStoreModel()创建一个对外数据的模型,最后通过new Tree()来加载模型实现控制子节点的单机事件和展开下一级子节点事件。
通过断点调试可以获取数据(附图)
分别对应单级菜单,多级菜单,多级菜单包含子节点的实例JSON数据,模拟测试数据,可以做出效果图
测试数据:
附AJAX动态树的最终效果图
其中前台JS中的onOpen事件每次都会触发,当(!item.root)时,则触发不是子节点的打开事件。
总结:
DOJO动态树优点:
1.每一级菜单都通过AJAX动态加载,效率高,用户体验好。
2.DOJO中动态树默认包含缓存功能,只需调用if(item.children)return;就可以缓存data数据,避免消耗资源。
3.功能细分为①储存树结构数据 var treeStore = new ItemFileWriteStore②定义树结构模型var treeModel = new ForestStoreModel③加载树结构 var mTree = new Tree,后台获取数据为identifier,label,Items内加载Item内容,结构简单清晰。
缺点:需要对DOJO有一定了解,因为需要在页面内加载data-dojo-type配合使用。至此,DOJO动态加载树学习完毕。
注解:前台动态树JS源码太长,且包含公司项目内容,如有需要学习的,可以直接给我留言索要,只供学习之用,敬请谅解。