视图应该触发事件吗？

Question

我有一个 GUI 部分的类。它是一个拨动开关，具有switch 公共成员函数，可将 GUI 开关置于您想要的任何位置。当您单击 GUI 元素时，我希望触发一个 onToggle 事件以及调用 switch 函数的 GUI。

以下是我的选择（我正在考虑并希望得到您的建议）来实现这一点：

1) 创建一个 setOnclick 公共成员函数，我的控制器可以使用该函数将事件的触发分配给元素并处理 switch 函数调用。

toggleInstance.setOnclick(function() {
    onToggle.fire();
    toggleInstance.switch();
})

2) 我可以将事件触发和switch 函数调用放在类本身中

element.onclick = function() {
    onToggle.fire();
    public.switch();
}

我认为让 GUI 类（例如我的切换开关）完全没有任何逻辑或功能会很好，但我不确定这是否有必要。

我没有使用 MVC 框架，但我喜欢应用在 MV 和 C 之间分离功能的原则。

您能想到未来这两种方法的任何潜在缺点吗？

Answer 1

HTML/CSS/JavaScript：

在客户端代码中，您拥有表示内容的 HTML、定义该内容的呈现方式的 CSS 以及用于确定和分配内容和呈现元素的行为的 JavaScript。

简而言之，您的想法是正确的。只需将 JavaScript 排除在 HTML 之外，将 HTML 排除在 JavaScript 之外，您就已经在正确规划架构方面做了很多工作。

在 JavaScript 中，您可以遵循 MVC，但在大多数情况下，只要您记住 HTML 是内容，JavaScript 是行为，CSS 是表示，那么您已经做了很多工作来使您的代码具有高度可维护性。

话虽如此，让我们专注于您的 JavaScript。

MVC：

虽然我认为您确实有正确的想法，但您的第一个示例函数的命名可能并不完全正确。当我想到“setOnclick”时，我认为您正在设置 onclick 事件，而不是触发 onclick 事件。

因此，我想象一下：

// reuse this same function to bind that same event to other similar buttons
toggleInstance.setOnclick(function(element) {

    element.onclick = function() {
        onToggle.fire();
        public.switch();
    }
});

如果您需要多个控件来重复该事件，您只需传入该元素并将相同的点击处理程序绑定到它即可。

您可以更进一步，在单独的函数中定义实际的事件处理程序

// event handler is now named, so it can be easily reused
toggleSwitch: function() {
    onToggle.fire();
    public.switch();
}

toggleInstance.setOnclick(function(element) {

    // bind the event to the element passed in
    element.onclick = toggleInstance.toggleSwitch;
});

我唯一的建议是小心不要过度架构。 MVC 是一种平衡，过度架构的东西可能与粗心的架构不足的东西一样笨拙和难以使用。

您考虑这些细节很好；如果您知道需要重用哪些事件并专注于这些事件，他们将以较低的技术债务形式支付红利。