JavaScript 장식 자 모드 원리 와 용법 실례 상세 설명

본 고의 실례 는 자 바스 크 립 트 장식 자의 모델 원리 와 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
이곳 에서 우 리 는 수 요 를 통 해 점점 장식 자 모델 을 끌 어 낸다.
다음은 몇 세대 자동차의 차이 에 대해 장식 자 모델 을 점차적으로 나타 내 는 것 이다.
우선,우 리 는 먼저 인터페이스 파일 을 도입 합 니 다.-목적 은 실현 류 가 인터페이스 에서 완전히 실현 되 는 지 검증 하 는 방법 입 니 다.코드 는 다음 과 같 습 니 다.

//                      
//        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("                  ")
      }
    }
  }
}

(1)통일 인터페이스

 var ShopInterface=new Interface("FirstShop",["getPrice","assemble"]);//        

(2)인터페이스 실현 및 내부 검사

 var first=function () {
    //      
    this.getPrice=function () {
      document.write(15000+"<br>")
    }
    this.assemble=function () {
     document.write("    ....<br>")
    }
    Interface.ensureImplement(this,ShopInterface);//         
  }

(3)첫 번 째 자동차 실례

 //       
  var firstShop=new first();
  firstShop.getPrice();
  firstShop.assemble();
  document.write("...............first...............<br>")

 지금부터 우 리 는 새로운 수요 가 생 겼 다.자동 차 는 음향(K),가죽 소파(M),범퍼(N)와 같은 부속 제품 이 필요 하 다.
분석 을 통 해 우 리 는 모든 부속 제품 이 자동차의 조립 과 그 가격 에 영향 을 줄 수 있다 는 것 을 알 수 있다.그러면 우 리 는 어떤 방법 을 생각 할 수 있 습 니까?
첫 번 째 방안:인터페이스 수정 을 통 해
(1)인터페이스 정의

 var SecondInterface=new Interface("SecondInterface",["getPrice","assemble","addK","addM","addN"]);

(2)클래스 구현 인터페이스 및 검증

 var second=function () {
     var price=15000;
     //      
     this.getPrice=function () {
       document.write(price+"<br>")
     }
     this.assemble=function () {
       document.write("    .....<br>");
     }
     this.addK=function () {
       price+=1000;
     }
     this.addM=function () {
       price+=2000;
     }
     this.addN=function () {
       price+=3000;
     }
     Interface.ensureImplement(this,SecondInterface);//           
   }

(3)두 번 째 자동차 실례

 //       
  var secondShop=new second();
     secondShop.addK();
     secondShop.addM();
     secondShop.addN();
     secondShop.getPrice();
     secondShop.assemble();
     document.write(".....................second.........................<br>");

어,우 리 는 실현 한 것 같 지만 문제 가 생 겼 다.나 는 인 터 페 이 스 를 바 꾸 었 다.그러나 내 가 이 인 터 페 이 스 를 실현 하 는 것 은 반드시 K,M,N 이 있어 야 하 는 것 은 아니다.내 가 이 인 터 페 이 스 를 실현 하 는 모든 실현 류 를 수정 해 야 합 니까?분명히 옳지 않다.만약 인 터 페 이 스 를 바 꾸 지 않 는 다 면 나 는 자 류 를 늘 려 도 되 겠 는가?
두 번 째 방안 은 인 터 페 이 스 를 바 꾸 지 않 고 하위 클래스 를 추가 합 니 다.
(1)인 터 페 이 스 는 여전히

  var thirdInterface=new Interface("FirstShop",["getPrice","assemble"]);

(2)자동차 원형 류-실현 인터페이스

 var third=function () {
      this.getPrice=function () {
        document.write(15000+"<br>");
      }
      this.assemble=function () {
        document.write("    .....<br>");
      }
      Interface.ensureImplement(this,thirdInterface);
    }

(3)각 하위 클래스

  var thirdM=function () {
      this.getPrice=function () {
        document.write(15000+"<br>");
      }
      this.assemble=function () {
        document.write("    .....<br>");
      }
      Interface.ensureImplement(this,thirdInterface);
    };

우 리 는 모든 하위 클래스 가 이렇게 써 야 하 느 냐 고 묻 지 않 을 수 없다.만약 하위 클래스 가 매우 많다 면,우 리 는 아직 미 친 것 을 써 서 는 안 되 기 때문에 이런 방식 도 바람 직 하지 않다.
세 번 째 방안:장식 기 모드 사용
장식 자 는 원형 대상 에 새로운 특성 을 추가 하여 같은 인 터 페 이 스 를 가 진 새로운 대상 에 투명 하 게 포장 할 수 있다.
구체 적 인 코드 는 다음 과 같다.
(1)인터페이스 에서 변 하지 않 습 니 다.코드 는 다음 과 같 습 니 다.

 var comInterface=new Interface("FirstShop",["getPrice","assemble"]);

(2)목표 대상(원형)-장식 되 어야 하 는 원래 대상(내부 에 감 싸 는 부분 에 속 함)-인 터 페 이 스 를 실현 하고 인 스 턴 스 시 검사

var targetShop = function(){
    this.getPrice = function(){
      return 15000;
    }
    this.assemble =function(){
      document.write("    ....<br>")
    }
    Interface.ensureImplement(this,comInterface);//    
  }

(3)각 장식 류,원래 대상 을 감 싸 는 물건.
#M:

 var carM = function(carShop) {
    this.getPrice = function () {
      return 1000 + carShop.getPrice();
    }
    this.assemble = function () {
      document.write("M  ....<br>")
    }
    Interface.ensureImplement(this,comInterface);//    
  }

#N:

 var carN = function(carShop){
    this.getPrice = function(){
      return 2000+carShop.getPrice();
    }
    this.assemble =function(){
      document.write("N  ....<br>")
    }
    Interface.ensureImplement(this,comInterface);//    
  }

#K:

 var carK=function (carShop) {
    this.getPrice=function () {
      return 3000+carShop.getPrice();
    }
    this.assemble=function () {
      document.write("K  ....<br>")
    }
    Interface.ensureImplement(this,comInterface);//    
  };

(4)여러 가지 장식 으로 우리 차 를 포장 하 자.

 //   
  var newCar=new carK(new carM(new targetShop));// K M  
   var newCar2=new carK(new carM(new carN(new targetShop)));
    document.write(newCar.getPrice()+"<br>");
    document.write(newCar2.getPrice());

 요약 하면 장식 자 는 클래스 에 사용 할 수 있 고 클래스 의 함수 에 도 사용 할 수 있다.
기 존의 기능 이 당신 에 게 적합 한 프로젝트 가 아니라면 기 존의 기능 을 대량으로 확장 하고 기 존의 인 터 페 이 스 를 바 꾸 고 싶 지 않다 면 장식 자 모드 를 사용 하 는 것 이 좋 습 니 다.
그림 으로 상기 모델 을 이해 하 세 요.

포장 의 원리 도:-포장 체인

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