JS 設計模式五 -- 命令模式

概念

命令模式中的命令（command） 指的是 一個執行某些待定事情的指令。

用一種鬆耦合的方式來設計程序，使得請求發送者和請求接收者可以消除彼此之間的耦合關係。

 

例子

假設html結構以下：
<button id="button1">刷新菜單目錄</button>
<button id="button2">增長子菜單</button>

var setCommand = function(button,func) {
    button.onclick = function(){
        func();
    }
 }; 
 var MenuBar = {
    refersh: function(){
        alert("刷新菜單界面");
    }
 };
 var SubMenu = {
    add: function(){
        alert("增長菜單");
    }
 };
 // 刷新菜單
 var RefreshMenuBarCommand = function(receiver) {
    return function(){
        receiver.refersh();    
    };
 };
 // 增長菜單
 var AddSubMenuCommand = function(receiver) {
    return function(){
        receiver.add();    
    };
 };
 // 刷新菜單
 var refershMenuBarCommand = RefreshMenuBarCommand(MenuBar);
 // 增長菜單
 var addSubMenuCommand = AddSubMenuCommand(SubMenu);
 setCommand(b1,refershMenuBarCommand);
 setCommand(b2,addSubMenuCommand);

 

理解宏命令

宏命令是一組命令的集合，經過執行宏命令的方式，能夠一次執行一批命令。

這樣相似把頁面的全部函數方法放在一個數組裏面去，而後遍歷這個數組，依次執行該方法。

 

例子

var command1 = {
    execute: function(){
        console.log(1);
    }
}; 
var command2 = {
    execute: function(){
        console.log(2);
    }
};
var command3 = {
    execute: function(){
        console.log(3);
    }
};
// 定義宏命令，command.add方法把子命令添加進宏命令對象，
// 當調用宏命令對象的execute方法時，會迭代這一組命令對象，
// 而且依次執行他們的execute方法。
var command = function(){
    return {
        commandsList: [],
        add: function(command){
            this.commandsList.push(command);
        },
        execute: function(){
            for(var i = 0,commands = this.commandsList.length; i < commands; i+=1) {
                this.commandsList[i].execute();
            }
        }
    }
};
// 初始化宏命令
var c = command();
c.add(command1);
c.add(command2);
c.add(command3);
c.execute();  // 1,2,3