欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript設計模式--簡單工廠模式實例分析【XHR工廠案例】

 更新時間：2020年05月23日 08:49:38   作者：WFaceBoss  
這篇文章主要介紹了JavaScript設計模式--簡單工廠模式,結合實例形式分析了JavaScript設計模式中簡單工廠模式原理與XHR工廠應用案例,需要的朋友可以參考下

本文實例講述了JavaScript設計模式--簡單工廠模式。分享給大家供大家參考，具體如下：

第一步，Ajax操作接口（目的是起一個接口檢測作用）

（1）引入接口文件

//定義一個靜態(tài)方法來實現(xiàn)接口與實現(xiàn)類的直接檢驗
//靜態(tài)方法不要寫出Interface.prototype ,因為這是寫到接口的原型鏈上的
//我們要把靜態(tài)的函數(shù)直接寫到類層次上
//(1)定義一個接口類
var Interface=function (name,methods) {//name：接口名字
 if(arguments.length<2){
  alert("必須是兩個參數(shù)")
 }
 this.name=name;
 this.methods=[];//定義一個空數(shù)組裝載函數(shù)名
 for(var i=0;i<methods.length;i++){
  if(typeof methods[i]!="string"){
   alert("函數(shù)名必須是字符串類型");
  }else {
   this.methods.push( methods[i]);
  }
 }
};
Interface.ensureImplement=function (object) {
 if(arguments.length<2){
  throw new Error("參數(shù)必須不少于2個")
  return false;
 }
 for(var i=1;i<arguments.length;i++){
  var inter=arguments[i];
  //如果是接口就必須是Interface類型
  if(inter.constructor!=Interface){
   throw new Error("如果是接口類的話，就必須是Interface類型");
  }
  //判斷接口中的方法是否全部實現(xiàn)
  //遍歷函數(shù)集合
  for(var j=0;j<inter.methods.length;j++){
   var method=inter.methods[j];//接口中所有函數(shù)

   //object[method]傳入的函數(shù)
   //最終是判斷傳入的函數(shù)是否與接口中所用函數(shù)匹配
   if(!object[method]||typeof object[method]!="function" ){//實現(xiàn)類中必須有方法名字與接口中所用方法名相同
    throw new Error("實現(xiàn)類中沒有完全實現(xiàn)接口中的所有方法")
   }
  }
 }
}

第二步，實例化一個可以具體的ajax接口

var AjaxHandler=new Interface("AjaxHandler",["request","createXhrObject"]);

第三步，針對接口的ajax實現(xiàn)類

（1）定義一個空類

var SimpleHandler=function(){};

（2）在該空類上直接擴展原型---實現(xiàn)接口里面的方法

 SimpleHandler.prototype={
  /*
  * method:get post
  * url:請求地址
  * callback:回調函數(shù)
  * postVars：傳入?yún)?shù)
  * */
  request:function (method,url,callback,postVars) {
     //1，使用工廠得到xhr對象
   var xhr=this.createXhrObject();

   xhr.onreadystatechange=function () {
    //4代表的意思是交互完成
    if(xhr.readyState!=4) return;
     //200值的是正常交互完成
     //404文件未找到
     //500 內(nèi)部程序出錯
     (xhr.status==200)?callback.success(xhr.responseText,xhr.responseXML):
     callback.failure(xhr.status);
   }
   //打開鏈接
   xhr.open(method,url,true);
   //設置參數(shù)
   if(method!="POST"){
    postVars=null;
   }
   xhr.send(postVars);
  },
  //2，獲取xhr的方法--不同瀏覽器不一樣
  createXhrObject:function () {
   var methods=[
    function () {return new XMLHttpRequest();},
    function () {return new ActiveXObject("Microsoft.XMLHTTP");}
   ];
   //利用try--catch 制作一個智能循環(huán)體
      for(var i=0;i<methods.length;i++){
       try{
        methods[i]();
       }catch(e) {
        continue;//回到循環(huán)開始的地方重新開始
       }
       this.createXhrObject=methods[i]();//非常重要，只有這樣才能確保不用每一次請求，全循環(huán)數(shù)組
       return methods[i]();
      }
   //如果全不對則報錯
   throw new Error("error");
  }
 };

第三步，使用檢驗

（1）實例化對象

var myHandler=new SimpleHandler();

（2）接口檢驗實現(xiàn)類是否完全實現(xiàn)接口中的方法

Interface.ensureImplement(myHandler,AjaxHandler);
//檢驗是否實現(xiàn)接口中所有方法

（3）定義一個回調對象

 var callback={
  success:function (responseText) {
   alert("ok");
  },
   failure:function (status) {
   alert(status+"failure")
   }
  };

（4）最終的使用格式

myHandler.request("POST","http://www.baidu.com",callback);
//若url為""會默認為本地的鏈接，其他正確的鏈接，會出現(xiàn)跨域問題

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

最新評論