在管理系统中,往往更注重组件的完备,功能的可扩展,以及风格的统一,因此在前端组件中,选择了dojo,原因有三点:
1 开源,并且有强大的团队维护
2 组件化设计思想
3 风格统一
管理系统后台用j2EE,采用常规的struts2+spring+hibernate+freemarker。前端采用dojo
整体构架理念是用一个总的布局页面规定log区,菜单区,功能区,其他信息展示区的布局。
当菜单点击的时候,切换功能区。功能区采用iframe加载,保证功能区页面是个独立的html,以便被其他地方重用。
一下是登陆后的主界面的代码
以下是主界面截图:
在功能区的界面上点击按钮,如果要打开一个新的dialog,在主界面上有一个全局的dialog,当点击功能区按钮需要打开一个新的dialog时调用以下方法:
主界面中打开dialog的方法为:
在dialog中嵌入了一个新的iframe,将新的窗口打开,打开后的窗口是:
打开的dialog和原来功能区的原始窗口的时间交互通过主界面来传递,这里面使用了dojo的事件注册和触发机制。
主界面中的方法是
在整个这样的构架中,任何功能区的页面上的脚本都是通过主界面和其他功能区的界面进行事件交互,功能区的页面并不直接交互。
这样保证了代码的隔离性。
遇到的问题:
1 这样使用iframe加载的功能区的页面时,因为是一个独立的html,所以要加载很多dojo的组件和源码,导致单个功能区加载速度比较慢。平均每页的加载速度在2-3秒内
2 由于dialog使用了dojo的dijit.Dialog组件,此组件在新版1.6中有bug,升级了以后新的dialog不能打开。
3 在tab页上加右键菜单不好加