栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

作者按:《每天一个设计模式》旨在初步领会设计模式的精髓,目前采用javascript和python两种语言实现。诚然,每种设计模式都有多种实现方式,但此小册只记录最直截了当的实现方式 :)

原文地址是:《每天一个设计模式之命令模式》

欢迎关注个人技术博客:godbmw.com。每周 1 篇原创技术分享!开源教程(webpack、设计模式)、面试刷题(偏前端)、知识整理(每周零碎),欢迎长期关注!

如果您也想进行知识整理 + 搭建功能完善/设计简约/快速启动的个人博客,请直接戳theme-bmw

0. 示例代码
  • 此节全部代码

  • 《每天一个设计模式》地址

1. 什么是“命令模式”?

命令模式是一种数据驱动的设计模式,它属于行为型模式。

  1. 请求以命令的形式包裹在对象中,并传给调用对象。

  2. 调用对象寻找可以处理该命令的合适的对象,并把该命令传给相应的对象。

  3. 该对象执行命令。

在这三步骤中,分别有 3 个不同的主体:发送者、传递者和执行者。在实现过程中,需要特别关注。

2. 应用场景

有时候需要向某些对象发送请求,但是又不知道请求的接受者是谁,更不知道被请求的操作是什么。此时,命令模式就是以一种松耦合的方式来设计程序

3. 代码实现

3.1 python3 实现

命令对象将动作的接收者设置在属性中,并且对外暴露了execute接口(按照习惯约定)。

在其他类设置命令并且执行命令的时候,只需要按照约定调用Command对象的execute()即可。到底是谁接受命令,并且怎么执行命令,都交给Command对象来处理!


__author__ = 'godbmw.com'



# 接受到命令,执行具体操作

class Receiver(object):

  def action(self):

    print("按钮按下,执行操作")



# 命令对象

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__ == "__main__":



  receiver = Receiver()



  command = Command(receiver)



  button = Button()

  button.set_command(command)

  button.down()

3.2 ES6 实现

setCommand方法为按钮指定了命令对象,命令对象为调用者(按钮)找到了接收者(MenuBar),并且执行了相关操作。而按钮本身并不需要关心接收者和接受操作


// 接受到命令,执行相关操作

const MenuBar = {

  refresh() {

    console.log("刷新菜单页面");

  }

};



// 命令对象,execute方法就是执行相关命令

const RefreshMenuBarCommand = receiver => {

  return {

    execute() {

      receiver.refresh();

    }

  };

};



// 为按钮对象指定对应的 对象

const setCommand = (button, command) => {

  button.onclick = () => {

    command.execute();

  };

};



let refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);

let button = document.querySelector("button");

setCommand(button, refreshMenuBarCommand);

下面是同级目录的 html 代码,在谷歌浏览器中打开创建的index.html,并且打开控制台,即可看到效果。






  

    

    

    

    命令模式

  

  

    

    

  



4. 参考
  • 《Javascript 设计模式和开发实践》

  • 如何实现命令模式

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号