1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Javascript高级语法10-工厂模式实例xhr</title> 6 </head> 7 <body> 8 <script> 9 //接口 10 var Interface = function(name,methods){ 11 if(arguments.length != 2){ 12 alert("interface must have two paramters..."); 13 } 14 this.name = name;//这个是接口的名字 15 this.methods = [];//定义个空数组来转载函数名 16 for (var i = 0; i < methods.length; i++) { 17 if(typeof methods[i] != "string"){ 18 alert("method name must is String ...") 19 }else{ 20 this.methods.push(methods[i]) 21 } 22 } 23 } 24 //定义接口的一个静态方法来实现接口与实现类的直接检验 25 //静态方法不要写成Interface.prototype.* 因为这是写到接口原型连上的 26 //我们要把静态的函数直接写到类层次上 27 Interface.ensureImplements = function(object){ 28 if(arguments.length<2){ 29 alert("必须最少是2个参数"); 30 return false; 31 } 32 //遍历 33 for (var i = 1; i < arguments.length; i++) { 34 var inter = arguments[i]; 35 //如果你是接口就必须是Interface类型的 36 if(inter.constructor != Interface){ 37 throw new Error("if is interface class must is Interface type"); 38 } 39 //遍历函数集合并分析 40 for (var j = 0; j < inter.methods.length; j++) { 41 var method = inter.methods[j]; 42 //实现类中必须有方法名字 和 接口中所有的方法名项目 43 if(!object[method] || typeof object[method] != "function"){ 44 throw new Error("实现类并且没有完全实现接口中的所有方法..."); 45 } 46 } 47 } 48 } 49 50 //xhr工厂 51 function demo1(){ 52 //Ajax操作接口 53 var AjaxHandler = new Interface("AjaxHandler",["request","createXHRObject"]); 54 //ajax简单实现类 55 var Simplehandler = function(){}; 56 Simplehandler.prototype = { 57 /*method: get/post 58 *url 请求地址 59 * callback 回调函数 60 * postVars 传入参数 61 */ 62 request:function(method,url,callback,postVars){ 63 //1.得到xhr对象 64 var xhr = this.createXHRObject(); 65 xhr.onreadystatechange = function(){ 66 if(xhr.readyState != 4){ //4代表的意思是交互完成 67 return; 68 } 69 //200正常交互完成 404 文件没找到 500内部程序出现错误 70 (xhr.status == 200)?callback.success(xhr.responseText,xhr.responseXML): 71 callback.failure(xhr.status); 72 } 73 //打开链接 74 xhr.open(method,url,true);//true设置异步 75 //设置参数 76 if(method != "POST"){ 77 postVars = null; 78 } 79 xhr.send(postVars); 80 81 }, 82 createXHRObject:function(){ 83 var methods = [ 84 //针对不同的浏览器用不同的方法 85 function(){return new XMLHttpRequest();}, 86 function(){return new ActiveObject('Msxml2.XMLHTTP');}, 87 function(){return new ActiveObject('Microsoft.XMLHTTP');}, 88 ] 89 //利用try catch制作一个智能循环体 90 for(var i=0;i<methods.length;i++){ 91 try{ 92 methods[i](); 93 } 94 catch(e){ 95 continue; 96 } 97 //这句话非常重要，只有这样才能确保 不用每次请求都循环数组 98 this.createXHRObject = methods[i]; 99 return methods[i](); 100 } 101 //如果全不对的话就显式报错 102 throw new Error("Error"); 103 } 104 } 105 106 //实验 107 var myHandler = new Simplehandler(); 108 var callback = { 109 success:function(responseText){ 110 alert("Ok") 111 }, 112 failure:function(status){ 113 alert("failure") 114 } 115 } 116 myHandler.request("GET","",callback); 117 } 118 119 demo1(); 120 /* 121 * 工厂模式使用场合： 122 * 1.动态实现，创建一些用不同方式实现的同一接口 123 * 可以被同等对待的一系列类，我们可以用工厂模式来实例化 124 * 2.节省设置开销，和子系统组合 125 * 针对不同情况的子系统，进行模块层次的收集，使其子系统使用起来变得更简单。 126 * 利与弊： 127 * 松耦合，把创建类等复杂的过程交给工厂来完成，程序员有时间和经历放到重点业务上 128 * 129 * 弊端：工厂好用，但处理起来很复杂 130 * 代码复杂度会随之增高，一般的程序员很难驾驭 131 * 一般的简单的类 推荐还是用new 比较好 132 */ 133 </script> 134 </body> 135 </html>