JavaScript 디자인 모드 (중) - 12. 장식 자 모드

12 장식 자 모드
장식 자 모델 은 대상 에 게 동태 적 으로 직책 을 증가 하 는 방식 으로 정의 한다.장식 자 모델 은 대상 자 체 를 바 꾸 지 않 는 토대 에서 프로그램 이 실행 되 는 동안 대상 에 게 동적 으로 직책 을 추가 할 수 있다.
장식 함수
JavaScript 에 서 는 어떤 대상 에 게 속성 과 방법 을 편리 하 게 확장 할 수 있 지만 특정한 함수 소스 코드 를 바 꾸 지 않 은 상태 에서 이 함수 에 추가 기능 을 추가 하 는 것 은 원 인용 을 저장 하 는 방식 으로 특정한 함 수 를 바 꿀 수 있 습 니 다. 다음 과 같 습 니 다.

window.onload = function(){ alert (1); }
var _onload = window.onload || function(){};
window.onload = function(){
  _onload();
  alert (2);
}

이러한 코드 는 개방 - 폐쇄 원칙 에 부합 되 고 새로운 기능 을 추가 할 때 원래 의 window.onload 코드 를 수정 하지 않 았 지만 이런 방식 에는 다음 과 같은 두 가지 문제 가 존재 한다.

이 중간 변 수 를 유지 해 야 합 니 다. 만약 에 함수 의 장식 체인 이 비교적 길 거나 장식 해 야 할 함수 가 많아 지면 이런 중간 변수의 수량 도 점점 많아 질 것 입 니 다.

사실은 _onload 납 치 된 문제 도 만 났 다. 이 문제 에 부 딪 혔 을 때 this 수 동 설정 Function.prototype.apply() 으로 가리 키 는 방법 은 다음 과 같다 this.

  
  
    var _getElementById = document.getElementById;
    document.getElementById = function(){
      alert (1);
      return _getElementById.apply( document, arguments );
    }
    var button = document.getElementById( 'button' );
  

12.2 用 AOP (面向切面编程)装饰函数

1. Function.prototype.before 方法和Function.prototype.after 方法实现：

Function.prototype.before = function( beforefn ){
  var __self = this; //         
  return function(){ //              "  "  
    beforefn.apply( this, arguments ); //      ，    this     ，        
    //              ，           
    return __self.apply( this, arguments ); //                 ，
    //      this     
  }
}
Function.prototype.after = function( afterfn ){
  var __self = this;
  return function(){
    var ret = __self.apply( this, arguments );
    afterfn.apply( this, arguments );
    return ret;
  }
};

2. AOP 장식 함수 로 위의 예 를 수정 합 니 다.document.getElementById
12.3 AOP 의 응용 실례
12.4 장식 자 모드 와 에이전트 모드
대리 모델 과 장식 자 모델 의 가장 중요 한 차 이 는 그들의 의도 와 디자인 목적 에 있다.

대리 모델: 본 체 를 직접 방문 하 는 것 이 불편 하거나 수요 에 부합 되 지 않 을 때 이 본체 에 대체 자 를 제공 하고 본 체 는 관건 적 인 기능 을 정의 하 며 대리 가 그 에 대한 방문 을 제공 하거나 거절 하거나 본 체 를 방문 하기 전에 추가 적 인 일 을 한다.프 록 시 모드 는 하나의 관계 (Proxy 와 그 실체 간 의 관계) 를 강조 하 는데 이런 관 계 는 정적 으로 표현 할 수 있 고 처음부터 확 정 될 수 있다.

장식 자 모드: 대상 을 위 한 동적 가입 행위;장식 자 모드 는 처음에 대상 의 모든 기능 을 확정 할 수 없 을 때 사용 합 니 다.대리 모델 은 보통 한 층 의 대리 - 본체의 인용 만 있 고 장식 자 모델 은 항상 긴 장식 체인 을 형성한다.

12.5 장식 자 모드 소결
장식 함 수 는 자 바스 크 립 트 의 독특한 장식 자 모델 로 이런 모델 은 실제 개발 에서 매우 유용 하 다.또한 프레임 워 크 개발 에 도 매우 유용 하 다. 장식 자 모델 을 통 해 프레임 워 크 의 함수 에 안정 적 이 고 편리 하 게 이식 할 수 있 는 기능 을 제공한다. 이런 개성 화 된 기능 은 프레임 워 크 이외 의 동적 장식 에 있어 프레임 워 크 가 더 많은 기능 을 가지 도록 하기 위해 if, else 문 구 를 사용 하여 사용자 의 실제 수 요 를 예측 할 수 있다.
시리즈 링크

JavaScript 디자인 모델 (상) - 기초 지식

JavaScript 디자인 모델 (중) - 1. 단일 모델

JavaScript 디자인 모델 (중) - 2. 전략 모델

JavaScript 디자인 모델 (중) - 3. 프 록 시 모델

JavaScript 디자인 모델 (중) - 4. 교체 기 모델

JavaScript 디자인 모델 (중) - 5. 구독 모드 발표

JavaScript 디자인 모드 (중) - 6. 명령 모드

JavaScript 디자인 모델 (중) - 7. 조합 모델

JavaScript 디자인 모델 (중) - 8. 템 플 릿 방법 모델

JavaScript 디자인 모델 (중) - 9. 메타 모드

JavaScript 디자인 모델 (중) - 10. 직책 체인 모델

JavaScript 디자인 모델 (중) - 11. 중개 자 모델

JavaScript 디자인 모델 (중) - 12. 장식 자 모델

JavaScript 디자인 모델 (중) - 13. 상태 모델

JavaScript 디자인 모델 (중) - 14. 어댑터 모드

JavaScript 디자인 모델 (하) - 디자인 원칙

JavaScript 디자인 모델 연습 코드

본 고 는 주로 라 는 책 을 참고 하 였 다.