命令模式
命令模式的本质就是对命令的封装，将发出命令的责任和执行命令的责任区分开；
每一个命令都是一个操作；请求的一方发出请求操作，要求执行一个命令；接收的一方收到请求，执行对应的操作
我们看一个简单的命令模式
1 <!DOCTYPE html> 2 <html lang="en"> 3 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> 10 <button id="btn">按我发出请求</button> 11 12 <body> 13 <script> 14 var btn = document.getElementById("btn"); 15 btn.onclick=function(){ 16 console.log('执行请求') 17 } 18 19 </script> 20 </body> 21 22 </html>
此时我们将操作拆分
1 <script> 2 var btn = document.getElementById("btn"); 3 // 执行事件的对象 4 var add = { 5 execute: function() { 6 console.log("我增加了") 7 } 8 }; 9 // 请求操作 10 var setCommand = function(btn, command) { 11 btn.onclick = function() { 12 command.execute() 13 } 14 }; 15 btn.setCommand(btn,add) 16 </script>
我们发现，上面的代码将执行命令和请求命令进行了一个拆分。
命令模式一定不是设计某一种事件，其所有设计模式都是为了庞大的，更长远的角度考虑，代码不一定最少的，但是一定是优化
比如我们想让btn按钮单击进行删除，如果没有使用命令模式，我们可能需要再次设置一个点击事件，但是我们可以使用命令模式进行区分
1 <script> 2 var btn = document.getElementById("btn"); 3 // 执行事件的对象 4 var add = { 5 execute: function() { 6 console.log("我增加了") 7 } 8 }; 9 var del = { 10 execute: function() { 11 console.log("我删除了") 12 } 13 }; 14 // 请求操作 15 var setCommand = function(btn, command) { 16 btn.onclick = function() { 17 command.execute() 18 } 19 }; 20 // 随机数 21 var random = parseInt(Math.random() * 10); 22 23 if (random % 2 == 0) { 24 setCommand(btn, add) 25 } else { 26 setCommand(btn, del) 27 } 28 </script>
