深入理解JavaScript系列(28):设计模式之工厂模式详解
作者:bea
介绍 与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类。 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。 这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。 正文 下面这个例子中,是应用了工厂方法对第26章构造函数模式代码的改进版本:
介绍
与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类。
工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。
这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。
正文
下面这个例子中,是应用了工厂方法对第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);
至此,工厂模式的介绍相信大家都已经了然于心了,我就不再多叙述了。
总结
什么时候使用工厂模式
以下几种情景下工厂模式特别有用:
1.对象的构建十分复杂 2.需要依赖具体环境创建不同实例 3.处理大量具有相同属性的小对象
什么时候不该用工厂模式
不滥用运用工厂模式,有时候仅仅只是给代码增加了不必要的复杂度,同时使得测试难以运行下去。
有用 | 无用
与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类。
工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。
这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。
正文
下面这个例子中,是应用了工厂方法对第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);
至此,工厂模式的介绍相信大家都已经了然于心了,我就不再多叙述了。
总结
什么时候使用工厂模式
以下几种情景下工厂模式特别有用:
1.对象的构建十分复杂 2.需要依赖具体环境创建不同实例 3.处理大量具有相同属性的小对象
什么时候不该用工厂模式
不滥用运用工厂模式,有时候仅仅只是给代码增加了不必要的复杂度,同时使得测试难以运行下去。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 深入理解JavaScript系列(37):设计模式之享元模式详解
- jQuery插件开发的五种形态小结
- 深入理解JavaScript系列(36):设计模式之中介者模式详解
- 百度UEditor编辑器如何关闭抓取远程图片功能
- jQuery实现复选框成对选择及对应取消的方法
- js实现文本框中输入文字页面中div层同步获取文本框内容的方法
- JS实现文字放大效果的方法
- jQuery实现的感应鼠标悬停图片色彩渐显效果
- js给网页加上背景音乐及选择音效的方法
- 分享一则JavaScript滚动条插件源码
- 深入理解JavaScript系列(35):设计模式之迭代器模式详解
- jQuery选择器之基本选择器与层次选择器
- JS实现在网页中弹出一个输入框的方法
- 深入理解JavaScript系列(34):设计模式之命令模式详解
- 深入理解JavaScript系列(33):设计模式之策略模式详解
- JavaScript模拟重力状态下抛物运动的方法
- 深入理解JavaScript系列(31):设计模式之代理模式详解
- 深入理解JavaScript系列(30):设计模式之外观模式详解
- jQuery对象与DOM对象之间的相互转换