命令模式

将执行的命令封装为一个对象，解决命令的发起者与命令的执行者之间的解耦，就叫做命令模式。
命令模式的一大特征就是，命令的发起者可以参数化配置自己的请求。

使用场景

比如有一个网站，很多页面都在使用列表展示的功能，那么这个创建列表的方法就比较适合封装起来，用以简化操作流程。

首先，我们创建一个命令模式的基本模型：

const Command = (() => {
  // 视图模板（因为需求里涉及到创建 html）
  const templates = {
    listTemplate: ``,
  };

  // 将要执行的命令集合
  const actions = {
    createList() {},
  };

  // 调用命令的对外接口
  const excute = () => {};
  return {
    excute,
  };
})();

接下来，就是填充 Command 方法里面的内容：

例子：

<style>
  ul {
    height: 120px;
    list-style: none;
    box-shadow: 0 0 10px #ccc;
    padding: 0;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
</style>

<ul id="list"></ul>

<script>
  const Command = (() => {
    // 视图模板（因为需求里涉及到创建 html）
    const templates = {
      // 添加字符串模板
      listTemplate: `<li>{{text}}</li>`,
    };

    // 用数据替换视图模板中的'{{}}'
    // 因为通用，所以可以单独提取出来
    const formateString = (str, data) => {
      // key 表示 '{{}}' 中的占位符（text）
      return str.replace(/\{{(\w+)}\}/g, (macth, key) => {
        return data[key];
      });
    };

    // 将要执行的命令集合
    const actions = {
      // 待执行"创建列表"的方法
      createList({ element = 'body', data = [], name = '' } = {}) {
        const ele = document.querySelector(element);
        let html = '';
        if (data.length > 0) {
          data.forEach((v) => {
            html += formateString(templates[name], v);
          });
          ele.innerHTML = html;
        }
      },
    };

    // 调用命令的对外接口
    const excute = ({ type = '', params = {} } = {}) => {
      actions[type](params);
    };
    return {
      excute,
    };
  })();

  // 测试命令模式函数
  const contrys = [
    { text: '阿根廷共和国' },
    { text: '阿拉伯联合酋长国' },
    { text: '阿富汗伊斯兰国' },
  ];

  Command.excute({
    type: 'createList',
    params: {
      element: '#list',
      data: contrys,
      name: 'listTemplate',
    },
  });
</script>

在明确了指令的格式之后，只要写一条指令，配置些许参数，就能够轻松创建一个列表，可以有效提高团队的开发效率。

如有错误，欢迎指正，本人不胜感激。