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

본고의 실례는 자바스크립트 디자인 모델 - 장식 모델의 원리와 응용을 설명했다.여러분에게 참고하도록 공유하겠습니다. 구체적으로는 다음과 같습니다.
소개: 장식 모델은 한 대상 자체의 기능을 바꾸지 않는 토대에서 대상에게 추가적인 새로운 행위를 추가할 수 있다.현실 생활에서도 이런 상황이 곳곳에 존재한다. 예를 들어 사진 한 장은 사진 자체를 바꾸지 않고 액자를 늘려 습기를 막는 기능을 가지게 할 수 있다.장식 모델은 계승을 대체하는 기술로 대상 간의 관련 관계를 사용하여 계승 관계를 대체한다.
정의: 동태적으로 한 대상에게 추가 직책을 추가하고 대상의 기능을 증가하는 데 있어 장식 모델은 하위 클래스를 생성하는 것보다 더욱 유연하다.장식 모델은 일종의 대상 구조 모델이다.
장면: 우리는 현재 하나의 Circle류로 원을 그리는데 새로운 수요는 빨간색 원을 그리는 것을 요구하고 또 하나의 새로운 수요는 반경 20의 원을 그리는 것을 요구하며 또 하나의 새로운 수요는 빨간색, 반경 20의 원을 그리는 것을 요구한다.어떻게 설계해야만 우리의 코드가 이런 수요를 호환할 수 있습니까?우리는 먼저 서클류에 색의 액자를 포장하는데, 이 액자는 원의 색깔을 바꾸는 데 쓰인다.다시 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 클래스를 바꾸지 않고 확장하여 포장을 통해 새로운 특성을 실현한다.시스템의 결합도를 낮추었다.계승 구조에 비해 장식 모델은 하위 클래스의 개수를 크게 줄여 시스템을 확장하는 데 더욱 편리하고 유지 보수가 쉽다.Radius Decorator, Color Decorator는 장식류라고 하는데 그들의 도입은 시스템의 디자인을 크게 간소화할 것이다. 그도 장식 모델의 핵심이다.
장식 모델 요약:
장점: * 한 대상의 기능을 확장하기 편리하고 장식 패턴이 계승보다 유연성이 있어 클래스의 개수가 급격히 증가하지 않습니다.*객체의 기능을 동적으로 확장할 수 있습니다.*한 대상을 여러 번 장식할 수 있으며, 서로 다른 장식류의 조합을 통해 다양한 행위의 조합을 창조하여 기능이 더욱 강한 대상을 얻을 수 있다.
단점: * 장식 모드를 사용하는 과정에서 작은 대상이 많이 생겨 프로그램 성능에 어느 정도 영향을 미칠 수 있습니다.*장식 패턴이 특히 유연하다는 것은 실수하기 쉽고 복잡성을 배제하는 것도 낮지 않다는 것을 의미한다.
적용 시나리오: * 객체에 영향을 주지 않고 확장, 책임 추가
관심 있는 친구는 온라인 HTML/CSS/JavaScript 코드를 사용하여 도구를 실행할 수 있습니다.http://tools.jb51.net/code/HtmlJsRun상기 코드의 운행 효과를 테스트하다.
JavaScript 관련 내용에 관심이 있는 더 많은 독자들은 본 사이트의 주제를 보실 수 있습니다.,,,,,,,,,,
이 문서가 JavaScript 프로그램 설계에 도움이 되었으면 합니다.