简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

深入理解JavaScript系列(28):设计模式之工厂模式详解

来源:易贤网   阅读:4014 次  日期:2015-03-06 11:04:21

温馨提示:易贤网小编为您整理了“深入理解JavaScript系列(28):设计模式之工厂模式详解”,方便广大网友查阅!

这篇文章主要介绍了深入理解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);

至此,工厂模式的介绍相信大家都已经了然于心了,我就不再多叙述了。

更多信息请查看IT技术专栏

更多信息请查看脚本栏目
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:深入理解JavaScript系列(29):设计模式之装饰者模式详解
下一篇:深入理解JavaScript系列(31):设计模式之代理模式详解
易贤网手机网站地址:深入理解JavaScript系列(28):设计模式之工厂模式详解
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!