ES6 :优化命令模式

Question

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

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

在幕后，有一个调用器和许多命令对象：

// 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中。一些评论？

欢迎帮助。致以问候。

Answer 1

好的!最好的答案是Module模式。不是23种GoF模式中的一种，主要是ES 2015模式。但是无关紧要！我现在仍然是这样发展的。谢谢！

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

考虑到这个问题已经解决了

Answer 2

您可以使用名为context的webpack的特性来执行一系列导入

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);

Answer 3

关于2/2，你应该使用观察者或PubSub。

将存储更改作为单独的进程进行处理。如果你正在使用React，可以在任何时间内完成。