目录

  1. 介绍
  2. 示例——菜单程序
  3. JavaScript中的命令
  4. 宏命令
  5. 智能命令与傻瓜命令

介绍

命令模式是最简单和优雅的模式之一，”命令”指的是一个执行某些特定事情的指令。命令模式最常见的应用场景：有时需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时需要用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

示例——菜单程序

假设某复杂的用户界面需要提供大量的交互按钮，现安排部分程序员负责绘制按钮，另一部分程序员负责编写按钮的具体行为，这些行为要封装在对象里面。对于绘制按钮的程序员来说，他们并不需要知道按钮将用来做什么。

绘制按钮：

  1. ...
  2. <body>
  3.     <button id="btn1">按钮A</button>
  4.     <button id="btn2">按钮B</button>
  5. </body>
  6. <script>
  7.     var btn1 = document.getElementById('btn1');
  8.     var btn2 = document.getElementById('btn2');
  9. </script>
  10. ...

绑定命令函数：

  1. function setCommand(btn, command) {
  2.     btn.onclick = function() {
  3.         command.execute();
  4.     }
  5. }

编写按钮行为：

  1. var MenuBar = {
  2.     refresh: function() {
  3.         console.log('刷新菜单目录');
  4.     }
  5. };
  7. var SubMenu = {
  8.     add: function() {
  9.         console.log('增加子菜单');
  10.     }
  11. }

封装命令类：

  1. var RefreshMenuBarCommand = function(receiver) {
  2.     this.receiver = receiver;
  3. };
  4. RefreshMenuBarCommand.prototype.execute = function() {
  5.     this.receiver.refresh();
  6. };
  7. var AddSubMenuCommand = function(receiver) {
  8.     this.receiver = receiver;
  9. };
  10. AddSubMenuCommand.prototype.execute = function() {
  11.     this.receiver.add();
  12. };

最后一步，将命令接收者传入到 command 对象中，并且把 command 对象安装到 button 上面：

  1. var refreshMenuBarCommand = new RefreshMenuBarCommand(MenuBar);
  2. var addSubMenuCommand = new AddSubMenuCommand(SubMenu);
  3. setCommand(btn1, refreshMenuBarCommand);
  4. setCommand(btn2, addSubMenuCommand);

JavaScript中的命令

JavaScript 作为将函数作为一等对象的语言，跟策略模式一样，命令模式也早已融入了 JavaScript 语言之中，运算块可以封装到普通函数中，然后将函数作为载体四处传递运算块。如果需要请求”接收者”，则可以借助闭包来实现。

实现代码如下：

  1. var setCommand = function(button, command) {
  2.     button.onclick = function() {
  3.         command.execute();
  4.     }
  5. };
  7. var MenuBar = {
  8.     refresh: function() {
  9.         console.log('刷新菜单界面');
  10.     }
  11. };
  13. var RefreshMenuBarCommand = function(receiver) {
  14.     return {
  15.         execute: function() {
  16.             receiver.refresh();
  17.         }
  18.     }
  19. };
  21. var refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);
  22. setCommand(btn1, refreshMenuBarCommand);

宏命令

宏命令是一组命令的集合，通过执行宏命令的方式，可以一次执行一批命令。宏命令是命令模式和组合模式的联用产物，在组合模式章节可能会再提起宏命令，以下是一个使用宏命令的 demo：

  1. // 各种要执行的命令
  2. var closeDoorCommand = {
  3.     execute: function() {
  4.         console.log('关门');
  5.     }
  6. };
  7. var openPcCommand = {
  8.     execute: function() {
  9.         console.log('开电脑');
  10.     }
  11. };
  12. var openQQCommand = {
  13.     execute: function() {
  14.         console.log('登录QQ');
  15.     }
  16. };
  18. // 定义宏命令
  19. var MacroCommand = function() {
  20.     return {
  21.         commandsList: [],// 命令队列
  22.         add: function(command) {
  23.             this.commandsList.push(command);
  24.         },
  25.         execute: function() {
  26.             for (var i = 0, command; i < this.commandsList.length; i++) {
  27.                 command = this.commandsList[i];
  28.                 command.execute();
  29.             }
  30.         }
  31.     }
  32. };
  34. var macroCommand = MacroCommand();
  36. // 组合命令
  37. macroCommand.add(closeDoorCommand);// 先关门
  38. macroCommand.add(openPcCommand);// 再打开电脑
  39. macroCommand.add(openQQCommand);// 最后打开QQ
  41. macroCommand.execute();// 执行宏命令

智能命令与傻瓜命令

傻瓜命令只会负责把客户的请求转交给接收者来执行，这种模式的好处是请求发起者和请求接收者之间尽可能地得到了解耦。

智能命令则可以直接实现请求，这样就不再需要接收者的存在，没有接收者的智能命令，退化到和策略模式非常相近，从代码结构上已经很难分辨它们，能分辨它们的只有它们的意图的不同。

  1. ID         : 47
  2. DATE       : 2017/12/09
  3. AUTHER     : WJT20
  4. TAG        : JavaScript