javascript 디자인 모델 C 장식 모델 원리 와 응용 사례 분석

본 논문 의 사례 는 자바 script 디자인 모델 C 장식 모델 의 원리 와 응용 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
소개:장식 모델 은 한 대상 자체 의 기능 을 바 꾸 지 않 는 토대 에서 대상 에 게 새로운 행 위 를 추가 할 수 있다.현실 생활 에서 도 이런 상황 이 곳곳에 존재 한다.예 를 들 어 사진 한 장 은 사진 자 체 를 바 꾸 지 않 고 액 자 를 추가 하여 습 기 를 막 는 기능 을 할 수 있다.장식 모델 은 계승 을 대체 하 는 기술 로 대상 간 의 관련 관 계 를 사용 하여 계승 관 계 를 대체 하 는 것 이다.
정의:동태 적 으로 한 대상 에 게 추가 적 인 직책 을 추가 하고 대상 의 기능 을 증가 하 는 데 있어 장식 모델 은 하위 클래스 를 생 성 하 는 것 보다 더욱 유연 하 다.장식 모델 은 일종 의 대상 구조 모델 이다.
장면:우 리 는 현재 하나의 Circle 류 가 원 을 그 리 는 데 사용 되 고 있 습 니 다.새로운 수 요 는 빨간색 원 을 그 려 야 합 니 다.또 하나의 새로운 수 요 는 반경 20 의 원 을 그 려 야 합 니 다.또 하나의 새로운 수 요 는 우리 에 게 빨간색,반지름 20 의 원 을 그 려 야 합 니 다.
어떻게 디자인 해야만 우리 의 코드 가 이러한 수 요 를 호 환 할 수 있 습 니까?우 리 는 먼저 Circle 류 에 원 의 색 을 바 꾸 는 데 사용 할 색상 의 액 자 를 포장 합 니 다.Circle 클래스 에 원 의 크기 를 바 꾸 기 위해 크기 의 액 자 를 포장 합 니 다.서로 다른 액자 조합 을 통 해 원 하 는 효 과 를 얻는다.
예시:

var Circle = function(){
  this.draw = function(){
    console.log('  ');
  };
}
 
var ColorDecorator = function(circle){
  this.circle = circle;
  this.draw = function(){
    this.circle.draw();
    setColor();
    return this.circle;
  }
  function setColor(){
    console.log('  ');
  }
}
 
var RadiusDecorator = function(circle){
  this.circle = circle;
  this.draw = function(){
    this.circle.draw();
    setRadius();
  }
  function setRadius(){
    console.log('  ：20px')
  }
}
 
var circle = new Circle();
 
var redCricle = new ColorDecorator(circle);
 
var radiusCricle = new RadiusDecorator(circle);
 
var radiusRedCircle = new RadiusDecorator(new ColorDecorator(circle));
 
//  ：
circle.draw();  //  
 
redCricle.draw(); //     
 
radiusCricle.draw(); //     ：20px
 
radiusRedCircle.draw(); //        ：20px

이상 은 장식 모델 의 예 입 니 다.잘 알 고 있 습 니 다.Circle 류 를 바 꾸 지 않 는 토대 에서 확장 하고 포장 을 통 해 새로운 특성 을 실현 합 니 다.시스템 의 결합 도 를 낮 추 었 다.계승 구조 에 비해 장식 모델 은 하위 클래스 의 개 수 를 크게 줄 여 시스템 확장 을 더욱 편리 하 게 하고 유지 하기 쉽다.RadiusDecorator,ColorDecorator 는 장식 류 라 고 하 는데 그들의 도입 은 시스템 의 디자인 을 크게 간소화 할 것 이 고 그 도 장식 모델 의 핵심 이다.
장식 모드 요약:
장점:
*한 대상 의 기능 을 확장 하 는 데 편리 하고 장식 모델 은 계승 보다 유연성 이 있 으 며 유형의 수량 이 급 격 히 증가 하지 않 습 니 다.
*대상 의 기능 을 동적 으로 확장 할 수 있 습 니 다.
*한 대상 을 여러 번 장식 할 수 있 고 서로 다른 장식 류 의 조합 을 통 해 다양한 행위 의 조합 을 창조 하여 더욱 강력 한 기능 을 가 진 대상 을 얻 을 수 있다.
단점:
*장식 모드 를 사용 하 는 과정 에서 작은 대상 이 많이 발생 하고 프로그램의 성능 에 어느 정도 영향 을 줄 수 있 습 니 다.
*장식 패턴 이 유연 하 다 는 것 은 실수 하기 쉽 고 복잡 함 을 제거 하 는 것 도 낮 지 않다 는 것 을 의미한다.
적용 필드:
*대상 에 영향 을 주지 않 고 확장,직책 추가
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.