再起航，我的學習筆記之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設計模式一書，讓我們一點點積累一點點成長，希望對大家有所幫助。

歡迎轉載，轉載請注明作者，原文出處。