工厂模式也是对象创建模式之一，它通常在类或类的静态方法中去实现。构造对象的一种方式是使用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？如果能够解决跨浏览器问题的话，其实完全可以做出一个搜索栏插件来！
易网时代-编程资源站