Ext JS 与设计模式

简介: 从 Ext JS 的源码看,作者编码之时参考了不少设计模式方面的宝贵经验,运用到许多类的设计中去的。可是一旦上升到“设计模式”,有朋友说不值当,大意是受限于 Script 级别编码的话搞“设计模式”会不讨好的说。

从 Ext JS 的源码看,作者编码之时参考了不少设计模式方面的宝贵经验,运用到许多类的设计中去的。可是一旦上升到“设计模式”,有朋友说不值当,大意是受限于 Script 级别编码的话搞“设计模式”会不讨好的说。言下之意,我只不过在弄 Widget 罢了,真不必劳师动众搬弄设计模式,许多好用的 Widget 不是没有设计模式的指导也可以在项目上运行得好好的? ——先不讨论怎么样的结论,我们的初衷是既然难得有 JS 框架使用上了设计模式,而恰好自己比较熟悉 Ext JS,就拿它当作一个了解设计模式的一个例子吧。下面试制作一表格,列出框架中出现的模式,并且还有我所接触与设计模式联系密切的内容,不一定属于 Ext JS 的,只是较吻合的都纳入表中。

创建模式 Creational Patterns

Pattern

出现的地方

说明
Abstract Factory 抽象工厂 XXXMgr.createCmp/createXX() 通过管理者类 createStore() 创建新数据容器。
Builder 生成器模式 …… many factories
FactoryMethod工厂方法模式 Xtype 延时子组件。
Prototype 原型模式 JS 的 function.prototype

明显,我望文生义了呵呵,难道js的 function.prototype 不属于原型模式?怎么理解?
纠结的俺发现下面资源值得参考:

http://www.cnblogs.com/birdshome/archive/2005/02/21/101550.html

Singleton 单例模式 Ext={}/Ext.ComponentMgr 许多管理者类(XXXMgr)本身可以被认为是单例模式。

结构模式 Structural Patterns

Pattern

出现的地方

说明
Adapter 适配器模式 prototype-adapter.js/yui-adapter.js/jquery-adapter.js 最底层采用 Adapter 模式,把不同 JS 库的 API 封装成一套统一的接口。适配器是使用 MVC 时,经常附带用到的技巧:使用适配器将模型适配成符合现有视图和控制器所需要的模型。
Bridge …… ……
Composite 组合模式 Ext.CompositeElement元素类 Ext.select()/query() 查询元素返回 CompositeElment 结果。总体和个体实现了同一个接口。
Decorator …… ……
Facade …… ……
Flyweight 享元模式 Ext.fly() 不缓存元素,直接返回结果。不需要多次被访问。不需要共享。
Proxy 代理模式 Ext.data.ScriptProxy 跨域访问解决方案,另外相同的有在服务端代理的,也是 Proxy 模式的一种表示。

行为模式 Behavioral Patterns

Pattern

出现的地方

说明
Chain of Responsibility …… ……
Command Undo/ redo ……
Iterator …… ……
Mediator …… ……
Memento …… ……
Interpreter 解释器模式

Ext.util.JSON

encode() 编码为 JSON;decode() 还原为JS对象;另外有人说 JavaScript 嵌入正则表达式的特殊语法使用 RegExp 也是应用解释器模式的典型一例。
Observer 观察者模式 Ext.util.Observable 类 UI 系统就是事件系统,事件系统最多采用的,就是观察者模式。MVC 中 model 是观察者模式。
State 状态模式    可否参考 Ext JS 4 的 stateful 类?事先声明,说这个例子乃凑数滴,,不一定严谨。
Strategy 策略模式 MVC 控制器 Controller 是视图 View 的策略。MVC 是复合模式,结合了多种模式在内。
Template Method 模板方法模式 许多类的 method: Ext.emtpyFn 空函数 让子类写实现的方法。
Vistor …… ……

由此可见,设计模式与真实编码还是有不少融合的地方。关键在于怎么去理解并加以消化。为了大家在复杂性目前,能更好地沟通,真正了解代码的含义与真实企图,应该提倡一种程序员彼此都了然的软件方法论或开发思维。估计“设计模式”就是这样的前提下被“提炼”出来的。

设计模式是经过许多前辈累积下来的宝贵经验,是高度抽象化,深思熟虑的结果,方可为大家推崇备至,引导我们走正确的路。但这种经验并非简单地照搬照套,小弟也在学习之中,尚属肤浅。最近收到《研磨设计模式》一书,感觉写得很好。看了一些章节后,再回想起Ext好像也有很多应用设计模式的地方,于是草写一下,而且没有写不熟悉的模式,免得糗多了。以上表格可能有牵强的地方,请看客姑且当作不完善的笔记。

2015-01-24 学习 Java 遇到的模式,很受用:

观察者模式 :MVVM

Composite 组合模式:JUnit 多个测试用例

HttpServletRequestWrapper - Decorator 装饰模式:HttpServletRequestWrapper 采用装饰模式重新封装 request 预留位置,通过衍生子类修饰对象,否则直接使用本类。

目录
相关文章
|
1月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
33 8
|
2月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
127 33
|
4月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
70 2
|
5月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
57 3
|
7月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
103 1
|
7月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
8月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
104 6
|
8月前
|
设计模式 JavaScript 前端开发
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第7天】在软件工程中,设计模式是解决常见问题的标准解决方案。JavaScript中的工厂模式用于对象创建,但过度使用可能导致抽象过度和缺乏灵活性。单例模式确保唯一实例,但应注意避免全局状态和过度使用。观察者模式实现了一对多依赖,需警惕性能影响和循环依赖。通过理解模式的优缺点,能提升代码质量。例如,工厂模式通过`createShape`函数动态创建对象;单例模式用闭包保证唯一实例;观察者模式让主题对象通知多个观察者。设计模式的恰当运用能增强代码可维护性。
102 0
|
8月前
|
设计模式 缓存 JavaScript
js设计模式实例
【7月更文挑战第2天】JavaScript设计模式包含工厂、单例、建造者、抽象工厂和代理模式等,它们是最佳实践和可重用模板,解决创建、职责分配和通信等问题。例如,工厂模式封装对象创建,单例确保全局唯一实例,建造者模式用于复杂对象构建,抽象工厂创建相关对象集合,而代理模式则控制对象访问。这些模式提升代码质量、可读性和灵活性,是高效开发的关键。
55 0
|
3月前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
201 11

热门文章

最新文章