在看本文章之前,建议先看看这篇文章javascript设计模式之单体模式 ,毕竟个人感觉循序渐进的好。
工厂模式分为简单工厂模式和复杂工厂模式,前者是使用一个类来生成实例,通常是一个单体,后者是使用子类来决定一个成员变量是哪个类的具体实例,也就是简单工厂包含在复杂工厂之中。
下面通过一个具体的实例来具体的说说这工厂的一二吧。
用Ajax技术发起异步请求是现在web开发中的一个常见任务。
1
//
implements AjaxHandler,创建一个复杂的工厂来执行Ajax的一系列流程,里面包含了两个简单工厂
2 var SimpleHandler = function (){};
3
4 SimpleHandler.prototype = {
5 // 第一个简单工厂执行Ajax的创建,请求,发送。。。等
6 request: function (method,url,callback,postVars){
7 var xhr = this .createXhrObject();
8 xhr.onreadystatechange = function (){
9 if (xhr.readyState != 4 ) return ;
10 (xhr.status == 200 ) ?
11 // 定义了一个全局对象callback来执行对返回参数的应用
12 callback.success(xhr.responseText,xhr.responseXML):
13 callback.failure(xhr.status);
14 };
15 xhr.open(method,url, true );
16 if (method != " POST " ) postVars = null ;
17 xhr.send(postVars);
18 },
19 // 第二个简单工厂是根据不同的情创建XHR对象,不论什么情况他都能返回一个正确的XHR对象
20 createXhrObject: function (){
21 var methods = [
22 function (){ return new XMLHttpRequest();},
23 function (){ return new ActiveXObject( ' Msxml2.XMLHttp ' );},
24 function (){ return new ActiveXObject( ' Microsoft.XMLHttp ' );}
25 ];
26 for ( var i = 0 ; i < 3 ; i ++ ){
27 try {
28 methods[i]();
29 } catch (e){
30 continue ;
31 }
32 this .createXhrObject = methods[i]();
33 return methods[i]();
34 }
35 throw new Error( " Error! " );
36 }
37 }
38
2 var SimpleHandler = function (){};
3
4 SimpleHandler.prototype = {
5 // 第一个简单工厂执行Ajax的创建,请求,发送。。。等
6 request: function (method,url,callback,postVars){
7 var xhr = this .createXhrObject();
8 xhr.onreadystatechange = function (){
9 if (xhr.readyState != 4 ) return ;
10 (xhr.status == 200 ) ?
11 // 定义了一个全局对象callback来执行对返回参数的应用
12 callback.success(xhr.responseText,xhr.responseXML):
13 callback.failure(xhr.status);
14 };
15 xhr.open(method,url, true );
16 if (method != " POST " ) postVars = null ;
17 xhr.send(postVars);
18 },
19 // 第二个简单工厂是根据不同的情创建XHR对象,不论什么情况他都能返回一个正确的XHR对象
20 createXhrObject: function (){
21 var methods = [
22 function (){ return new XMLHttpRequest();},
23 function (){ return new ActiveXObject( ' Msxml2.XMLHttp ' );},
24 function (){ return new ActiveXObject( ' Microsoft.XMLHttp ' );}
25 ];
26 for ( var i = 0 ; i < 3 ; i ++ ){
27 try {
28 methods[i]();
29 } catch (e){
30 continue ;
31 }
32 this .createXhrObject = methods[i]();
33 return methods[i]();
34 }
35 throw new Error( " Error! " );
36 }
37 }
38
看到这里,工厂模式大体就是对单体模式的进一步扩展和应用,上面的实例可以这样来调用:
1
window.onload
=
function
(){
2 var myHandler = new SimpleHandler();
3 var callback = {
4 success: function (responseText,responseXML){alert( " Success: " + responseXML);},
5 failure: function (statusCode){alert( " Failure " + statusCode);}
6 };
7 myHandler.request( ' GET ' , ' innerHTML.xml ' ,callback);
8
9 }; // 当然根据不同的情况,callback也就不同了
2 var myHandler = new SimpleHandler();
3 var callback = {
4 success: function (responseText,responseXML){alert( " Success: " + responseXML);},
5 failure: function (statusCode){alert( " Failure " + statusCode);}
6 };
7 myHandler.request( ' GET ' , ' innerHTML.xml ' ,callback);
8
9 }; // 当然根据不同的情况,callback也就不同了
通过使用工厂模式而不是使用new关键字及具体的类,可以把所有的实例代码集中到一个位置。
使用工厂模式,你可以先创建一个抽象的父类,然后在子类中创建工厂方法,从而把成员对象的实例化推迟到更专门的子类当中,他可以有效的防止代码重复。