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

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

　　代碼如下:
Person(name age) {
var obj = {}
objname = name
objage = age
return obj
}
var p = Person(jack )
var p = Person(lily )

　　與構造函數方式寫一個類的區別在於沒有使用this而是每次都構造一個空對象然後給其添加屬性創建對象方式不是使用new而是使用函數調用方式這種方式基本上用來替代一個類（具有相同屬性的對象）而復雜一些的工廠則可以造不同類型的對象
下面以個水果工廠示例

　　代碼如下:
function Banana() {
thisprice = $
}
function Apple() {
thisprice = $
}
function Orange() {
thisprice = $
}
// 靜態工廠類
function Fruit() {}
Fruitfactory = function(type) {
if (!window[type]) {
return
}
var fruit = new window[type]
return fruit
}
// 制造不同的水果
var banana = Fruitfactory(Banana)
var apple = Fruitfactory(Apple)
var orange = Fruitfactory(Orange)

　　有三個水果類BananaAppleOrange一個水果工廠類Fruit通過靜態方法factory每次可以造出不同的水果類對象
工廠模式在JavaScript原生對象Object也有所體現比如

　　代碼如下:
var obj = Object()
num = Object()
str = Object(s)
boo = Object(false);

　　Object就是一個工廠根據參數不同會構造出不同的對象obj是一個空對象num是一個Number類型的對象str是一個String類型的對象boo是Boolean類型的對象
jQueryCallbacks也是一個工廠每次調用它都會返回一個具有add remove fire等方法的對象還可以根據參數如“once” “memory”等構造出具有不同性質的對象

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

　　代碼如下:
function RemouldNodeObj(DomNode){
//先判斷一下傳遞進來的參數是不是一個Dom節點
if(typeof DomNode == "object" && DomNodenodeType == ){
DomNodesay = function(){
alert("Hello!!");
}
}else{
alert("你傳遞進來的參數不正確!");
}
}

　　//這樣調用:
windowonload = function(){
var oDiv = RemouldNodeObj(documentgetElementById("test"));
//通過這一步oDiv就擁有了新的方法say
oDivsay();
}

　　有了上面的基礎後我們來實現點復雜的功能我們要實現只要通過js的調用就生成一個簡單的form表單看代碼:

　　代碼如下:
<html>
<head>
<title>JavaScript之工廠模式</title>
<script type="text/javascript">
function RemouldNodeObj(DOMnode){
//先判斷一下傳遞進來的參數是不是一個Dom節點
if(typeof DOMnode == "object" && DOMnodenodeType == ){
DOMnodecreateForm = function(opt){
//下面是一大串的字符串加法只是為了拼裝出form元素
var oForm = "";
oForm += "<form action="" + optaction + "" ";
oForm += "method="" + (optmethod || GET) + "" id="";
oForm += (optid || "") + """;
oForm += "style="width:px;height:px;border:px solid #">";
oForm += "</form>";
//這裡的this不要想得太復雜誰調用就指向誰所以this指向 oDiv
thisinnerHTML = oForm;
}
}else{
alert("參數不正確!");
}
return DOMnode;
}

　　//這樣調用
windowonload = function(){
var oDiv = RemouldNodeObj(documentgetElementById("custom"));
oDivcreateForm({
action : indexjsp
method : post
id : myForm
});
}
</script>
</head>

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

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19973.html