• js设计模式-工厂模式(XHR工厂)


    场景:如果代码中需要多次执行Ajax请求,那么明智的做法是把创建这种对象的代码提取到一个类中,并创建一个包装器来包装在实际请求时所要经历的一系列步骤。简单工厂非常适合这种场合。

     1 /*AjaxHandler interface*/
     2     var AjaxHandler = new Interface("AjaxHandler",["request","createXhrObject"]);
     3     
     4     /*SimpleHandler class.*/
     5     var SimpleHandler = function(){};
     6     SimpleHandler.prototype = {
     7         request:function(method,url,callback,postVals){
     8             var xhr = this.createXhrObject();
     9             xhr.onreadystatechange = function(){
    10                 if(xhr.readyState !==4)return;
    11                 xhr.status === 200 ? callback.success(xhr.responseText,xhr.responseXML):
    12                 callback.failure(xhr.status);
    13             };
    14             xhr.open(method,url,true);
    15             if(method != "POST")postVals = null;
    16             xhr.send(postVals);
    17         },
    18         createXhrObject:function(){
    19             var methods = [
    20                 function(){return new XMLHttpRequest();},
    21                 function(){return new ActiveXObject("Msxml2.XMLHTTP");},
    22                 function(){return new ActiveXObject("Microsoft.XMLHTTP");}
    23             ];
    24             
    25             for(var i=0, len=methods.length;i<len;i++){
    26                 try{
    27                     methods[i]();
    28                 }catch(e){
    29                     alert("error");
    30                     continue;
    31                 }
    32                 console.log("method["+i+"]",methods[i]); //记住该方法
    33                 this.createXhrObject = methods[i];
    34                 return methods[i]();
    35             }
    36             throw new Error("SimpleHandler:could not create an XHR object");
    37         }
    38     }
    39     
    40     var myHandler = new SimpleHandler();
    41     var callback = {
    42         success:function(responseText){alert("success:" +responseText);},
    43         failure:function(statusCode){alert("statusCode"+statusCode);}
    44     }
    45     myHandler.request("get","a.php",callback);
    46     //第二次请求Ajax,如果是chrome浏览器,那么调用createXhrObject的时候,this.createXhrObject直接存储的是methods[0];如果是老版本的IE,那么直接调用的是new ActiveXObject
    47     myHandler.request("POST","b.php",callback,"username=zap");

     说明:在首次执行时,它会依次尝试三种用于创建XHR对象的不同方法,一旦遇到一种管用的,他就会返回所创建的对象并将其自身改为用以创建那个对象的函数。这个函数摇身一变成了createXhrObject方法,这种技术称为memoizing,它可以用来创建存储着复杂计算的函数和方法,以免再次进行这种计算。

  • 相关阅读:
    快速开始使用Graph-tool
    graph-tool文档(一)- 快速开始使用Graph-tool
    graph-tool文档(一)- 快速开始使用Graph-tool
    graph-tool文档(一)- 快速开始使用Graph-tool
    -bash: /bin/rm: Argument list too long的解决办法【转】
    SELinux 入门【转】
    gnuplot生成MySQL QPS图形
    mysql状态查看 QPS/TPS/缓存命中率查看【转】
    Mysql中truncate table和delete语句的区别
    Linux(Centos )的网络内核参数优化来提高服务器并发处理能力【转】
  • 原文地址:https://www.cnblogs.com/tengri/p/5299646.html
Copyright © 2020-2023  润新知