JS設(shè)計(jì)模式之命令模式概念與用法分析
本文實(shí)例講述了JS設(shè)計(jì)模式之命令模式概念與用法。分享給大家供大家參考,具體如下:
客戶創(chuàng)建命令;調(diào)用者執(zhí)行該命令;接收者在命令執(zhí)行時(shí)執(zhí)行相應(yīng)操作
簡單命令對(duì)象一般用來消除二個(gè)對(duì)象(調(diào)用者和接收者)之間的耦合,而復(fù)雜的命令對(duì)象則一般用來封裝不可分的或事務(wù)性的指令。
命令模式的主要用途是把調(diào)用對(duì)象(用戶界面、API和代理等)與實(shí)現(xiàn)操作的對(duì)象隔離開。凡是兩個(gè)對(duì)象間互動(dòng)方式需要有更高的模塊化程度時(shí)都可以用到這種模式。
命令的意思是用一個(gè)簡單方法或函數(shù)去執(zhí)行和這個(gè)命令相關(guān)的實(shí)際操作。就如同用遙控器打開電視一樣,只按一個(gè)按鍵就可以打開電視,簡單、方便。它具體的實(shí)現(xiàn)操作我們不用關(guān)心。那是有電視器來處理的。電視對(duì)遙控器提供了一個(gè)接口(信號(hào)),遙控器只需要在點(diǎn)擊時(shí)實(shí)現(xiàn)這個(gè)接口就可以了。
Command:
定義命令的接口,聲明執(zhí)行的方法。
ConcreteCommand:
命令接口實(shí)現(xiàn)對(duì)象,是“虛”的實(shí)現(xiàn);通常會(huì)持有接收者,并調(diào)用接收者的功能來完成命令要執(zhí)行的操作。
Receiver:
接收者,真正執(zhí)行命令的對(duì)象。任何類都可能成為一個(gè)接收者,只要它能夠?qū)崿F(xiàn)命令要求實(shí)現(xiàn)的相應(yīng)功能。
Invoker:
要求命令對(duì)象執(zhí)行請(qǐng)求,通常會(huì)持有命令對(duì)象,可以持有很多的命令對(duì)象。這個(gè)是客戶端真正觸發(fā)命令并要求命令執(zhí)行相應(yīng)操作的地方,也就是說相當(dāng)于使用命令對(duì)象的入口。
Client:
創(chuàng)建具體的命令對(duì)象,并且設(shè)置命令對(duì)象的接收者。注意這個(gè)不是我們常規(guī)意義上的客戶端,而是在組裝命令對(duì)象和接收者,或許,把這個(gè)Client稱為裝配者會(huì)更好理解,因?yàn)檎嬲褂妹畹目蛻舳耸菑腎nvoker來觸發(fā)執(zhí)行
模式分析
1.命令模式的本質(zhì)是對(duì)命令進(jìn)行封裝,將發(fā)出命令的責(zé)任和執(zhí)行命令的責(zé)任分割開。
2.每一個(gè)命令都是一個(gè)操作:請(qǐng)求的一方發(fā)出請(qǐng)求,要求執(zhí)行一個(gè)操作;接收的一方收到請(qǐng)求,并執(zhí)行操作。
3.命令模式允許請(qǐng)求的一方和接收的一方獨(dú)立開來,使得請(qǐng)求的一方不必知道接收請(qǐng)求的一方的接口,更不必知道請(qǐng)求是怎么被接收,以及操作是否被執(zhí)行、何時(shí)被執(zhí)行,以及是怎么被執(zhí)行的。
4.命令模式使請(qǐng)求本身成為一個(gè)對(duì)象,這個(gè)對(duì)象和其他對(duì)象一樣可以被存儲(chǔ)和傳遞。
5.命令模式的關(guān)鍵在于引入了抽象命令接口,且發(fā)送者針對(duì)抽象命令接口編程,只有實(shí)現(xiàn)了抽象命令接口的具體命令才能與接收者相關(guān)聯(lián)。
模式優(yōu)點(diǎn)
1.降低對(duì)象之間的耦合度。
2.新的命令可以很容易地加入到系統(tǒng)中。
3.可以比較容易地設(shè)計(jì)一個(gè)組合命令。
4.調(diào)用同一方法實(shí)現(xiàn)不同的功能
// 命令 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"); } // 調(diào)用者 遙控器 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(); }
執(zhí)行Client
var tvOnCommand = new CreateCommand( new TVOn() ); var tvOffCommand = new CreateCommand( new TVOff() ); var invoker = new Invoker( tvOnCommand, tvOffCommand ); invoker.tvOn(); invoker.tvOff();
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript轉(zhuǎn)換日期字符串為Date日期對(duì)象的方法
這篇文章主要介紹了javascript轉(zhuǎn)換日期字符串為Date日期對(duì)象的方法,是非常實(shí)用的轉(zhuǎn)換技巧,需要的朋友可以參考下2015-02-02Js中的Object.entries()基本知識(shí)詳細(xì)分析(附Demo)
Object.entries方法能將對(duì)象的可枚舉屬性轉(zhuǎn)為數(shù)組,每個(gè)元素是鍵值對(duì)數(shù)組,可用于for...of迭代,下面這篇文章主要介紹了Js中的Object.entries()基本知識(shí)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09jquery及js實(shí)現(xiàn)動(dòng)態(tài)加載js文件的方法
這篇文章主要介紹了jquery及js實(shí)現(xiàn)動(dòng)態(tài)加載js文件的方法,結(jié)合實(shí)例形式分別講述了基于jQuery以及基于JavaScript的文件動(dòng)態(tài)加載方法,需要的朋友可以參考下2016-01-01JavaScript 面向?qū)ο蟪绦蛟O(shè)計(jì)詳解【類的創(chuàng)建、實(shí)例對(duì)象、構(gòu)造函數(shù)、原型等】
這篇文章主要介紹了JavaScript 面向?qū)ο蟪绦蛟O(shè)計(jì),結(jié)合具體實(shí)例形式詳細(xì)分析了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中類的創(chuàng)建、實(shí)例對(duì)象、構(gòu)造函數(shù)、原型等相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05使用javascript做時(shí)間倒數(shù)讀秒功能的實(shí)例
今天小編就為大家分享一篇關(guān)于使用javascript做時(shí)間倒數(shù)讀秒功能的實(shí)例,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01學(xué)習(xí)Javascript面向?qū)ο缶幊讨庋b
這篇文章主要幫助大家學(xué)習(xí)Javascript面向?qū)ο缶幊讨庋b,由淺入深的介紹了封裝的概念定義,感興趣的小伙伴們可以參考一下2016-02-02JS實(shí)現(xiàn)全屏預(yù)覽F11功能的示例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)全屏預(yù)覽F11功能的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02nodejs讀取本地中文json文件出現(xiàn)亂碼解決方法
在本篇文章中我們給大家分享了關(guān)于nodejs讀取本地中文json文件出現(xiàn)亂碼的解決方法,需要的朋友們可以學(xué)習(xí)下。2018-10-10