フロントエンドのデザインパターンのテンプレートメソッドパターンとChain of Responsibilityパターン

クラスアクション{ 
    ハンドル（）{ 
        ハンドル1（）。
        handle2（）; 
        handle3（）; 
    } 
    ハンドル1（）{ 
        にconsole.log（ '1' ）。    
    } 
    handle2（）{ 
        にconsole.log（ '2' ）。    
    } 
    handle3（）{ 
        にconsole.log（ '3' ）;    
    } 
}

Template Methodパターン ：以上のように、ハンドル1のコード、handle2、handle3このプロセスいくつかのステップがある場合、我々はメソッド呼び出しを通して彼のパッケージを放棄することができ、このメソッドを呼び出すを使用することができます。内部シーケンシャル方式のために、この方法は、外部に露出し、によって封入することができます。

Chain of Responsibilityパターン：1つのステップが完了するまでに、複数の役割の責任に分けることができます。これらの役割を別々た後、一緒にリンクチェーンを持ちます。創始者と各ハンドラ分離。

たとえば、あなたは、承認、承認に必要なリーダー、マネージャーの承認、取締役の最終的な承認の必要性を残したいです

// 休暇の承認、承認に必要なヘッド、承認のための管理者、承認最後のディレクターの
クラスアクション{ 
    コンストラクタ（名前）{ 
        この .nameの= 名前;
         この .nextAction = ヌル; 
    } 
    setNextAction（アクション）{ 
        この .nextAction = アクション; 
    } 
    ハンドル（）{ 
        はconsole.log（{$ ` この.nameの承認}`）;
         IF（これ！.nextAction = ヌル）{
             この.nextAction.handle（）; 
        } 
    } 
} 

// テスト 
しましょうA1 = 新しい新しいアクション（「グループ長いです" ）;
A2せ = 新しいアクション（ '经理' ）; 
A3ましょう = 新しいアクション（ '总监' ）; 
a1.setNextAction（A2）。
a2.setNextAction（A3）。
a1.handle（）;

 

アプリケーションシナリオ：promise.thenチェーン

 

設計原理検証

各ハンドラは、単独で開始します

オープンクローズ原則に準拠