Extjs中的设计模式

ExtJS设计模式

  

在前端页面展示方面，无论是风格统一或者是组件的管理、扩展，ExtJS都做得非常优秀。

另外，ExtJS还是一个优秀的基于JavaScript的MVC框架，其中的设计理念和设计模式非常值得我们在项目中参考。

笔者虽然使用ExtJS多年，但也是和许多读者一样，并没花多少时间去深究其内核和设计精髓，突然一时心血来潮，非常的潮（因为最近真的很潮，回南天噢），所以在此愿与大家一起谈论和分享。

经过初步分析，笔者认为，在ExtJS中，应用组合模式来管理各UI组件（用户界面通常组合了嵌套的组件，像容器、面板、窗口、按钮等），用观察者模式来监听管理各事件，用代理模式处理ajax请求，用创建者模式创建复杂的组件，用责任链模式处理触发事件，用适配器模式适配各种浏览器……

（注：本文讨论的设计模式不一定与四人帮写的《GOF设计模式》一样，有正规的类图；本文讨论的是ExtJS应用到的设计模式思想或变体。）

【组合模式】

与很多优秀的UI框架一样，ExtJS应用组合模式来管理UI组件。各个UI组件可以任意嵌套组合使用，一层层叠起来，然后在浏览器呈现HTML标记。

例如：Ext.Container可以通过add(Component /Array)方法添加任意UI组件；通过get(key )方法获取被嵌套的组件，通过remove(component)方法删除取被嵌套的组件。

【观察者模式】

读者如果做过前端开发，对观察者模式肯定不会陌生，有事件的地方就有观察者模式。

我们先来看一下的EXT组件结构图：

 

 

聪明的读者首先会发现，所有的ExtJS组件都继承Ext.Component，而Ext.Component继承Ext.util.Observable，也就是说，所有的ExtJS组件都是可观察的对象，开发者可以通过addEvents、addListener方法为ExtJS组件添加自定义事件和监听注册事件，当然还可以通过fireEvent方法触发已注册事件和removeListener方法删除组件已注册的事件。

【代理模式】

代理模式大家更不陌生，尤其是我们立信人！每个立信人都感同身受，因为我们上外网就是通过代理！

代理模式一般用来干以下不见光的事情（注：不是见不得光，不过很多代理行业确实见光死）：

1、保护代理或控制代理（站在老板的立场是保护代理，站在员工立场是控制代理。You know！）。

2、远程代理：管理客户和远程对象之间的交互。

3、虚拟代理：控制访问实例化开销大的对象。

当然代理还有很多变体，例如：缓存代理、同步代理等等。

ExtJS就是使用代理模式处理ajax请求，算是属于远程代理的一种。例如Ext.data.Store可以这样写：

var store = new Ext.data.Store( {

    proxy : new Ext.data.HttpProxy( {

       url : "ftp/ftpserver.action"

    })

});

【剩下的模式】

Singleton 单例模式 如Ext、Ext.Ajax

Flyweight 享元模式  Ext.fly

Template Method 模板方法模式   Ext.Template

……