JavaScript設計モード(中)——12.装飾者モード

12装飾者モード
装飾者モードは対象に動的に職責を増やす方式と定義されている.装飾者モードは、オブジェクト自身を変えずにプログラム実行中にオブジェクトに動的に職責を追加することができます.
12.1装飾関数
JavaScriptでは、あるオブジェクトに属性と方法を拡張することができますが、関数のソースコードを変更しない場合には、関数に追加の機能を追加します.元の参照を保存することにより、ある関数を書き換えることができます.

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

このようなコードはオープン・クローズの原則に適合しており、新機能を追加する際には、確かにもとのwindow.onloadコードを修正していませんでしたが、この方法には以下の2つの問題があります.

は_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とその実体との関係)を強調し、この関係は静的な表現ができ、最初から決定されます.

装飾者モード:オブジェクトに動的に参加する動作;装飾者モードは、最初に対象の全ての機能を特定できない場合に使用します.エージェントモードは通常、1階のエージェント−本体の参照のみであり、装飾者モードはしばしば長い装飾チェーンを形成する.

12.5装飾者モードのまとめ
装飾関数はJavaScriptの中の独特な装飾者モードであり、このモードは実際の開発において非常に有用である.フレーム開発においても非常に有用であり、フレーム内の関数のいくつかの安定性を提供することによって、移植に便利な機能を提供しています.これらの個性的な機能はフレームの外に動的に飾ることができます.フレームをより多くの機能を持たせるために、いくつかの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設計モード練習コード

この文章は主に「JavaScript設計モードと開発実践」という本を参考にしました.