快捷導(dǎo)航

JavaScript 模式之工廠模式(Factory)應(yīng)用介紹

更新時(shí)間：2012年11月15日 14:15:13 作者：

工廠模式也是對(duì)象創(chuàng)建模式之一，它通常在類或類的靜態(tài)方法中去實(shí)現(xiàn),本文將詳細(xì)介紹JavaScript 工廠模式

工廠模式也是對(duì)象創(chuàng)建模式之一，它通常在類或類的靜態(tài)方法中去實(shí)現(xiàn)。構(gòu)造對(duì)象的一種方式是使用new操作符，但使用new時(shí)正是針對(duì)實(shí)現(xiàn)編程，會(huì)造成“耦合”問(wèn)題，與具體的類關(guān)系緊密。導(dǎo)致代碼更脆弱，缺乏彈性，在復(fù)雜邏輯的項(xiàng)目中建議是面向接口編程。
先看簡(jiǎn)單工廠模式

復(fù)制代碼代碼如下:

 
Person(name, age) { 
var obj = {} 
obj.name = name 
obj.age = age 
return obj 
} 
var p1 = Person('jack', 25) 
var p2 = Person('lily', 22) 

與構(gòu)造函數(shù)方式寫(xiě)一個(gè)類的區(qū)別在于沒(méi)有使用this，而是每次都構(gòu)造一個(gè)空對(duì)象，然后給其添加屬性。創(chuàng)建對(duì)象方式不是使用new，而是使用函數(shù)調(diào)用方式。這種方式基本上用來(lái)替代一個(gè)類（具有相同屬性的對(duì)象），而復(fù)雜一些的工廠則可以造不同類型的對(duì)象。
下面以個(gè)水果工廠示例

復(fù)制代碼代碼如下:

 
function Banana() { 
this.price = '$1.5' 
} 
function Apple() { 
this.price = '$1.2' 
} 
function Orange() { 
this.price = '$2.2' 
} 
// 靜態(tài)工廠類 
function Fruit() {} 
Fruit.factory = function(type) { 
if (!window[type]) { 
return 
} 
var fruit = new window[type] 
return fruit 
} 
// 制造不同的水果 
var banana = Fruit.factory('Banana') 
var apple = Fruit.factory('Apple') 
var orange = Fruit.factory('Orange') 

有三個(gè)水果類Banana、Apple、Orange，一個(gè)水果工廠類Fruit，通過(guò)靜態(tài)方法factory每次可以造出不同的水果類對(duì)象。
工廠模式在JavaScript原生對(duì)象Object也有所體現(xiàn)，比如

復(fù)制代碼代碼如下:

 
var obj = Object(), 
num = Object(1), 
str = Object('s'), 
boo = Object(false); 

Object就是一個(gè)工廠，根據(jù)參數(shù)不同會(huì)構(gòu)造出不同的對(duì)象。obj是一個(gè)空對(duì)象，num是一個(gè)Number類型的對(duì)象，str是一個(gè)String類型的對(duì)象，boo是Boolean類型的對(duì)象。
jQuery.Callbacks也是一個(gè)工廠，每次調(diào)用它都會(huì)返回一個(gè)具有add, remove, fire等方法的對(duì)象。還可以根據(jù)參數(shù)如“once”， “memory”等構(gòu)造出具有不同性質(zhì)的對(duì)象。

所謂的工廠模式，是指可以返回一個(gè)對(duì)象的方法。
利用這種模式，我們可以做什么呢？假設(shè)我不滿足現(xiàn)有的DOM對(duì)象里面所擁有的方法，我想要增加一個(gè)自定義的方法叫sayHello，我們可以這樣做:

復(fù)制代碼代碼如下:

 
function RemouldNodeObj(DomNode){ 
//先判斷一下傳遞進(jìn)來(lái)的參數(shù)是不是一個(gè)Dom節(jié)點(diǎn) 
if(typeof DomNode == "object" && DomNode.nodeType == 1){ 
DomNode.say = function(){ 
alert("Hello!!"); 
} 
}else{ 
alert("你傳遞進(jìn)來(lái)的參數(shù)不正確!"); 
} 
} 

//這樣調(diào)用: 
window.onload = function(){ 
var oDiv = RemouldNodeObj(document.getElementById("test")); 
//通過(guò)這一步，oDiv就擁有了新的方法say 
oDiv.say(); 
} 

有了上面的基礎(chǔ)后，我們來(lái)實(shí)現(xiàn)點(diǎn)復(fù)雜的功能，我們要實(shí)現(xiàn)只要通過(guò)js的調(diào)用就生成一個(gè)簡(jiǎn)單的form表單，看代碼:

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>JavaScript之工廠模式</title> 
<script type="text/javascript"> 
function RemouldNodeObj(DOMnode){ 
//先判斷一下傳遞進(jìn)來(lái)的參數(shù)是不是一個(gè)Dom節(jié)點(diǎn) 
if(typeof DOMnode == "object" && DOMnode.nodeType == 1){ 
DOMnode.createForm = function(opt){ 
//下面是一大串的字符串加法,只是為了拼裝出form元素 
var oForm = ""; 
oForm += "<form action=\"" + opt.action + "\" "; 
oForm += "method=\"" + (opt.method || 'GET') + "\" id=\""; 
oForm += (opt.id || "") + "\""; 
oForm += "style=\"width:200px;height:30px;border:2px solid #223344\">"; 
oForm += "</form>"; 
//這里的this不要想得太復(fù)雜，誰(shuí)調(diào)用就指向誰(shuí)，所以this指向 oDiv 
this.innerHTML = oForm; 
} 
}else{ 
alert("參數(shù)不正確!"); 
} 
return DOMnode; 
} 

//這樣調(diào)用 
window.onload = function(){ 
var oDiv = RemouldNodeObj(document.getElementById("custom")); 
oDiv.createForm({ 
'action' : 'index.jsp', 
'method' : 'post', 
'id' : 'myForm' 
}); 
} 
</script> 
</head> 

<body> 
<div id="custom">###</div> 
</body> 
</html> 