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
……
- 大小: 21 KB
分享到:
相关推荐
ExtJS设计模式
自己的理解,重写了公司底层代码,用的设计模式做多就是单例和模板方法,可以看下实际公司是怎么来用的,还有就是面向接口编程,如果给你在我现在这个基础上来改,自己去写主从表,看可不可以写出来.自己如何认真的...
ExtJS 设计模式之一.docx ext单例
02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的文章模块界面搭建 07.继续搭建我的文章模块,...
11、ExtJS布局模式-Box布局、使用ViewPort布局首页0 j( d' o {. g$ T 12、ExtJS之Ext常用函数4 {, o8 W1 s! I6 ^3 k 13、ExtJS之Ext常用函数(二)' o, e2 G$ D7 @" ?- [! E 14、初识Ajax& i O, A2 I, c6 G: c- Q) K...
配合extjs4.2.0的MVC开发模式教程使用更好
基于ExtJS的Web XML编辑器设计与实现,赵丽娟,温巧燕,XML文件的编辑只能通过桌面应用程序实现,这使得B/S 模式的系统编辑XML文件的过程变得繁琐。即使页面提供文本框控件供用户编辑XML文��
4.1 设计模式——观察者模式 4.2 自定义事件 4.3 浏览器事件 4.4 ExtJS中的事件 4.4.1 Function.call()/apply()方法 4.4.2 函数的作用域 4.4.3 Ext.lib.Event事件 4.4.4 Ext.util.Observable事件 4.4.5 Ext....
a) 在ExtJs2.X的基础上进行的二次开发与通用接口设计,让繁琐的页面开发简单易行; b) 极大提高企业的项目Web表现层的开发效率; c) 统一企业的项目UI设计,统一的框架结构,能迅速规范企业的Web表现层代码设计规范...
a) 在ExtJs2.X的基础上进行的二次开发与通用接口设计,让繁琐的页面开发简单易行; b) 极大提高企业的项目Web表现层的开发效率; c) 统一企业的项目UI设计,统一的框架结构,能迅速规范企业的Web表现层代码设计规范...
本模块采用的是Extjs6.0的开发技术,使用过extjs的朋友都知道,从Extjs5.0版本开始引入的新的开发模式,这种模式更清楚,更易理解,所以作为入门,大家不妨下载下来看看。 ps:本模块共有3个模块,其中两个模块采用...
自己编写代码并调试成功的一套extjs4.1.0中mvc设计模式的开发过程
a) 在ExtJs2.X的基础上进行的二次开发与通用接口设计,让繁琐的页面开发简单易行; b) 极大提高企业的项目Web表现层的开发效率; c) 统一企业的项目UI设计,统一的框架结构,能迅速规范企业的Web表现层代码设计...
4.1 设计模式——观察者模式 4.2 自定义事件 4.3 浏览器事件 4.4 ExtJS中的事件 4.4.1 Function.call()/apply()方法 4.4.2 函数的作用域 4.4.3 Ext.lib.Event事件 4.4.4 Ext.util.Observable事件 4.4.5 Ext....
asp.net多层 基于EXTJS框架 效果很好的CRM 设计模式和EXTJS的应用 不用说了 值得下载
介绍了ExtJS技术及其框架结构,分析了机车关键零部件质量管理系统的功能需求,将ExtJS技术和java技术相结合,设计了基于MVC模式的系统总体架构,并详细阐述了系统在数据持久层、业务逻辑层、视图层的具体技术实现。...
我们一般会使用遵循MVC设计模式的Struts来规范程序结构,使用优秀的ORM组件Hibernate来简化数据库访问操作,使用系统黏合剂Spring来提高开发效率,使用异步访问的Ajax来提高用户体验。而今天我们要做的一个demo是一...
为了实现对嵌入式设备的网络管理需求,提出一种基于ExtJS 4.2.1的嵌入式网络管理系统设计方案,并完成系统的设计。该系统程序结构采用MVC模式,界面部分主要利用ExtJS提供的视图、面板、表格、表单等组件进行搭建,...
该课程涉及对酒店管理系统的需求分析、UML建模、依据需求分析进行数据库... 在快速掌握以上酒店管理系统的同时,该课程在后续部分进行了知识点扩展讲解,整理出在系统开发中使用到的一些常用设计模式并进行逐一讲解。