zoukankan html css js c++ java

《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);

查看全文

相关阅读:
2-SAT
CDQ分治
 整体二分
 未完成
 [BZOJ1857][SCOI2010]传送带-[三分]
[LCT应用]
[胡泽聪趣题选讲]大包子环绕宝藏-[状压dp]
[清华集训2015 Day2]矩阵变换-[稳定婚姻模型]
[清华集训2015 Day1]主旋律-[状压dp+容斥]
[清华集训2015 Day1]玛里苟斯-[线性基]

原文地址：https://www.cnblogs.com/GongQi/p/4652810.html