时间戳

首页 > 解决方案 > ES6：优化命令模式

javascript - ES6：优化命令模式

问题描述

我正在构建一种用于在游戏引擎上进行测试的浏览器内 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 效果的代码的确切位置。一些评论？

欢迎帮助。问候。

标签： javascriptdesign-patternscommand

解决方案

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

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

[认为这已解决]

推荐阅读