Extjs的架构设计思考，单页面应用 or 多页面？

写在前面：不要认为 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