> 웹 프론트엔드 > JS 튜토리얼 > JS 장식 디자인 패턴에 대한 자세한 설명

JS 장식 디자인 패턴에 대한 자세한 설명

小云云
풀어 주다: 2018-02-22 09:11:02
원래의
1313명이 탐색했습니다.

장식 디자인 패턴:

각 장치에는 고유한 응용 시나리오와 문제 해결 방법이 있습니다. 장식 디자인 패턴은 객체에 새로운 기능을 동적으로 추가하는 데 사용되는 기술입니다. 상속은 객체의 새로운 기능을 확장할 수 있습니다. 상속 관계 대신 객체 연관 관계를 사용하는 것이 더 유연하고 유형 시스템의 급속한 확장을 방지합니다. 이 모드는 새로 추가된 기능이 상속을 희생하여 문제를 해결하기에 충분하지 않을 때 사용하기에 적합합니다. 정육점 ^_^
장식 디자인 패턴: 개체의 기능을 확장하기 위해 데코레이터는 상속보다 더 유연한 대안을 제공합니다.

구조 다이어그램:

Interface


var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'repair', 'getPrice']);
로그인 후 복사

객체 클래스


var AcmeComfortCuiser = function(){
  
};
AcmeComfortCuiser.prototype = {
  assemble: function(){
    
  },
  wash: function(){
    
  },
  repair: function(){
    
  },
  getPrice: function(){
    
  }
}
로그인 후 복사

장식 클래스


var BicycleDecorator = function(bicycle){
  Interface.ensureImplements(bicycle, Bicycle);
  this.bicycle = bicycle;
};
BicycleDecorator.prototype = {
  assemble: function(){
    return this.bicycle.assemble();
  },
  wash: function(){
    return this.bicycle.wash();
  },
  repair: function(){
    return this.bicycle.repair();
  },
  getPrice: function(){
    return this.bicycle.getPrice();
  }
}
로그인 후 복사

확장 카테고리


  var HeadlightDecorator = function(bicycle){
    BicycleDecorator.call(this, bicycle);
  };
  extend(HeadlightDecorator, BicycleDecorator);
  HeadlightDecorator.prototype.getPrice = function(){
    return this.bicycle.getPrice() + 15.00;
  }
로그인 후 복사

관련 권장사항:

Node.js의 일반적인 기본 디자인 패턴 예시 분석

PHP 디자인 패턴의 서비스 로케이터 패턴 예시에 대한 자세한 설명

PHP 디자인 패턴 메모 패턴에 대한 자세한 설명

위 내용은 JS 장식 디자인 패턴에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿