深入理解JavaScript系列(28):设计模式之工厂模式
介绍
与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类。
工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。
这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。
正文
下面这个例子中,是应用了工厂方法对第26章构造函数模式代码的改进版本:
var Car = (function () {
var Car = function (model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
};
return function (model, year, miles) {
return new Car(model, year, miles);
};
})();
var tom = new Car("Tom", 2009, 20000);
var dudu = new Car("Dudu", 2010, 5000);
不好理解的话,我们再给一个例子:
var productManager = {};
productManager.createProductA = function () {
console.log('ProductA');
}
productManager.createProductB = function () {
console.log('ProductB');
}
productManager.factory = function (typeType) {
return new productManager[typeType];
}
productManager.factory("createProductA");
如果还不理解的话,那我们就再详细一点咯,假如我们想在网页面里插入一些元素,而这些元素类型不固定,可能是图片,也有可能是连接,甚至可能是文本,根据工厂模式的定义,我们需要定义工厂类和相应的子类,我们先来定义子类的具体实现(也就是子函数):
var page = page || {};
page.dom = page.dom || {};
//子函数1:处理文本
page.dom.Text = function () {
this.insert = function (where) {
var txt = document.createTextNode(this.url);
where.appendChild(txt);
};
};
//子函数2:处理链接
page.dom.Link = function () {
this.insert = function (where) {
var link = document.createElement('a');
link.href = this.url;
link.appendChild(document.createTextNode(this.url));
where.appendChild(link);
};
};
//子函数3:处理图片
page.dom.Image = function () {
this.insert = function (where) {
var im = document.createElement('img');
im.src = this.url;
where.appendChild(im);
};
};
那么我们如何定义工厂处理函数呢?其实很简单:
page.dom.factory = function (type) {
return new page.dom[type];
}
使用方式如下:
var o = page.dom.factory('Link');
o.url = 'http://www.cnblogs.com';
o.insert(document.body);
至此,工厂模式的介绍相信大家都已经了然于心了,我就不再多叙述了。
总结
什么时候使用工厂模式
以下几种情景下工厂模式特别有用:
对象的构建十分复杂
需要依赖具体环境创建不同实例
处理大量具有相同属性的小对象
什么时候不该用工厂模式
不滥用运用工厂模式,有时候仅仅只是给代码增加了不必要的复杂度,同时使得测试难以运行下去。
同步与推荐
本文已同步至目录索引:深入理解JavaScript系列
深入理解JavaScript系列文章,包括了原创,翻译,转载等各类型的文章,如果对你有用,请推荐支持一把,给大叔写作的动力。
本文由 好 twovs.com 为 汤姆大叔《深入理解JavaScript》 提供的镜像文件
©twovs.com 晋ICP备11001649号
返回顶部
深入理解JavaScript系列(28):设计模式之工厂模式的更多相关文章
- 深入理解JavaScript系列(38):设计模式之职责链模式
介绍 职责链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象 ...
- 深入理解JavaScript系列(36):设计模式之中介者模式
介绍 中介者模式(Mediator),用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 主要内容来自:http://www ...
- 深入理解JavaScript系列(37):设计模式之享元模式
介绍 享元模式(Flyweight),运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类). 享元模式可以避免大量非常相似类的开销,在程序设 ...
- 深入理解JavaScript系列(30):设计模式之外观模式
介绍 外观模式(Facade)为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用. 正文 外观模式不仅简化类中的接口,而且对接口与调用者也进行了解耦 ...
- 深入理解JavaScript系列(31):设计模式之代理模式
介绍 代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问. 代理模式使得代理对象控制具体对象的引用.代理几乎可以是任何对 ...
- 深入理解JavaScript系列(25):设计模式之单例模式
介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现.OK,正式开始. 在传统开发工程师眼里,单例就是保证一个类只有一个 ...
- 深入理解JavaScript系列(33):设计模式之策略模式(转)
介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很 ...
- 深入理解JavaScript系列(44):设计模式之桥接模式
介绍 桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化. 正文 桥接模式最常用在事件监控上,先看一段代码: addEvent(element, 'click', getBe ...
- 深入理解JavaScript系列(42):设计模式之原型模式
介绍 原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象. 正文 对于原型模式,我们可以利用JavaScript特有的原型继承特性去创建对象的方式,也就是 ...
随机推荐
- 模块-os.system的两个模块/random模块/datetime模块/写日志
一.获取当前目录的路径 os.path.abspath('.')# 取绝对路径 os.getcwd()# 取当前路径 .代表当前目录 ..上一级目录 ../.. 二.执行操作系统命令1.os.syst ...
- loj #2255. 「SNOI2017」炸弹
#2255. 「SNOI2017」炸弹 题目描述 在一条直线上有 NNN 个炸弹,每个炸弹的坐标是 XiX_iXi,爆炸半径是 RiR_iRi,当一个炸弹爆炸时,如果另一个炸弹所在位置 X ...
- postgresql中的各种scan的比较
最近在看postgresql的查询计划,在查询中对表的扫描计划大概有如下几种: Seq Scan Index Scan Bitmap Heap Scan Index Only Scan 这里就把自己的 ...
- 【BZOJ1053】[HAOI2007]反素数 (搜索+数论)
\([POI2002][HAOI2007]\)反素数 题目描述 对于任何正整数x,其约数的个数记作\(g(x)\).例如\(g(1)=1.g(6)=4\). 如果某个正整数x满足:\(g(x)> ...
- JavaWeb学习笔记(一)—— Http协议
一.什么是HTTP协议 HTTP,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览 ...
- 009 Android Fragment动态用法(实现动态菜单栏)设置控件为满屏状态
·1.MainActivity采用线性布局 2.在app--->res--->layout,右击new--->xml---->layout xml FILE <1> ...
- CSS3 选择器 修改 整数个样式
.blogbottom ul li:nth-child(4n){margin-right:0px;} 说明:4n就是每第4个.
- python之常用的数据类型
1. 变量的定义以及声明 在学习变量之前,咱们需要知道变量的命名规则: ① 变量必须由数字字母下划线构成,如a_1 ② 变量名不能以数字开头,如1a ③ 需要遵循驼峰命名法 给变量赋值通常采用“=”, ...
- LeetCode记录之14——Longest Common Prefix
本题虽然是easy难度,题目也一目了然,问题就是在这里,需要考虑的特殊情况太多,太多限制.导致我一点点排坑,浪费了较多时间. Write a function to find the longest ...
- 洛谷 P3191 [HNOI2007]紧急疏散EVACUATE(网络最大流)
题解 二分答案+Dinic最大流 二分答案\(mid\) 把门拆成\(mid\)个时间点的门 相邻时间的门连一条\(inf\)的边 预处理出每个门到每个人的最短时间 为\(dis[k][i][j]\) ...