再起航，我的学习笔记之JavaScript设计模式06(工厂方法模式)

我的学习笔记是根据我的学习情况来定期更新的，预计2-3天更新一章，主要是给大家分享一下，我所学到的知识，如果有什么错误请在评论中指点出来，我一定虚心接受，那么废话不多说开始我们今天的学习分享吧！

上一次已经给大家介绍了简单工厂模式，相信大家对创建型设计模式有了初步的了解，本次我将给大家介绍的是工厂方法模式。

工厂方法模式

工厂方法模式(Factory Method)：通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。

这样说起来可能还是有很多人不理解，那么我们开始用示例来演示工厂方法模式吧

假如我们需要做一个商城的项目商城的项目里有很多板块，比如蔬果区，生鲜区，日用百货区，等等一些，他们可能所在的区域在页面中主色调完全不一样，按照我们之前分享的简单工厂模式的做法，我们也许会这样做。

创建一个蔬果区

var Vegetable=function(content){
	this.content=content;
	//创建闭包对象，直接执行，将内容样式直接插入页面
	(function(content){
		var vegetable=document.createElement('div');
		vegetable.innerHTML=content;
		vegetable.style.color='green';
		//我们页面会定义个id名为container的区域放置这些模块
		document.getElementById('container').appendChild(vegetable);
	})(content)
}

接着我们创建一个生鲜区

var Fresh=function(content){
	this.content=content;
	//创建闭包对象，直接执行，将内容样式直接插入页面
	(function(content){
		var fresh=document.createElement('div');
		fresh.innerHTML=content;
		fresh.style.color='blue';
		//我们页面会定义个id名为container的区域放置这些模块
		document.getElementById('container').appendChild(fresh);
	})(content)
}

最后我们再创建一个日用百货区

var DailyProvisions=function(content){
	this.content=content;
	//创建闭包对象，直接执行，将内容样式直接插入页面
	(function(content){
		var dailyProvisions=document.createElement('div');
		dailyProvisions.innerHTML=content;
		dailyProvisions.style.color='gray';
		//我们页面会定义个id名为container的区域放置这些模块
		document.getElementById('container').appendChild(dailyProvisions);
	})(content)
}

现在我们创建一个商城类工厂

var mallFactory=function (name,text){
	switch(name){
		case 'Vegetable':
		return new Vegetable(text);
		case 'Fresh':
		return new Fresh(text);
		case 'DailyProvisions':
		return new DailyProvisions(text);
	}
}

最后我们测试一下

var vegetableTest=mallFactory("Vegetable","蔬果区");
var vegetableTest=mallFactory("Fresh","生鲜区");
var vegetableTest=mallFactory("DailyProvisions","日用百货区");

我们看到在页面上显示成功

但是这个时候如果我们想要在加一个家电区，要用不同的颜色代替，我们会发现，我们不仅要新建一个家电类，还要在商城的工厂里添加对应的类型，会很麻烦，那么这个时候我们就可以用工厂方法模式。

首先我们来创建一个工厂类

var Factory=function(type,content){
	if(this instanceof Factory){
		var o=new this[type](content);
		return o;
	}else{
		return new Factory(type,content);
	}
}

接着我们把我们需要创建的所有类型的父类添加到我们的工厂里去

Factory.prototype={
	 Vegetable:function(content){
	this.content=content;
		//创建闭包对象，直接执行，将内容样式直接插入页面
		(function(content){
			var vegetable=document.createElement('div');
			vegetable.innerHTML=content;
			vegetable.style.color='green';
			//我们页面会定义个id名为container的区域放置这些模块
			document.getElementById('container').appendChild(vegetable);
		})(content)
	},
	 Fresh:function(content){
	this.content=content;
		//创建闭包对象，直接执行，将内容样式直接插入页面
		(function(content){
			var fresh=document.createElement('div');
			fresh.innerHTML=content;
			fresh.style.color='blue';
			//我们页面会定义个id名为container的区域放置这些模块
			document.getElementById('container').appendChild(fresh);
		})(content)
	},
 	DailyProvisions:function(content){
	this.content=content;
		//创建闭包对象，直接执行，将内容样式直接插入页面
		(function(content){
			var dailyProvisions=document.createElement('div');
			dailyProvisions.innerHTML=content;
			dailyProvisions.style.color='gray';
			//我们页面会定义个id名为container的区域放置这些模块
			document.getElementById('container').appendChild(dailyProvisions);
		})(content)
	}
}

这样我们就建立了一个工厂方法，现在我们要在想添加一个父类就可以直接添加在工厂里了，是不是方便很多，下面我们试着调用一下。

var data=[
	{name:'Vegetable',text:'蔬果区'},
	{name:'Fresh',text:'生鲜区'},
	{name:'DailyProvisions',text:'日用百货区'}
]
for(var i=0;i<data.length;i++){
	Factory(data[i].name,data[i].text);
}

我们再来看一下结果，得到的结果都是一样的，但是如果还需要添加基类，就只用想我们的工厂方法里添加一次就够了。

也谢谢大家看到这里：）如果你觉得我的分享还可以请点击推荐，分享给你的朋友让我们一起进步~

好了以上就是本次分享的全部内容，本次示例参考自JavaScript设计模式一书，让我们一点点积累一点点成长，希望对大家有所帮助。

欢迎转载，转载请注明作者，原文出处。