命令模式的應(yīng)用場景：
有時(shí)候需要向某些對象發(fā)送請求，但是并不知道請求的接收者是誰，也不知道被請求的操作是什么，此時(shí)希望用一種松耦合的方式來設(shè)計(jì)軟件，使得請求發(fā)送者和請求接收者能夠消除彼此之間的耦合關(guān)系。
html代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>js：命令模式</title> <script type="text/javascript" src="command.js"></script></head><style type="text/css">button{ margin: 5px; border: 0; width: 70px; height: 35px; background: #6B78BF; color: white; font-size: 14px; font-family: "微軟雅黑"; cursor: pointer;}#textarea{ margin: 5px; width: 400px; height: 200px; resize: none; color: #666; font-size: 14px; border: 2px solid #6B78BF;}</style><body><button id="button1">刷新</button><button id="button2">新增</button><button id="button3">刪除</button><br/><textarea id="textarea">這是預(yù)設(shè)的內(nèi)容</textarea></body></html>js代碼：
// 在頁面中使用例：setCommand( button1, refreshMenuBarCommand );來發(fā)送命令// setCommand 函數(shù)負(fù)責(zé)往按鈕上面安裝命令，預(yù)留好安裝命令的接口var setCommand = function( button , command ){ button.onclick = function(){ command.execute(); }}// 編寫點(diǎn)擊按鈕之后的具體行為：刷新菜單界面、增加子菜單和刪除子菜單var MenuBar = { refresh: function(){ var cur_date = new Date(); document.getElementById("textarea").value+=cur_date.toLocaleString()+" 刷新菜單目錄/r"; }}var SubMenu = { add: function(){ var cur_date = new Date(); document.getElementById("textarea").value+=cur_date.toLocaleString()+" 新增菜單目錄/r"; }, del: function(){ var cur_date = new Date(); document.getElementById("textarea").value+=cur_date.toLocaleString()+" 刪除子菜單/r"; }}//封裝行為在命令類中var RefreshMenuBarCommand = function( receiver ){ this.receiver = receiver;}RefreshMenuBarCommand.prototype.execute = function(){ this.receiver.refresh();}var AddSubMenuCommand = function( receiver ){ this.receiver = receiver;}AddSubMenuCommand.prototype.execute = function(){ this.receiver.add();}var DelSubMenuCommand = function( receiver ){ this.receiver =receiver}DelSubMenuCommand.prototype.execute = function(){ this.receiver.del();}//命令接收者傳入到 command 對象var refreshMenuBarCommand = new RefreshMenuBarCommand( MenuBar );var addSubMenuCommand = new AddSubMenuCommand( SubMenu );var delSubMenuCommand = new DelSubMenuCommand( SubMenu );window.onload = function(){ //把 command 對象安裝到 button 上面 var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); var button3 = document.getElementById("button3"); setCommand( button1, refreshMenuBarCommand ); setCommand( button2, addSubMenuCommand ); setCommand( button3, delSubMenuCommand );}總結(jié)：
從書上抄代碼練習(xí)的過程中出了很多錯(cuò)誤，最嚴(yán)重的莫過于“receiver”這個(gè)單詞寫錯(cuò)了導(dǎo)致很多天都再?zèng)]看這個(gè)練習(xí)，出錯(cuò)的過程讓我能夠重新審視代碼的內(nèi)容，逐行進(jìn)行理解與調(diào)試。雖然仍然不很理解命令模式，但是通過這部分的內(nèi)容和對mySQL的學(xué)習(xí)，心里隱隱的留下了關(guān)于命令模式的影子。
參考：
《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》第9章9.2節(jié)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
