JavaScript設計模式--簡單工廠模式例子---XHR工廠

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

   （1）引入接口文件

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

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

  第二步，實例化一個能夠具體的ajax接口

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

第三步，針對接口的ajax實現類

 （1）定義一個空類

  var   SimpleHandler=function(){};

（2）在該空類上直接擴展原型---實現接口裏面的方法

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

            xhr.onreadystatechange=function () {
                //4表明的意思是交互完成
                if(xhr.readyState!=4)  return;
                    //200值的是正常交互完成
                    //404文件未找到
                    //500  內部程序出錯
                    (xhr.status==200)?callback.success(xhr.responseText,xhr.responseXML):
                    callback.failure(xhr.status);
            }
            //打開連接
            xhr.open(method,url,true);
            //設置參數
            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 製做一個智能循環體
                     for(var i=0;i<methods.length;i++){
                          try{
                             methods[i]();
                          }catch(e) {
                             continue;//回到循環開始的地方從新開始
                          }
                         this.createXhrObject=methods[i]();//很是重要，只有這樣才能確保不用每一次請求，全循環數組
                          return  methods[i]();
                     }
            //若是全不對則報錯
            throw  new Error("error");
        }
    };

第三步，使用檢驗

（1）實例化對象

  var myHandler=new SimpleHandler();

（2）接口檢驗實現類是否徹底實現接口中的方法

  Interface.ensureImplement(myHandler,AjaxHandler);//檢驗是否實現接口中全部方法

（3）定義一個回調對象

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

（4）最終的使用格式

   myHandler.request("POST","http://www.baidu.com",callback);//若url爲""會默認爲本地的連接，其餘正確的連接，會出現跨域問題