JavaScript设计模式-10.工厂模式实例xhr 

  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>

 

posted @ 2017-07-16 21:02  橙云生  阅读(184)  评论(0)    收藏  举报