命令模式 -- js 自帶 · 前端知識 -- 學習整理

>[success] # 前端自帶命令模式 ~~~ 1.分析剛才的命令模式構成： Invoker ：請求的調用者，內部持有具體請求的引用，統一調用指令即 'ConcreteCommand' 定義的收口方法execute ConcreteCommand ：封裝的請求對象，內部持有Receiver對象，因為所謂指令是將Receiver 中的方法分成詳細條數通過統一收口來調用Receiver 中的方法 Receiver：請求接受者，就是一個對象里面有一堆方法，'ConcreteCommand ' 會根據里面方法去拆分對應的指令 2.通過js函數是一等公民的概念，讓命令模式成為了js與生俱來的特性，如果我們將'Receiver' 這個接受者中的方法直接傳遞給'Invoker'這個調用者利用回調函數來寫就會是下面的案例 ~~~ >[danger] ##### 代碼的實現 ~~~ <html> <head> <meta charset="utf-8"> </head> <body> <button id="button1">點擊按鈕1</button> <button id="button2">點擊按鈕2</button> <button id="button3">點擊按鈕3</button> </body> <script> var button1 = document.getElementById('button1') var button2 = document.getElementById('button2') var button3 = document.getElementById('button3') var bindClick = function (button, func) { button.onclick = func } var MenuBar = { refresh:function () { console.log('刷新菜單目錄') } } var SubMenu = { add:function () { console.log('增加子菜單') }, del:function () { console.log('刪除子菜單') } } // 這種使用和剛才案例還是有不同點上面的案例對指令統一收口 // 最后都是 execute 作為調用，可以不用關系新這些對象開發人員方法定義 // 內部實現，只要他們將指令和對應的處理指令的對象關聯即可 bindClick( button1, MenuBar.refresh ); bindClick( button2, SubMenu.add ); bindClick( button3, SubMenu.del ); </script> </html> ~~~ >[danger] ##### 方案二使用閉包 ~~~ 1.在Java中你可能需要針對指令還需要聲明一個接口，然策略模式都繼承，在'Invoker '請求通過傳入的對象同一調用上篇案例的'execute'方法 2.但是現在不想向上面的案例沒有每一個單獨的策略對象，又不想像上一篇文章需要封裝那么多策略類，就個可以使用閉包 ~~~ ~~~ var setCommand = function( button, func ){ button.onclick = function(){ func(); } }; var MenuBar = { refresh: function(){ console.log( '刷新菜單界面' ); } }; // 利用閉包封裝單個指令 var RefreshMenuBarCommand = function( receiver ){ return function(){ receiver.refresh(); } }; var refreshMenuBarCommand = RefreshMenuBarCommand( MenuBar ); setCommand( button1, refreshMenuBarCommand ); ~~~