JavaScript 模式之工廠模式(Factory)應(yīng)用介紹
2024-05-06 14:20:51
供稿：網(wǎng)友
工廠模式也是對(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)單工廠模式
代碼如下:
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ù)方式寫一個(gè)類的區(qū)別在于沒(méi)有使用this，而是每次都構(gòu)造一個(gè)空對(duì)象，然后給其添加屬性。創(chuàng)建對(duì)象方式不是使用new，而是使用函數(shù)調(diào)用方式。這種方式基本上用來(lái)替代一個(gè)類（具有相同屬性的對(duì)象），而復(fù)雜一些的工廠則可以造不同類型的對(duì)象。
下面以個(gè)水果工廠示例
代碼如下:
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)，比如
代碼如下:
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，我們可以這樣做:
代碼如下:
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表單，看代碼:
