JavaScript 디자인 모델-교량 모델 도입 작업 사례 분석

본 고 는 JavaScript 디자인 모델 인 교량 모델 도입 작업 을 실례 로 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
1.사용 현황
(1)사건 의 감시
\#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:       
* */
function addEvent(obj,type,fn){//addEvent：              
  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)
    })

교량

//                   
  addEvent(element,"click",getPetByNameBridge)
  function getPetByNameBridge(){
    getPetByBame(this.id,function(pet){
      consols.log("request pet"+pet.resopnseText);
    })
  }

요약:이러한 방법 은 API 와 표현 층 을 완전히 분리 시 키 고 API 와 표현 층 을 유연 하 게 변동 시 킬 수 있다.
(2)특권 함수

//    
var privilege=function () {
  //     ，        ，        ，     
  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);
  }
//  ：         ，            

교량 모드:

관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.