javascript - 如何在模块化用户界面中管理基于事件的输入?

标签 javascript user-interface event-handling modular

用户界面通常由不同的输入设备组成,例如按钮、输入字段、对话框、 slider 等。事件顺序通常决定了预期的行为,而这种行为通常不容易用简单的规则捕捉。

是否有解决此类问题的通用方法?

为了说明一个界面是多么容易变得复杂,以一个带有 3 个切换按钮的界面为例。如果单击按钮的行为取决于每个按钮的状态,则可能有 2 ^ 3 * 3 = 24 种事件情况。如果行为也取决于事件历史,则事件案例的数量呈指数增长。

举一个现实生活中的例子,看看我正在使用的所见即所得的文本编辑器。我在编辑器上选择焦点/模糊事件以启用/禁用编辑器。一些按钮(小部件)会立即将焦点返回到编辑器,而其他按钮会打开一个对话框。在下图中,箭头显示了单击界面元素时焦点的位置。

我发现这里的焦点管理是一个棘手的问题,经常会引入不受欢迎或违反直觉的行为。

user interface sketch

最佳答案

您可以使用 Mediator AKA Message Broker 模式来解耦 UI 组件(通常是任何类型的应用程序组件),这里有两篇关于它的文章:

  1. Mediator Pattern applied to Javascript
  2. Mediator pattern javascript

关于javascript - 如何在模块化用户界面中管理基于事件的输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10861243/

相关文章:

javascript - jquery 将监听器应用于一组元素

android - 管理 fragment 到 fragment 的导航

c++ - 如何突出显示特定的 `QWidget`

typescript - 在 TypeScript 类中创建自定义事件

javascript - 为什么标记标题不显示在我的 Google Maps API3 应用程序中?

javascript - 如何设置选择框的选项

javascript - 如何在逗号处拆分字符串但忽略\,?

java - 根据上一个面板中的用户输入显示可变 GUI 面板的建议

java - 文本字段下的单词建议文本框 - java

javascript - 单击元素时如何执行外部函数?