Question

我正在构建一种浏览器内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中的效果。一些评论吗？

欢迎提供帮助。问候。

Answer 1

好！好的答案是模块模式。并不是23种GoF模式之一，主要是ES 2015模式。但是没关系！我仍然以这种方式发展。谢谢！

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

[认为这已解决]

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

Answer 3

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

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

ES6：优化命令模式

3 个答案: