您的位置:首页 > Web前端 > JavaScript

JS设计模式之工厂模式

2016-05-28 11:40 459 查看
介绍

工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类,而是定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。

这个模式十分有用,尤其是创建对象按流程赋值的时候,比如依赖于很多设置文件等。并且,也会经常在程序里看到工厂方法,用于让子类定义需要创建的对象类型。

正文

工厂模式也是很简单,直接上代码,在代码中就会很快明白了:

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);


读完代码,相信工厂模式也就了然于心了。

总结

以下几种情景工厂模式特别有用:

对象的构建十分复杂

需要依赖具体环境创建不同实例

处理大量具有相同属性的小对象

但是也不能滥用工厂模式,否则会给代码增加不必要的复杂度,同时使得测试难以运行下去。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息