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

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

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

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

復制代碼代碼如下:

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

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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

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

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

復制代碼代碼如下:

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

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

有了上面的基礎后，我們來實現(xiàn)點復雜的功能，我們要實現(xiàn)只要通過js的調(diào)用就生成一個簡單的form表單，看代碼:

復制代碼代碼如下:

 
<html> 
<head> 
<title>JavaScript之工廠模式</title> 
<script type="text/javascript"> 
function RemouldNodeObj(DOMnode){ 
//先判斷一下傳遞進來的參數(shù)是不是一個Dom節(jié)點 
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不要想得太復雜，誰調(diào)用就指向誰，所以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> 