溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript如何引入橋梁模式

發(fā)布時間:2020-07-22 14:55:58 來源:億速云 閱讀:135 作者:小豬 欄目:web開發(fā)

這篇文章主要講解了JavaScript如何引入橋梁模式,內容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。

1.使用情況

(1)事件的監(jiān)控

#1,利用頁面的button來選擇寵物的例子(思路)

button.addEvent(element,"click",getPetByBame);
  function getPetByBame(e){
    var id = this.id;
    asyncRquest("GET",'pet.action?id='+id,function(pet){
      consols.log("request pet"+pet.resopnseText)
    })
  }

#2,addEvent函數

/*obj:需要增加事件的對象
* type:事件名稱
* fn:執(zhí)行事件的函數
* */
function addEvent(obj,type,fn){//addEvent:為某個文檔節(jié)點增加事件的方法
  if(obj.addEventListener){//Mozilla中:
    obj.addEventListener(type,fn,false);
  }else if(obj.attachEvent){//IE中:
    obj["e"+type+fn] = fn;
    obj[type+fn] = function(){
      obj["e"+type+fn]()
    }
    obj.attachEvent("on"+type,fn)
  }
}

總結:該種方式對于單元測試很難進行

改進為用簡單的橋梁模式來解決

#1,后臺中的api

function getPetByBame(id,callBack){
    sayncRquest("GET",'url?id='+id,function(pet){
      callBack(pet)
    })

#2,橋梁

//定義一個橋梁叫抽象和實現相互聯系在一起
  addEvent(element,"click",getPetByNameBridge)
  function getPetByNameBridge(){
    getPetByBame(this.id,function(pet){
      consols.log("request pet"+pet.resopnseText);
    })
  }

總結:這種做法使API和展現層完全分離,API和展現層可以靈活的變動。

(2)特權函數

//特權函數
var privilege=function () {
  //信息全封閉,內部業(yè)務邏輯復雜,做成一個特權函數,使調用方便
  var complex=function (x,y) {
    //復雜的數學處理
  }

 this.bridge=function () { //提供公共接口,返回一個單體
   return {
     bridgeAdd:function () {
       //處理前
       complex(1,2);
       //處理后
     }

   }
 }
}

(3)多個類的連接

//多個類的連接
var class1=function (a,b) {
  this.a=a;
  this.b=b;
}
  var class2=function (e) {
    this.e=e;
  }
  //橋梁的連接
  var bridgeClass=function () {
    this.one=new Class1(1,2);
    this.two=new Class1(1);
  }
//目的:兩個類能獨立的修改,而門面的意義在于調用方便

橋梁模式:

JavaScript如何引入橋梁模式

看完上述內容,是不是對JavaScript如何引入橋梁模式有進一步的了解,如果還想學習更多內容,歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI