javascript - Maquette 中组件之间的通信

Question

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

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

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

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

谢谢!

PS:从票务转贴到这里的问题 #71以获得更多答案。

Answer 1

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

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