JavaScript 디자인 모델 의 외관 모델 원리 와 실현 방법 분석

본 고의 실례 는 자 바스 크 립 트 디자인 모델 의 외관 모델 원리 와 실현 방법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
외부 와 하위 시스템 의 통신 은 반드시 하나의 시스템 의 외관 대상 을 통 해 이 루어 져 야 하 는데 이것 이 바로 외관 모델 이다.
외관 모델 은 다음 과 같은 두 가지 역할 을 가진다.
1.겉치레
클 라 이언 트 는 이 캐릭터 방법 을 호출 할 수 있 습 니 다.이 캐릭터 에는 서브 시스템 의 응용(관련(하나 이상)서브 시스템 의 기능 과 책임 을 알 고 있 습 니 다)이 있 습 니 다.이 캐릭터 는 클 라 이언 트 에서 보 내 온 모든 요청 을 해당 하 는 서브 시스템 에 위임 합 니 다.
2.서브 시스템 역할
하나 이상 의 키 시스템 을 동시에 가 질 수 있 습 니 다.모든 서브 시스템 은 하나의 단독 클래스 가 아니 라 일부 클래스 의 집합 이다.모든 하위 시스템 은 클 라 이언 트 에 의 해 직접 호출 되 거나 겉치레 역할 에 의 해 호출 될 수 있다.서브 시스템 은 외관 의 존 재 를 모 르 고 서브 시스템 에 있어 외관 은 다른 클 라 이언 트 일 뿐이다.
다음은 외관 모델 을 제시 할 수 있 는 간단 한 수 요 를 살 펴 보 자.주인 이 자신의 애 완 견 을 위해 처리 하 는 해당 하 는 애 완 견 입양 증명 서 를 살 펴 보 자.
이 간단 한 수요 에서 우 리 는 주인 Person 류 와 애 완 견 Dog 류 의 관련 정 보 를 대체적으로 분석 할 수 있다.
아래 의 예 에서 중국 은 인터페이스의 검증 과 관련 될 것 이 니,지금 코드 를 먼저 붙 여 라.

//(                      
//        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)주인 류(Person 류)

  function Person() {
   this.name="  ";
   this.address="     ";
   this.getInfo=function () {
     return "  "+this.name+"   "+this.address;
   };
   this.learn=function () {
     alert("     ");
   }
    this.marray=function () {
      alert("marray");
    }
   //    
    Interface.ensureImplement(this,PersonDao);//                
  }

(2)애 완 견(개 류)

var DogDao=new Interface("DogDao",["getInfo","call","run"]);

  var Dog=function () {
    this.name="gg";
 this.getInfo=function () {
   return "     "+this.name;
 };
 this.call=function () { };
 this.run=function () {};
 Interface.ensureImplement(this,DogDao);//    
  }

(3)이제 주인 은 자신의 애 완 견 에 게 애 완 견 입양 증 서 를 발급 할 수 있다.   -----클 라 이언 트 코드
 첫 번 째 방법:겉치레 방식 으로 클 라 이언 트 의 코드 는 다음 과 같다.

function action(person,dog) {
  var r="GG"+new Date().getDay()+Math.floor(Math.random()*11);
  var str="    ：  "+r
   +"<br/>    "+person.getInfo()
  +"<br>     ："+dog.getInfo();
  return str;
}document.write(action(new Person(),new Dog()));

두 번 째 방법:외관 모델 을 사용 하여 복잡 한 일 을 외관 에 맡 기 면 클 라 이언 트 의 압력 을 줄 일 수 있다.
  #1:외관 에서 다음 과 같은 처 리 를 한다.

 function facade(person,dog) {
   var r="GG"+new Date().getDay()+Math.floor(Math.random()*11);
   var str="    ：  "+r
     +"<br/>    "+person.getInfo()
     +"<br>     ："+dog.getInfo();
   this.action=function () {//        
     return str;
   };
 }

\#2,클 라 이언 트 가 사용 하 는 코드 는

function action2(person,dog) {
   document.write(new facade(person,dog).action());
}
action2(new Person(),new Dog());

요약 하면 우 리 는 외관 모델 에 적용 되 지 않 는 클 라 이언 트 가 비교적 복잡 한 업 무 를 처리 해 야 한 다 는 것 을 알 수 있다.외관 을 사용 한 후에 외관 에서 복잡 한 것 을 처리 하고 클 라 이언 트 는 간단 한 호출 만 하면 된다.
 외관 모델 을 간단하게 이해 하 는 그림 구조

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