不直接调用类的内部方法，而是通过给“指令函数”传递参数，由“指令函数”来调用类的内部方法，命令模式的由来其实是回调函数（callback）的代替品

假设场景

有10个button、每个button所做的事情不一样、目前也不知道具体做什么、接到的任务就是A去写10个按钮、B去写这10个按钮的业务、如果通过命令模式去编写呢？

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>Document</title>
  9. </head>
  11. <body>
  12. <button id="button1">刷新目前</button>
  13. <button id="button2">添加目前</button>
  14. <button id="button3">删除目前</button>
  15. </body>
  17. </html>
  19. <script>
  20. // 封装行为
  21. class MenuBar{
  22.     constructor(){}
  23.     refresh(){
  24.         console.log('刷新菜单目录')
  25.     }
  26. }
  28. class SubMenu{
  29.     constructor(){}
  30.     add(){
  31.         console.log('添加菜单目录')
  32.     }
  33.     del(){
  34.         console.log('删除菜单')
  35.     }
  36. }
  38. // 把行为封装在命令类中
  39. class RefreshMenuBarCommand{
  40.     constructor(receiver){
  41.         this.receiver = receiver
  42.     }
  43.     execute(){
  44.         this.receiver.refresh()
  45.     }
  46. }
  47. class AddSubmenuCommand{
  48.     constructor(receiver){
  49.         this.receiver = receiver
  50.     }
  51.     execute(){
  52.         this.receiver.add()
  53.     }
  54. }
  55. class DelSubmenuCommand{
  56.     constructor(receiver){
  57.         this.receiver = receiver
  58.     }
  59.     execute(){
  60.         this.receiver.del()
  61.     }
  62. }
  64. function setCommand(button, command){
  65.     button.onclick = function(){
  66.         command.execute()
  67.     }
  68. }
  69. let button1 = document.getElementById('button1')
  70. let button2 = document.getElementById('button2')
  71. let button3 = document.getElementById('button3')
  72. setCommand(button1, new RefreshMenuBarCommand(new MenuBar()))
  73. setCommand(button2, new AddSubmenuCommand(new SubMenu()))
  74. setCommand(button3, new DelSubmenuCommand(new SubMenu()))
  75. </script>

总结

优点

  • 降低耦合，将请求者和请求接收者进行解耦

  • 扩展性高、如果需要爱扩展新命令，直接定义命令对象即可，如果要执行一组命令、发送一组命令给接收者就好

    缺点

  • 增加复杂度