JS的命令模式概念與用法分析

這次帶給大家JS的命令模式概念與用法分析，使用JS命令模式概念與用法分析的注意事項有哪些，下面就是實戰案例，一起來看一下。

這篇文章主要介紹了JS設計模式之命令模式概念與用法,簡單描述了命令模式的原理、功能並結合javascript實例形式分析了命令模式相關定義與使用技巧,需要的朋友可以參考下

本文實例講述了JS設計模式之命令模式概念與用法。分享給大家供大家參考，具體如下：

客戶創建命令；調用者執行該命令；接收者在命令執行時執行相應操作
簡單命令對像一般用來消除二個對象（調用者和接收者）之間的耦合，而複雜的命令物件則一般用來封裝不可分的或事務性的指令。

指令模式的主要用途是把呼叫物件（使用者介面、API和代理程式等）與實作操作的物件隔離。凡是兩個物件間互動方式需要有更高的模組化程度時都可以用到這種模式。

指令的意思是用一個簡單方法或函數去執行和這個指令相關的實際操作。就如同用遙控器打開電視一樣，只按一個按鍵就可以打開電視，簡單、方便。它具體的實作操作我們不用關心。那是有電視機來處理的。電視對遙控器提供了一個介面(訊號)，遙控器只需要在點擊時實現這個介面就可以了。

Command：定義指令的接口，宣告執行的方法。
ConcreteCommand：命令介面實作對象，是「虛」的實作；通常會持有接收者，並呼叫接收者的功能來完成命令要執行的操作。
Receiver：接收者，真正執行指令的物件。任何類別都可能成為一個接收者，只要它能夠實現命令要求實現的相應功能。
Invoker：要求命令對象執行請求，通常會持有命令對象，可以持有很多的命令對象。這是客戶端真正觸發命令並要求命令執行相應操作的地方，也就是說相當於使用命令物件的入口。
Client：建立特定的命令對象，並且設定命令對象的接收者。注意這不是我們常規意義上的客戶端，而是在組裝命令物件和接收者，或許，把這個Client稱為裝配者會更好理解，因為真正使用命令的客戶端是從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();
}

執行Client

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS仿今日頭條手機端主頁介面

#React開發時的eslint設定

動態顯示select下拉清單資料

#

以上是JS的命令模式概念與用法分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！