命令模式_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: iGuard6.0 — 各适其用的网站防护... 下一篇:插入排序

命令模式

发布时间：2022-07-04 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了命令模式，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

命令模式的本质就是对命令的封装，将发出命令的责任和执行命令的责任区分开；

每一个命令都是一个操作；请求的一方发出请求操作，要求执行一个命令；接收的一方收到请求，执行对应的操作

我们看一个简单的命令模式

 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>