JavaScript デザインパターンコマンドパターン

コマンドパターンは、JavaScript デザインパターンにおける動作デザインパターンです。

定義: あるオブジェクトにリクエストを送信しますが、具体的な操作がわからないため、リクエストの送信者と受信者が互いの結合関係を排除できるように、プログラムを疎結合方式で設計します。疎結合方式はコマンドパターンです。

わかりやすい言葉で説明すると、あなたが会社の研究開発部門のチームリーダーで、リーダーからタスクを割り当てられ、ざっと見てみると、非常に単純な要件は比較的簡単に実装できることがわかります。また、チームリーダーとして、毎日やるべきことがたくさんあるため、要件をチームメンバーに直接渡して開発と実装を依頼する準備ができています。リーダーは、あなたがそれを実行するか、誰に実行を依頼するかは気にしません。リーダーが求めているのは最終結果だけです。ここで、リーダーは命令の発行者であり、あなたは命令の受信者です。

コード実装:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
</head>
<本文>
        <button id="button1">コマンドをフロントエンドに公開</button>
        <button id="button2">バックエンドにコマンドを公開する</button>
</本文>
<スクリプト>

    var button1 = document.getElementById("button1");
    var button2 = document.getElementById("button2");
    //コマンドを定義する var command = function(Executor,func){
        Executor.onclick = func;
    }
    // リーダーを定義します var Leader = {};
    
    リーダー.チームリーダー = {
        ウェブ:関数(){
            console.log("フロントエンドはまもなく完成します");
        },
        java:関数(){    
            console.log("バックグラウンドはまもなく完了します")
        }
    }

    コマンド(button1、Leader.teamleader.web);
    コマンド(button2、Leader.teamleader.java);
</スクリプト>
</html>

実行結果:

ここで、コマンドオブジェクトは、パラメーターに応じてさまざまなタスクを実行するメソッドとして定義されます。異なるボタンをクリックすると、異なるコマンドが実行されます。

マクロ:

マクロコマンドはコマンドの集合です。マクロコマンドを実行することで、一度に複数のコマンドを実行することができます。

コンピュータのスタートアップ項目: 現在、多くのソフトウェアには、コンピュータのスタートアップにデフォルトのスタートアップ項目が追加されています。つまり、コンピュータの電源をオンにすると、特定のソフトウェアがデフォルトで起動されます。これは、マクロコマンドのシナリオです。

var QQコマンド = {
    実行:関数(){
        console.log("QQ が正常に自動起動しました");
    }
}

var weChatコマンド = {
    実行:関数(){
        console.log("WeChat が正常に起動しました");
    }
}

var マクロコマンド = 関数(){
    戻る {
        リスト：[]、
        追加:関数(コマンド){
            this.list.push(コマンド);
        },
        実行:関数(){
            for(var i = 0,command;command = this.list[i++];){
                コマンドを実行します。
            }
        }
    }
}

var マクロコマンド = マクロコマンド();
マクロコマンドを追加します(QQコマンド)。
マクロコマンドを追加します。(weChatコマンド)
マクロコマンドを実行します。

上記のコードでは、マクロコマンドオブジェクトにリスト配列を定義し、add メソッドを使用してそれを実行キューに追加します。いわゆる実行キューはリスト配列です。次に、ループを介してコマンドを順番に実行します。これにより、マクロコマンドが生成され、1 つのコマンドで複数のタスクが開始されます。

コマンドモードは、実際にはコマンドオブジェクトを定義します。リクエストパブリッシャーは、パラメーター化された形式でパラメーターを渡して特定の操作を実行し、それによってリクエストパブリッシャーとレシーバーを切り離します。

最後に:

この連載記事では、よく使われる 10 個の JavaScript デザインパターンを取り上げます。多くの情報を参考にし、自分の理解と組み合わせて、最もわかりやすい方法で説明しました。私のレベルとエネルギーが限られているため、誤解がある場合は、適時に指摘してください。デザインパターンの連載記事は当面保留し、後で補足します。来月から、ES6 を体系的に学習し、ES6 連載記事を完成させる準備を始めます。

上記は、JavaScript デザインパターンのコマンドパターンの詳細です。JavaScript デザインパターンの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: