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

 

你可能感兴趣的:(JavaScript)