写在前面:不要认为 EXTJS 高版本就是一个界面改良,在项目中,仍然用 N 张页面,在 N 张页面部署 EXTJS .这种方式不用多讲,效率问题大家都看得出来, EXTJS 是一个集成开发工具,注定他的开发包很大,一个 600 多 K 的 JS 文件,打算让它下载多少次呢?应该说, EXTJS 不仅是一个 AJAX 开发框架,也是一个富客户端开发平台, AJAX 是可以部署到多个页面,但不推荐这样做,Extjs能和 FLEX 一样,在一张页面中,完成项目中所有事件。
一、单页面
目前的应用方式:一个 Viewport ,点击每个菜单在 Viewport 的 center 区域生成一个 tab ,这个 tab 就是一个 panel , panel 中用 html 属性放置一个 iframe ,用 iframe 去加载另外一个全新的页面。
单页面方式:还是一个 Viewport ,点击每个菜单在 Viewport 的 center 区域生成一个 tab ,这个 tab 就是一个 panel ,但是 panel 中不使用 iframe ,而是将原来用 iframe 方式加载的内容,直接“画”在 panel 中。
目前的应用方式的问题:
1. 占用内存超高:每个 tab 都会用 iframe 加载一个全新的页面,每个页面都会载入一套完整的 ExtJS 的运行环境,由于浏览器的原因,这些 tab 关闭的时候内存不会完全释放,这样随着 tab 的开关,内存占用越来越多,占用几百 M 都没问题。
2. center 区域内部的宽高,无法随浏览器宽高变化,无法自适应
3. iframe 内外相互控制,内外沟通非常困难
4. 需要消耗额外的 js 解析时间,速度慢,重新加载要消耗解析 js 的时间
5. 用 iframe 有时候会导致一些莫名其妙的变形问题,滚动条问题
单页面方式:
1. 不用 iframe 加载, ExtJS 自己会释放无用的对象、事件占用的内存,一般一个应用只占用几十 M 内存
2. 由于是在一个页面内, ExtJS 自己可以掌控宽高自适应
3. 单一页面无此问题
4. 只需要第一次载入页面的时候加载 ExtJS 运行库
5. 很容易控制,无此问题
二、组件化、模块化
编写 ExtJS 程序,应该像搭积木一样,在 Viewport 这样一个框架中,我们添加各种积木块进去得到我们想要的形状。 Extjs 给我们提供了很多最小块的积木,每一块都是一个组件,我们可以将几个最小的组件组合成一个稍微大一点的组件,我们不可能每个功能都从最小的组件从头搭建,我们可以收集一些更大一些的组件,实现这个层面的组件复用,组件是可大可小的,组件的复用也是可大可小的。组件化编程是一个思想,而不是一门技术,这个思想可以用在任何地方。
三、 UI 与逻辑分离
可能大家都已近习惯了将 handler 和 listeners 与一大堆 Config Options 写在一起了。不能说这是一种错误的用法,但是这绝对不是好用法。类似下面这种代码是不是随处可见呢?
这种写法,再加上全集变量泛滥,就会导致整个 js 文件混乱不堪,一个 js 文件 3000 行代码,全局变量满天飞,想要的时候找不到,我想大家都遇到过吧。
再看一下下面这段代码,不会不感觉清爽很多呢
UI 与逻辑分离,就是在设计一个组件的时候,将 UI 写成一个类,将事件处理和其他逻辑写成另外一个类,两个类存放在两个不同的 js 文件中 ( 非必须 ) 。这样子的好处:
1. 改动 UI 和逻辑,几乎不会相互影响
2. 代码清晰规范,提高开发速度,降低维护成本
3. 组件可以重用,界面可以重用
4. 有利于开发规范的统一
5. 因为使用继承,内存开销减少,运行速度加快
转载自:http://shubangjun.iteye.com/blog/1009094