命令模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>命令模式的第二种应用</title> </head> <body> <button id="button1">刷新菜单目录</button> <button id="button2">增加子菜单</button> <button id="button3">删除子菜单</button> <button id="button4">更新子菜单</button> <script> // 如下代码上的四个按钮 点击事件 var b1 = document.getElementById("button1"), b2 = document.getElementById("button2"), b3 = document.getElementById("button3"), b4 = document.getElementById("button4"); /* bindEnv函数负责往按钮上面安装点击命令。点击按钮后，会调用 函数 */ var bindEnv = function (button, func) { button.onclick = function () { func(); } }; // 现在我们来编写具体处理业务逻辑代码 var Todo1 = { test1: function () { alert("我是来做第一个测试的"); } }; // 实现业务中的增删改操作 var Menu = { add: function () { alert("我是来处理一些增加操作的"); }, del: function () { alert("我是来处理一些删除操作的"); }, update: function () { alert("我是来处理一些更新操作的"); } }; // 调用函数 bindEnv(b1, Todo1.test1); // 增加按钮 bindEnv(b2, Menu.add); // 删除按钮 bindEnv(b3, Menu.del); // 更改按钮 bindEnv(b4, Menu.update); </script> </body> </html>
命令模式的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>命令模式</title> </head> <body> <button id="button1">刷新菜单目录</button> <button id="button2">增加子菜单</button> <button id="button3">删除子菜单</button> <script> var b1 = document.getElementById("button1"), b2 = document.getElementById("button2"), b3 = document.getElementById("button3"); // 定义setCommand 函数，该函数负责往按钮上面安装命令。点击按钮后会执行command对象的execute()方法。 var setCommand = function (button, command) { button.onclick = function () { command.execute(); } }; // 下面我们自己来定义各个对象来完成自己的业务操作 var MenuBar = { refersh: function () { alert("刷新菜单目录"); } }; var SubMenu = { add: function () { alert("增加子菜单"); }, del: function () { alert("删除子菜单"); } }; // 下面是编写命令类 var RefreshMenuBarCommand = function (receiver) { this.receiver = receiver; }; RefreshMenuBarCommand.prototype.execute = function () { this.receiver.refersh(); } // 增加命令操作 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 refershBtn = new RefreshMenuBarCommand(MenuBar); var addBtn = new AddSubMenuCommand(SubMenu); var delBtn = new DelSubMenuCommand(SubMenu); setCommand(b1, refershBtn); setCommand(b2, addBtn); setCommand(b3, delBtn); </script> </body> </html>
