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

工廠模式也是物件創建模式之一，它通常在類別或類別的靜態方法中去實作。建構物件的一種方式是使用new操作符，但使用new時正是針對實作編程，會造成「耦合」問題，與具體的類別關係緊密。導致程式碼更脆弱，缺乏彈性，在複雜邏輯的專案中建議是面向介面程式設計。
先看簡單工廠模式

複製程式碼 程式碼如下:

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

與建構子方式寫一個類別的差別在於沒有使用this，而是每次都建構一個空對象，然後給其添加屬性。建立物件方式不是使用new，而是使用函數呼叫方式。這種方式基本上是用來取代一個類別（具有相同屬性的物件），而複雜一些的工廠則可以造出不同類型的物件。
下面以水果工廠範例

複製程式碼 程式碼如下:

程式碼如下:


) {
this.price = '$1.5'
}
function Apple() {
this.price = '$1.2'
}
function Orange() {
this .price = '$2.2'
}
// 靜態工廠類別
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，透過靜態方法factory每次可以造出不同的水果類物件。 工廠模式在JavaScript原生對象Object也有所體現，比如

複製代碼

代碼如下:


var obj = Object(),

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


Object就是一個工廠，根據參數不同會建構出不同的物件。 obj是空對象，num是Number類型的對象，str是一個String類型的對象，boo是Boolean類型的對象。
jQuery.Callbacks也是一個工廠，每次呼叫它都會傳回一個具有add, remove, fire等方法的物件。也可以依照參數如“once”， “memory”等建構出具有不同性質的物件。

所謂的工廠模式，是指可以回傳一個物件的方法。 利用這種模式，我們可以做些什麼呢？假設我不滿足現有的DOM物件裡面所擁有的方法，我想要增加一個自訂的方法叫sayHello，我們可以這樣做:

複製程式碼

程式碼如下:


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

//這樣呼叫:
window.onload = function(){
var oDiv = RemouldNodeObj(document.getElementById("test"));

//經過這一步驟，oDiv擁有了新的方法say
oDiv.say();
}

有了上面的基礎後，我們來實作點複雜的功能，我們要實作只要透過js的呼叫就產生一個簡單的form表單，看程式碼:

複製程式碼 程式碼如下:

###

看到了沒？這樣的呼叫方式是不是很像jQuery？如果能夠解決跨瀏覽器問題的話，其實完全可以做出一個搜尋欄插件來!