萬盛學電腦網 >> 腳本專題 >> 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？如果能夠解決跨浏覽器問題的話，其實完全可以做出一個搜索欄插件來!
- 上一頁:jquery返回頂部代碼
- 下一頁:js可展開收縮的懸浮QQ在線客服腳本
