工厂模式也是对象创建模式之一它通常在类或类的静态方法中去实现构造对象的一种方式是使用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>
<body>
<div id="custom">###</div>
</body>
</html>
看到了没？这样的调用方式是不是很像jQuery？如果能够解决跨浏览器问题的话其实完全可以做出一个搜索栏插件来!
