《JavaScript设计模式与开发实践》读书笔记之命令模式

1.命令模式

1.1 传统的命令模式

命令模式的应用场景：请求的发送者和请求接收者消除彼此耦合关系

以页面点击按钮为例

点击按钮后，借助命令对象，解开按钮和负责具体行为对象之间的耦合

<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');    
</script>

定义setCommand函数，绑定行为。

var setCommand=function(button,command){
    button.onclick=function(){
        command.execute();
    }
}

最后编写具体的行为，这些行为完成菜单栏的几项功能

var MenuBar={
    refresh:function(){
        console.log('refresh');
    }
};

var SubMenu={
    add:function(){
        console.log('add');
    },
    del:function(){
        console.log('del');
    }
};

把行为封装在命令类中

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对象中，并且将command对象绑定到button上

var refreshMenuBarCommand=new RefreshMenuBarCommand(MenuBar);
var addSubMenuCommand=new AddSubMenuCommand(SubMenu);
var delSubMenuCommand=new DelSubMenuCommand(SubMenu);
setCommand(button1,refreshMenuBarCommand);
setCommand(button2,addSubMenuCommand);
setCommand(button3,delSubMenuCommand);

1.2 JavaScript这的命令模式 

var bindClick=function(button,func){
    button.onclick=func;
};
var MenuBar={
    refresh:function(){
        console.log('refresh');
    }
};

var SubMenu={
    add:function(){
        console.log('add');
    },
    del:function(){
        console.log('del');
    }
};
bindClick(button1,MenuBar.refresh);
bindClick(button2,SubMenu.add);
bindClick(button3,SubMenu.del);

 

posted @ 2015-07-16 23:16  GongQi  阅读(228)  评论(0)  编辑  收藏  举报