萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JavaScript模式之工廠模式(Factory)應用介紹

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

工廠模式也是對象創建模式之一,它通常在類或類的靜態方法中去實現。構造對象的一種方式是使用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,而是使用函數調用方式。這種方式基本上用來替代一個類(具有相同屬性的對象),而復雜一些的工廠則可以造不同類型的對象。
下面以個水果工廠示例

代碼如下:
function Banana() {
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(typeof DomNode == "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表單,看代碼:

代碼如下:
<html>
<head>
<title>JavaScript之工廠模式</title>
<script type="text/javascript">
function RemouldNodeObj(DOMnode){
//先判斷一下傳遞進來的參數是不是一個Dom節點
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不要想得太復雜,誰調用就指向誰,所以this指向 oDiv
this.innerHTML = oForm;
}
}else{
alert("參數不正確!");
}
return DOMnode;
}

//這樣調用
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>

看到了沒?這樣的調用方式是不是很像jQuery?如果能夠解決跨浏覽器問題的話,其實完全可以做出一個搜索欄插件來!

copyright © 萬盛學電腦網 all rights reserved