ES6：优化命令模式答案

【问题标题】：ES6 : optimizing the Command patternES6：优化命令模式
【发布时间】：2019-01-10 13:10:59
【问题描述】：

我正在构建一种用于在游戏引擎上进行测试的浏览器内 CLI。

该应用看起来像一个控制台，在结果序列容器 DIV 下方有一个输入测试和一个提交按钮。

在场景后面，有一个 Invoker 和许多 Commands 对象：

// imports
import Invoker from '../cli/Invoker.js'

import Command1 from '../commands/Command1.js'
import Command2 from '../commands/Command2.js'
// ...
import Command20 from '../commands/Command20.js'

// instanciatiing
const invoker = new Invoker(context)

const commands = [
  new Command1(),
  new Command2(),
  // ...
  new Command20(),
]

// attach in invoker
commands.forEach(command => invoker.install(command))

用法很简单：

// later...
invoker.run('command20', { ...withArgs })

问题 1/2：

由于这会创建一堆导入和初始化代码，随着时间的推移，它们可能会污染客户端应用代码的命名空间。如何解决？建造者模式？门面？蝇量级？还是别的什么？

问题 2/2

渲染结果：无法确定将产生运行命令效果的代码放置在何处，渲染（使用 Mustache 或 JSX）并将其附加到生成的 DIV。一些cmets？

欢迎帮助。问候。

【问题讨论】：

你所有的命令都叫命令吗？给他们起个好名字不是更好，因此这不会成为问题还是我误解了？
还有，怎么办。 “污染客户端应用程序代码的命名空间”，如果它在自己的模块中？
不，是的！它们有 Init、RayCast、Play、Revert、Help、Status、Cheat、ListCommands 等名称……就是这样！这个想法是将它们分组到一个模块中，并公开生成的调用程序......
@Hefeust，您可以在地图上使用动态导入和存储命令...

标签： javascript design-patterns command

【解决方案1】：

好的！好的答案是模块模式。不是真正的 23 种 GoF 模式之一，主要是 ES 2015 模式。但没关系！我还是这样发展的。谢谢！

对于问题 2/2，我打算将渲染方法附加到生成的对象 - 或 - 在每次命令调用后绑定到上下文的每个命令的渲染方法...

[认为这已解决]

【讨论】：

【解决方案2】：

您可以使用 webpack 的称为 context 的功能来执行大量导入

const files = require.context('.', false, /\.js$/);
const commands = {};

files.keys().forEach((key) => {
  if (key === './index.js') return;
  commands[key.replace(/(\.\/|\.js)/g, '')] = files(key).default;
});

export default commands;

你可以使用命名空间作为 vuex

command1.js

export { actions: { get: {} }, namespaced: true }

app.js

context.dispatch('command1/get', param);

【讨论】：

【解决方案3】：

关于 2/2，您应该继续使用 Observer 或 PubSub。

只需按照现代方式，使用 redux/mobx（我更喜欢 mobx 用于中小型项目）或您选择的任何其他技术将商店添加到您的项目，并在命令执行后将更改推送到商店。将存储更改作为单独的过程处理。如果您正在使用 React，可以立即完成。

【讨论】：