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

写在前面：不要认为 EXTJS 高版本就是一个界面改良，在项目中，仍然用 N 张页面，在 N 张页面部署 EXTJS ．这种方式不用多讲，效率问题你们都看得出来， EXTJS 是一个集成开发工具，注定他的开发包很大，一个 600 多 K 的 JS 文件，打算让它下载多少次呢？应该说， EXTJS 不只是一个 AJAX 开发框架，也是一个富客户端开发平台， AJAX 是能够部署到多个页面，但不推荐这样作，Extjs能和 FLEX 同样，在一张页面中，完成项目中全部事件。 

1、单页面 
目前的应用方式：一个 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.  很容易控制，无此问题 


2、组件化、模块化
编写 ExtJS 程序，应该像搭积木同样，在 Viewport 这样一个框架中，咱们添加各类积木块进去获得咱们想要的形状。 Extjs 给咱们提供了不少最小块的积木，每一块都是一个组件，咱们能够将几个最小的组件组合成一个稍微大一点的组件，咱们不可能每一个功能都从最小的组件从头搭建，咱们能够收集一些更大一些的组件，实现这个层面的组件复用，组件是可大可小的，组件的复用也是可大可小的。组件化编程是一个思想，而不是一门技术，这个思想能够用在任何地方。 

3、 UI 与逻辑分离 
可能你们都已近习惯了将 handler 和 listeners 与一大堆 Config Options 写在一块儿了。不能说这是一种错误的用法，可是这绝对不是好用法。相似下面这种代码是否是随处可见呢？ 
   

这种写法，再加上全集变量泛滥，就会致使整个 js 文件混乱不堪，一个 js 文件 3000 行代码，全局变量满天飞，想要的时候找不到，我想你们都遇到过吧。 
 

再看一下下面这段代码，不会不感受清爽不少呢  

 


UI 与逻辑分离，就是在设计一个组件的时候，将 UI 写成一个类，将事件处理和其余逻辑写成另一个类，两个类存放在两个不一样的 js 文件中 ( 非必须 ) 。这样子的好处： 
1.  改动 UI 和逻辑，几乎不会相互影响 
2.  代码清晰规范，提升开发速度，下降维护成本 
3.  组件能够重用，界面能够重用 
4.  有利于开发规范的统一 
5.  由于使用继承，内存开销减小，运行速度加快

转载自：http://shubangjun.iteye.com/blog/1009094