Maquette 中组件之间的通信答案

【问题标题】：Communication between components in MaquetteMaquette 中组件之间的通信
【发布时间】：2017-01-28 03:14:30
【问题描述】：

我的问题是关于Maquette Javascript 框架中组件之间的通信。

假设我在Application 组件中使用了一个Menu 子组件：Application 实例想知道何时在Menu 实例中选择了一个菜单项，以便交换显示的主要内容在应用程序中（例如）。换句话说，我需要一种在子组件与其父组件之间进行通信的方法。如何在 Maquette 中实现这一点？

当然，我可以将应用程序实例拥有的回调传递给菜单实例，菜单实例将在选择项目时调用。但我有点不愿意这样做，因为“选择”事件只是菜单组件的“渲染端”方面，所以我希望该事件不要泄漏到我的 Menu API 中，而是留在里面而是渲染函数/方法。

所以，我想在“渲染端”处理事件。但我想这意味着我必须从Menu 的渲染函数发送一个CustomEvent 并在Application 的渲染函数中注册一个CustomEvent 处理程序，对吧？模型是否支持此用例？对于我的用例，CustomEvent 是否还有其他替代方案？

谢谢！

PS：问题在#71 #71这里转发，以获得更多答案。

【问题讨论】：

【解决方案1】：

我们通常做的是将回调传递给当项目被点击时被调用的组件。例如，可以使用回调 menuItemClicked(menuItem: MenuItem) 构造菜单。恕我直言，这不会将任何特定于应用程序的知识泄漏到菜单/菜单项中。菜单的创建者可以在回调中执行任何操作，例如路由或更改变量。

事件系统当然也是可能的。我不建议使用 DOM 层次结构来冒泡事件。我可以想象Application 使用menu = createMenu(...) 创建菜单，然后调用menu.addEventListener('itemClicked', navigate) 或其他东西。

【讨论】：

为什么不推荐使用 DOM 层次结构？因为性能问题？
我认为使用 DOM 层次结构会使事情变得不必要地复杂。但我很好奇是否真的如此。也许您可以制作一个 jsfiddle 或 codepen 来演示您将如何实现这一点？
我意识到如果当前选定的项目在单击事件处理程序之外以编程方式更改，我可能还需要触发一个事件......所以它不能只是一个渲染端事件。我终于认为你的答案是要走的路。