分类
商品
- 商品
- 店铺
- 资讯
<body> <button id="botton1">点击按钮1</button> <button id="botton2">点击按钮2</button> <button id="botton3">点击按钮3</button> </body> <script> var button1 = document.getElementById('botton1'); var button2 = document.getElementById('botton2'); var button3 = document.getElementById('botton3'); </srcipt>定义setCommand函数，负责往按钮上增加命令；
var setCommand = function(button,command) { button.onclick = function() { command.execute(); }}按钮后面的行为被封装在下面的两个对象中：
var MenBar = { refresh:function() { // 刷新菜单的操作 }};var SubMenu = { add:function() { // 增加菜单的操作 }, del:function() { // 删除菜单的操作 }}在让button变得有用起来之前，我们先要把这些行为都封装在命令类中：
// 刷新var RefreshMenuBarCommand = function(receiver) { this.receiver = receiver;};RefreshMenuBarCommand.prototype.execute = function() { this.receiver.refresh();};// 增加var AddMenuCommand = function (receiver) { this.receiver = receiver;};AddMenuCommand.prototype.execute = function() { this.receiver.add();};// 删除var DelMenuCommand = function(receiver) { this.receiver = receiver;};DelMenuCommand.prototype.execute = funciton() { this.receiver.del();};最后把命令接收者传入到command对象中，并且把command对象安装到button上面：
var refreshMenuBarCommand = new RefreshMenuBarCommand(MenBar);var addMenuCommand = new AddMenuCommand(SubMenu);var delMenuCommand = new DelMenuCommand(SubMenu);setCommand(button1,refreshMenuBarCommand);setCommand(button2,addMenuCommand);setCommand(button3,delMenuCommand);命令模式的由来，其实就是回调函数的一个面向对象的替代品。
利用JavaScript实现命令模式的：
var bindClick = function (button,func) { button.onclick = func;};var MenBar = { refresh = function () { console.log('刷新页面！'); }};var SubMenu = { add : function () { console.log('增加菜单！') }, del :funciton () { console.log('删除菜单') }};bindClick(button1,MenBar.refresh);bindClick(button2,SubMenu.add);bindClick(button3,SubMenu.del);在面向对象设计中，命令模式的接收者被当成command对象的属性保存起来，同时商定执行命令的操作调用command.execute方法。在使用闭包的命令模式实现中，接收者被封闭在闭包产生的环境中，执行命令更加简单，仅仅执行回调函数就可；
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);当然，假如想要更明确地表达当前正在使用命令模式，或者者出了执行命令之外，将来还有可能还要提供撤销命令等操作。那么最好还是把执行函数改成调用execute方法：
var RefreshMenuBarCommand = function (receiver) { reuturn { execute : function () { receiver.refresh(); } }};var setCommand = function (button ,command) { button.onclick = function () { command.execute(); }};var refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);setCommand(button1,refreshMenuBarCommand);
送码官方微信
手机访问领取大礼包