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 预留位置,通过衍生子类修饰对象,否则直接使用本类。

目录
相关文章
|
7月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
166 8
|
11月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
264 124
|
10月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
132 2
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
195 1
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
248 7
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
156 6
|
设计模式 JavaScript 前端开发
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第7天】在软件工程中,设计模式是解决常见问题的标准解决方案。JavaScript中的工厂模式用于对象创建,但过度使用可能导致抽象过度和缺乏灵活性。单例模式确保唯一实例,但应注意避免全局状态和过度使用。观察者模式实现了一对多依赖,需警惕性能影响和循环依赖。通过理解模式的优缺点,能提升代码质量。例如,工厂模式通过`createShape`函数动态创建对象;单例模式用闭包保证唯一实例;观察者模式让主题对象通知多个观察者。设计模式的恰当运用能增强代码可维护性。
126 0
|
设计模式 缓存 JavaScript
js设计模式实例
【7月更文挑战第2天】JavaScript设计模式包含工厂、单例、建造者、抽象工厂和代理模式等,它们是最佳实践和可重用模板,解决创建、职责分配和通信等问题。例如,工厂模式封装对象创建,单例确保全局唯一实例,建造者模式用于复杂对象构建,抽象工厂创建相关对象集合,而代理模式则控制对象访问。这些模式提升代码质量、可读性和灵活性,是高效开发的关键。
92 0
|
4月前
|
设计模式 Java 数据库连接
【设计模式】【创建型模式】工厂方法模式(Factory Methods)
一、入门 什么是工厂方法模式? 工厂方法模式(Factory Method Pattern)是一种创建型设计模式,它定义了一个用于创建对象的接口,但由子类决定实例化哪个类。工厂方法模式使类的实例化延迟
127 16