脚本宝典收集整理的这篇文章主要介绍了

每天一个设计模式之命令模式

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote><p>作者按:《每天一个设计模式》旨在初步领会设计模式的精髓,目前采用<code><a href="http://www.js-code.com/tag/java" title="java" target="_blank">java</a>script</code>和<code><a href="http://www.js-code.com/tag/python" title="python" target="_blank">python</a></code>两种语言实现。诚然,每种设计模式都有多种实现方式,但此小册只记录最直截了当的实现方式 :)</p></blockquote> <p>原文地址是:<a href="https://godbmw.com/passages/2018-11-25-command-pattern/" rel="nofollow noreferrer" target="_blank">《每天一个设计模式之命令模式》</a></p> <p>欢迎关注个人技术博客:<a>godbmw.com</a>。每周 1 篇原创技术分享!开源教程(webpack、设计模式)、面试刷题(偏前端)、知识整理(每周零碎),欢迎长期关注!</p> <p><strong>如果您也想进行知识整理 + 搭建功能完善/设计简约/快速启动的个人博客,请直接戳<a href="https://github.com/dongyuanxin/theme-bmw" rel="nofollow noreferrer" target="_blank">theme-bmw</a></strong></p> <h2 id="articleHeader0">0. 示例代码</h2> <ul> <li><a href="https://github.com/dongyuanxin/design-pattern-demos/tree/master/command_pattern" rel="nofollow noreferrer" target="_blank">此节全部代码</a></li> <li><a href="https://godbmw.com/categories/%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AA%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" rel="nofollow noreferrer" target="_blank">《每天一个设计模式》地址</a></li> </ul> <h2 id="articleHeader1">1. 什么是“命令模式”?</h2> <blockquote><p>命令模式是一种数据驱动的设计模式,它属于行为型模式。</p></blockquote> <ol> <li>请求以命令的形式包裹在对象中,并传给调用对象。</li> <li>调用对象寻找可以处理该命令的合适的对象,并把该命令传给相应的对象。</li> <li>该对象执行命令。</li> </ol> <p>在这三步骤中,分别有 3 个不同的主体:<strong>发送者、传递者和执行者</strong>。在实现过程中,需要特别关注。</p> <h2 id="articleHeader2">2. 应用场景</h2> <p>有时候需要向某些对象发送请求,但是又不知道请求的接受者是谁,更不知道被请求的操作是什么。此时,<strong>命令模式就是以一种松耦合的方式来设计程序</strong>。</p> <h2 id="articleHeader3">3. 代码实现</h2> <h3 id="articleHeader4">3.1 <a href="http://www.js-code.com/tag/python" title="python" target="_blank">python</a>3 实现</h3> <p>命令对象将动作的接收者设置在属性中,并且对外暴露了<code>execute</code>接口(按照习惯约定)。</p> <p>在其他类设置命令并且执行命令的时候,只需要按照约定调用<code>Command</code>对象的<code>execute()</code>即可。到底是谁接受命令,并且怎么执行命令,都交给<code>Command</code>对象来处理!</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="__author__ = 'godbmw.com' # 接受到命令,执行具体操作 class Receiver(object): def action(self): print(&quot;按钮按下,执行操作&quot;) # 命令对象 class Command: def __init__(self, receiver): self.receiver = receiver def execute(self): self.receiver.action() # 具体业务类 class Button: def __init__(self): self.command = None # 设置命令对戏那个 def set_command(self, command): self.command = command # 按下按钮,交给命令对象调用相关函数 def down(self): if not self.command: return self.command.execute() if __name__ == &quot;__main__&quot;: receiver = Receiver() command = Command(receiver) button = Button() button.set_command(command) button.down()" title="" data-original-title="复制"></span> </div> </p></div> <pre class="python hljs"><code class="python">__author__ = <span class="hljs-string">'godbmw.com'</span> <span class="hljs-comment"># 接受到命令,执行具体操作</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Receiver</span><span class="hljs-params">(object)</span>:</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">action</span><span class="hljs-params">(<a href="http://www.js-code.com/tag/self" title="浏览关于“self”的文章" target="_blank" class="tag_link">self</a>)</span>:</span> pr<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a>(<span class="hljs-string">"按钮按下,执行操作"</span>) <span class="hljs-comment"># 命令对象</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Command</span>:</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">__<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>it__</span><span class="hljs-params">(self, receiver)</span>:</span> self.receiver = receiver <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">execute</span><span class="hljs-params">(self)</span>:</span> self.receiver.action() <span class="hljs-comment"># 具体业务类</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Button</span>:</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">__init__</span><span class="hljs-params">(self)</span>:</span> self.command = <span class="hljs-keyword">None</span> <span class="hljs-comment"># 设置命令对戏那个</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">set_command</span><span class="hljs-params">(self, command)</span>:</span> self.command = command <span class="hljs-comment"># 按下按钮,交给命令对象调用相关函数</span> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title"><a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>wn</span><span class="hljs-params">(self)</span>:</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> <span class="hljs-keyword">not</span> self.command: <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> self.command.execute() <span class="hljs-keyword">if</span> __<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>__ == <span class="hljs-string">"__main__"</span>: receiver = Receiver() command = Command(receiver) <a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a> = Button() button.set_command(command) button.down()</code></pre> <h3 id="articleHeader5">3.2 ES6 实现</h3> <p><code>setCommand</code>方法为按钮指定了命令对象,命令对象为调用者(按钮)找到了接收者(<code>MenuBar</code>),并且执行了相关操作。<strong>而按钮本身并不需要关心接收者和接受操作</strong>。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 接受到命令,执行相关操作 const MenuBar = { refresh() { console.log(&quot;刷新菜单页面&quot;); } }; // 命令对象,execute方法就是执行相关命令 const RefreshMenuBarCommand = receiver => {<br /> return {<br /> execute() {<br /> receiver.refresh();<br /> }<br /> };<br /> };</p> <p>// 为按钮对象指定对应的 对象<br /> const setCommand = (button, command) => {<br /> button.onclick = () => {<br /> command.execute();<br /> };<br /> };</p> <p>let refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);<br /> let button = document.querySelector(&quot;button&quot;);<br /> setCommand(button, refreshMenuBarCommand);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// 接受到命令,执行相关操作</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> MenuBar = { refresh() { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"刷新菜单页面"</span>); } }; <span class="hljs-comment">// 命令对象,execute方法就是执行相关命令</span> <span class="hljs-keyword">const</span> RefreshMenuBarCommand = <span class="hljs-function"><span class="hljs-params">receiver</span> =&gt;</span> { <span class="hljs-keyword">return</span> { execute() { receiver.refresh(); } }; }; <span class="hljs-comment">// 为按钮对象指定对应的 对象</span> <span class="hljs-keyword">const</span> setCommand = <span class="hljs-function">(<span class="hljs-params">button, command</span>) =&gt;</span> { button.<a href="http://www.js-code.com/tag/onclick" title="浏览关于“onclick”的文章" target="_blank" class="tag_link">onclick</a> = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { command.execute(); }; }; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar); <span class="hljs-keyword">let</span> button = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.querySelector(<span class="hljs-string">"button"</span>); setCommand(button, refreshMenuBarCommand);</code></pre> <p>下面是同级目录的 html 代码,在谷歌浏览器中打开创建的<code><a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.html</code>,并且打开控制台,即可看到效果。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot; /><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /><br /> <title>命令模式</title><br /> </head><br /> <body><br /> <button>按钮</button><br /> <script src=&quot;./main.js&quot;></script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>命令模式<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./main.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <h2 id="articleHeader6">4. 参考</h2> <ul> <li>《JavaScript 设计模式和开发实践》</li> <li><a href="https://www.yiibai.com/python_design_patterns/python_design_patterns_command.html" rel="nofollow noreferrer" target="_blank">如何实现命令模式</a></li> </ul> <p></code></p>

总结

以上是脚本宝典为你收集整理的

每天一个设计模式之命令模式

全部内容,希望文章能够帮你解决

每天一个设计模式之命令模式

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过