6、命令模式

使用命令模式实现松耦合的JavaScript应用

原创于 2022-10-24 21:04:29 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

设计模式专栏收录该内容

6 篇文章

订阅专栏

本文探讨了命令模式在JavaScript中的应用，通过一个简单的例子展示了如何利用命令模式将事件绑定与具体操作解耦，实现代码的高内聚和低耦合。文中提到，命令模式是一种回调函数的面向对象替代方案，它允许请求发起者与接收者之间保持独立。在示例中，不同的按钮触发不同的操作，如刷新菜单界面、增加子菜单和删除子菜单，体现了命令模式的灵活性。

命令模式

命令模式中的命令（command）指的是一个执行某些特定事情的指令。

命令模式最常见的应用场景是：有时候需要向某些对象发送请求，但是不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发生者和请求者能够消除彼此之间的耦合关系。

命令模式的由来，其实是回调(callback)函数的一个面向对象的替代品

 <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')
 
   var bindClick = function(button,func){
     button.onclick = func;
   }
   
   var MenuBar = {
     refresh:function(){
       console.log('刷新菜单界面')
     }
   }
   
   var SubMenu = {
     add: function(){
       console.log('增加子菜单')
     }
     del: function(){
       console.log('删除子菜单')
     }
   }
   
   bindClick(button1,MenuBar.refresh)
   bindClick(button2,SubMenu.add)
   bindClick(button3,SubMenu.del)
 </script>

命令模式在JavaScript语言中的一种隐性的模式