JavaScript 어댑터 모드 원리 와 용법 실례 상세 설명

본 고의 실례 는 자 바스 크 립 트 어댑터 모델 의 원리 와 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
어댑터 모드 는 기 존 인터페이스 와 호 환 되 지 않 는 클래스 사이 에서 어댑터 를 사용 할 수 있 으 며,이 모드 를 사용 하 는 대상 을 패키지(wrapper)라 고도 부른다.왜냐하면 이것 은 새로운 인터페이스 로 다른 대상 을 포장 하고 있 기 때문이다.
기본 이론
어댑터 모드:하나의 인 터 페 이 스 를 클 라 이언 트 가 필요 로 하 는 인터페이스 로 바 꾸 고 클 라 이언 트 코드 를 수정 하지 않 아 도 되 며 호 환 되 지 않 는 코드 를 함께 작업 할 수 있 습 니 다.
어댑터 는 주로 세 개의 캐릭터 로 구성 되 어 있 습 니 다.
(1)클 라 이언 트:인터페이스 클래스 호출
(2)어댑터:클 라 이언 트 인터페이스 와 서 비 스 를 제공 하 는 인 터 페 이 스 를 연결 하 는 클래스
(3)어댑터:서 비 스 를 제공 하지만 클 라 이언 트 인터페이스 수요 와 호 환 되 지 않 습 니 다.
여기에 두 수의 덧셈 에 관 한 실례 가 하나 있다.
첫째,두 개의 덧셈 을 실현 할 수 있 는 서비스 와 클 라 이언 트 가 있다.
(1)먼저 인터페이스 검사 류 를 도입 하여-이 인 터 페 이 스 를 실현 하 는 클래스 가 인터페이스 에서 사용 하 는 방법 을 실현 하 는 지 확인한다.

//(                      
//        Interface.prototype ,              
//                 
//       
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("                  ")
      }
    }
  }
}

(2)인터페이스 유사 인터페이스 사용

 var InterfaceResult=new Interface("InterfaceResult",["add"]);

(3)서버 의 두 수의 덧셈

function First() {
    this.add=function (x,y) {
     return x+y;
    }
    Interface.ensureImplement(this,InterfaceResult);//    
  }

(4)클 라 이언 트 호출 서버 코드

var first=new First();
alert(first.add(1,2)) ;//3

둘째,현재 하나의 요 구 는 라 이브 러 리 를 바 꿔 야 하지만 클 라 이언 트 의 프로그램 은 큰 변경 을 원 하지 않 는 다 는 것 이다.
(1)똑 같은 인 터 페 이 스 를 계승 하 는 토대 에서 라 이브 러 리 는

function Second() {
    this.add=function (numberList) {
      //[1,2,3] "1+2+3" eval("1+2+3")
      return eval(numberList.join("+"));
    }
    Interface.ensureImplement(this,InterfaceResult);//                 
  }

이때 우리 가 이 라 이브 러 리 를 사용 해 야 한다 면 클 라 이언 트 가 해 서 는 안 됩 니 다.그러면 이전 호출 방식 을 사용 하 십시오.

var second=new Second();
alert(second.add(1,3));//         

클 라 이언 트 의 요구 에 전혀 부합 되 지 않 습 니 다.클 라 이언 트 가 변 하지 않 는 상황 에서 새로운 라 이브 러 리 를 사용 할 수 있 도록 어댑터 모드 를 사용 해 야 합 니 다.현재 인터페이스 에 변화 가 생 겼 습 니 다.클 라 이언 트 가 변 하지 않도록 어댑터 호 환 을 사용 합 니 다.
클 라 이언 트 와 새로운 인 터 페 이 스 를 호 환 합 니 다.
(2)어댑터

 function ThirdWarpper() {
       this.add=function (x,y) {
         var arr=new Array();
         arr.push(x);
         arr.push(y);
         return new Second().add(arr);
       }
       Interface.ensureImplement(this,InterfaceResult);
     }

(3)클 라 이언 트 코드

  //   
  var third=new ThirdWarpper();
   var result= third.add(1,8);//   
   alert(result);

위 와 같은 새로운 라 이브 러 리 를 사용 한 그림 은 다음 과 같 습 니 다.
 
총괄
겉으로 볼 때 어댑터 모드 는 외관 모드 와 매우 비슷 하 다.그들 은 모두 다른 대상 을 포장 하고 나타 나 는 인 터 페 이 스 를 바 꿔 야 한다.이들 의 차 이 는 인 터 페 이 스 를 어떻게 바 꾸 느 냐 에 있다.외관 요 소 는 간단 한 인 터 페 이 스 를 보 여 줍 니 다.추가 적 인 선택 을 제공 하지 않 습 니 다.
그리고 흔히 볼 수 있 는 임 무 를 편리 하 게 완수 하기 위해 가정 을 하기 도 한다.어댑터 는 하나의 인 터 페 이 스 를 다른 인터페이스 로 바 꿔 야 한다.어떤 능력 을 걸 러 내지 도 않 고 인 터 페 이 스 를 간소화 하지 도 않 는 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 전단 코드 디 버 깅 실행 도 구 를 사용 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.