JSコマンドパターンの概念と使用法の分析

今回はJSコマンドモードの概念と使用法分析についてお届けします。 JSコマンドモードの概念と使用法分析を使用する際の注意点について、実際の事例を見てみましょう。

この記事では、JSデザインパターンのコマンドパターンの概念と使用法を主に紹介し、コマンドパターンの原理と機能を簡単に説明し、JavaScriptの例の形式でコマンドパターンの関連する定義と使用スキルを分析します。必要な友達は以下を参照してください

この記事の例では、JS デザイン パターンのコマンド パターンの概念と使用法について説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

顧客がコマンドを作成し、呼び出し側がコマンドを実行します。コマンドが実行されると、受信側が対応する操作を実行します。 通常、単純なコマンド オブジェクトは 2 つのオブジェクトを削除するために使用されます。複雑なコマンド オブジェクトは通常、分割できない命令やトランザクション命令をカプセル化するために使用されます。

コマンド パターンの主な目的は、呼び出し元のオブジェクト (ユーザー インターフェイス、API、プロキシなど) を、操作を実装するオブジェクトから分離することです。このパターンは、2 つのオブジェクト間の相互作用で高度なモジュール性が必要な場合にいつでも使用できます。

コマンドとは、単純なメソッドまたは関数を使用して、このコマンドに関連する実際の操作を実行することを意味します。リモコンでテレビの電源を入れるのと同じように、ボタンひとつでテレビの電源を入れることができ、簡単・便利です。その特定の実装操作について気にする必要はありません。それはテレビが担当します。テレビはリモコンにインターフェイス (信号) を提供し、リモコンはクリックされたときにこのインターフェイスを実装するだけで済みます。

コマンド: コマンドのインターフェースを定義し、実行メソッドを宣言します。
ConcreteCommand: コマンド インターフェイス実装オブジェクトは「仮想」実装であり、通常はレシーバーを保持し、コマンドによって実行される操作を完了するためにレシーバーの関数を呼び出します。
Receiver: Receiver、コマンドを実際に実行するオブジェクト。コマンドに必要な対応する機能を実装できる限り、どのクラスもレシーバーになることができます。
Invoker: リクエストを実行するにはコマンド オブジェクトが必要です。通常はコマンド オブジェクトを保持し、多くのコマンド オブジェクトを保持できます。ここは、クライアントが実際にコマンドをトリガーし、対応する操作を実行するようコマンドに要求する場所であり、コマンド オブジェクトへの入り口に相当します。
クライアント: 特定のコマンドオブジェクトを作成し、コマンドオブジェクトの受信者を設定します。これは従来の意味でのクライアントではなく、コマンド オブジェクトとレシーバーをアセンブルしていることに注意してください。実際にコマンドを使用するクライアントは Invoker

から実行をトリガーするため、おそらくこのクライアントをアセンブラと呼ぶ方がよいでしょう。パターン分析

1. コマンド パターンの本質は、コマンドをカプセル化し、コマンドを発行する責任とコマンドを実行する責任を分離することです。

2. 各コマンドは操作です。要求側は操作を実行するリクエストを送信し、受信側はそのリクエストを受信して​​操作を実行します。
3. コマンド モードでは、要求側と受信側が独立しているため、要求側は、要求がどのように受信されるか、いつ受信されるかはもちろん、要求を受信する側のインターフェイスを知る必要もありません。操作が実行されるかどうか、およびその実行方法。
4. コマンド モードでは、リクエスト自体がオブジェクトになり、他のオブジェクトと同様に保存および転送できます。
5. コマンド モードの鍵となるのは、抽象コマンド インターフェイスの導入であり、抽象コマンド インターフェイスを実装する特定のコマンドのみを受信者に関連付けることができます。

パターンの利点

1. オブジェクト間の結合を軽減します。

2. 新しいコマンドをシステムに簡単に追加できます。
3. 組み合わせたコマンドの設計が容易になります。
4. 同じメソッドを呼び出して、異なる関数を実装します

// 命令
var CreateCommand = function( receiver ){
 this.receiver = receiver;
}
CreateCommand.prototype.execute = function() {
 this.receiver.action();
}
// 接收者 电视
var TVOn = function() {}
TVOn.prototype.action = function() {
  alert("TVOn");
}
// 接收者 电视
var TVOff = function() {}
TVOff.prototype.action = function() {
  alert("TVOff");
}
// 调用者 遥控器
var Invoker = function( tvOnCommand, tvOffCommand ) {
  this.tvOnCommand = tvOnCommand;
  this.tvOffCommand = tvOffCommand;
}
Invoker.prototype.tvOn = function() {
  this.tvOnCommand.execute();
}
Invoker.prototype.tvOff = function() {
  this.tvOffCommand.execute();
}

クライアントを実行します

var tvOnCommand = new CreateCommand( new TVOn() );
var tvOffCommand = new CreateCommand( new TVOff() );
var invoker = new Invoker( tvOnCommand, tvOffCommand );
invoker.tvOn();
invoker.tvOff();

この記事の事例を読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、PHP 中国語に関する他の関連記事に注目してください。 Webサイト！

推奨読書:

ToutiaoモバイルホームページインターフェースのJS模倣

React開発中のeslint設定

選択されたドロップダウンリストデータの動的表示

以上がJSコマンドパターンの概念と使用法の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。