一般的mis应用,基本上采用左边树布局,右边操作区域的布局方式,Extjs更是经典布局方式。
Extjs4.x,有两个方式可以实现右侧的center区域的加载,一种是autoload,一种是iframe方式,最近对这两个方式比较纠结,不知道到底该用那种方式好,晚上做了下详细的比较,我的选择是IFrame,虽然很多人提倡用autoload方式。
Autoload和iframe方式的本质区别
1.AutoLoad 只需要加载一次ext-all.js、css等核心库文件
2.iframe方式需要在每个页面都加载一次,这对于ext这么庞大的库不是件好事,但是传言可以通过请求重定向,让浏览器只从缓存加载核心文件,待验证
先撇开上面这个问题,采用iframe方式有什么好处呢?
1.隔离关注面,由于iframe内的模块基本是脱离程序“外壳”独立存在,能独立执行的,如果有问题,我们只需要聚焦即可
2.变量问题,采用autoload,应用类似单页面应用,尤其是团队开发,变量问题是个大问题,而iframe变量是独立的,很少重复
3.js mvc的开发方式,官方提供的js分包方式,个人认为小应用尚可,但是稍微大一点的系统,js很多,那无疑又是一场恶梦
官方推荐方式 | 我的做法 | |||||
app | User | |||||
controller | controller.js | |||||
userController.js | model.js | |||||
orgController.js | store.js | |||||
model | view.js | |||||
userModel.js | ||||||
orgModel.js | Org | |||||
store | controller.js | |||||
userStore.js | model.js | |||||
orgStore.js | store.js | |||||
view | view.js | |||||
userView.js | ||||||
orgView.js |
团队开发中,一个是方便阅读,容易找到对应的js,方便排错
当然如果按照我的分文件夹的方式,也会带来一个损失,那就是js的重用问题,这个好像和extjs有的违背,呵呵,但是可以将一些公共的model,store放到单独的common文件,折中解决问题。
4.iframe可以方便的加载一些非extjs的应用页面,当然autoload也是可以实现的,只是需要做跳转
5.iframe最大好处还是团队项目的开发
6.随着模块的增加,autoload可能会带来其他问题
当然用了iframe方式必定也会牺牲一些东西,像模块重用、实时换肤等
以上是我选择iframe的理由,具体是否适合,还需要验证,以上只是我的几点猜测,还未正式运用到实战中,所以欢迎各位了解extjs的大牛批评指导