ExtJS设计模式.docVIP

ExtJS设计模式 作者：庞柳焕（LouisBond） 地址：368大院 日期：2012/2/28 在前端页面展示方面，无论是风格统一或者是组件的管理、扩展，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方法删除已注册的事件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 …… 由于时间和能力的关系，ExtJS设计模式介绍到此，读者有兴趣的话欢迎补充。