ホームページ  >  記事  >  ウェブフロントエンド  >  js デザイン パターン: コマンド パターンとは何ですか? jsコマンドモードの概要

js デザイン パターン: コマンド パターンとは何ですか? jsコマンドモードの概要

不言
不言オリジナル
2018-08-17 16:26:401433ブラウズ

この記事では、JS デザイン パターンに関するコンテンツをお届けします: コマンド パターンとは何ですか? js コマンド モードの紹介は、参考にしていただければ幸いです。

コマンドモードとは何ですか?

定義: リクエストをオブジェクトにカプセル化し、さまざまなリクエストでクライアントをパラメータ化できるようにします。

主な解決策: ソフトウェア システムでは、動作要求者と動作実装者は通常、密結合した関係を持ちますが、場合によっては、動作の記録、元に戻す、またはやり直し、トランザクションなどが必要になる場合もあります。この種の密結合変化に耐えられないデザインは不向きです。

いつ使用するか: 「記録、元に戻す/やり直し、トランザクション」やその他の動作の処理などの状況によっては、変更に抵抗できないこの種の密結合は不適切です。この場合、「動作要求者」と「動作実装者」をどのように分離すればよいでしょうか?一連の動作をオブジェクトに抽象化すると、それらの間の疎結合を実現できます。

解決方法: 発信者経由で受信者を呼び出し、発信者→受信者→コマンドの順序でコマンドを実行します。

キーコード: 3つの役割を定義: 1. 受信した実際のコマンド実行オブジェクト 2. コマンド 3. 呼び出し者はコマンドオブジェクトの入り口を使用します

js コマンドモードの利点: 1. システムの結合を軽減します。 2. 新しいコマンドをシステムに簡単に追加できます。

js コマンド モードの欠点: コマンド モードを使用すると、一部のシステムでは特定のコマンドが多すぎる可能性があります。

js コマンド モードの使用シナリオ: コマンド モードは、コマンドが考慮される場所であればどこでも使用できます。例: 1. GUI のすべてのボタンはコマンドです。 2. CMD をシミュレートします。

注: システムはコマンドの元に戻す (Undo) 操作と回復 (Redo) 操作をサポートする必要があります。 コマンド モードの拡張を参照してください。

js コマンド モード

コマンド モードも JavaScript では比較的単純です。按钮命令 は次のコードで抽出されるため、コマンド モードを複雑なプロジェクトで使用して、インターフェイス コードと関数コードをさまざまな人々に提供して作成することができます。

const setCommand = function(button, command) {
    button.onClick = function() {
        command.excute()
    }
}

// --------------------  上面的界面逻辑由A完成,下面的由B完成

const menu = {
    updateMenu: function() {
        console.log('更新菜单')
    },
}

const UpdateCommand = function(receive) {
    return {
        excute: receive.updateMenu,
    }
}

const updateCommand = UpdateCommand(menu) // 创建命令

const button1 = document.getElementById('button1')
setCommand(button1, updateCommand)

関連する推奨事項:

js デザイン パターン: オブザーバー パターン (パブリッシュ/サブスクライブ パターン) とは何ですか? JS オブザーバー パターンの紹介

js デザイン パターン: イテレーター パターンとは何ですか? JS イテレータ パターンの紹介

以上がjs デザイン パターン: コマンド パターンとは何ですか? jsコマンドモードの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。