JavaScriptMVC:视图如何通知控制器

JavaScript MVC: how do views notify the controller

本文关键字：通知 控制器 何通知 视图 JavaScriptMVC      更新时间：2023-09-26

如果我在JavaScript中遵循粗略的MVC模式，那么视图（例如button元素）通知控制器的最佳方式是什么？

button是否应该触发控制器必须侦听的事件？或者，button应该直接调用控制器函数吗？或者控制器应该将事件分配给视图？

感谢您的意见！

我认为View应该捕获按钮触发的事件，并触发它自己的事件，该事件将由控制器处理。

让我解释一下：

@雷诺斯写道：

控制器监听输入。这意味着控制器监听事件来自DOM节点

就我个人而言，尽管我同意第一种说法，但我不喜欢这种解释。

遵循此语句意味着控制器必须知道UI中的每个按钮/文本字段/元素及其ID/Selector。

我更喜欢View fire语义事件，如"languageSelected"或"searchRequested"，并将相关数据添加到事件中。

因此，一个典型的流程是，当用户单击按钮时，View呈现一些UI（比如说它有一个搜索框和一个按钮）-View处理事件并触发自己的"searchRequested"事件。此事件由控制器处理，该控制器将调用模型，要求其执行搜索。完成后，模型将触发一个"searchResultsUpdated"evnet，该evnet将由视图处理，使其显示结果。

如果你现在选择更改应用程序的设计，以显示搜索词链接，而不是搜索框和按钮（或者即使你并排或在不同的屏幕上），那么你唯一需要更改的就是视图。

技术方面的补充说明：如果使用JQuery并假设您的视图是javascript对象，则可以使用

$(view).triggerHandler( 
   $.Event('eventName',{'object:'with','more':'event','related':'data'})  
);

启动事件

和

$(view).on('eventName',handler);

以侦听和处理事件。

有趣的问题。我认为这在很大程度上取决于您的情况、示例的复杂性以及您正在使用的特定JavaScript模式。

如果你谈论的按钮只是一个HTML元素，这可能是一种简单的方式：

var MyController = function() {
    this.particularMethod = function() { 
        // update model
    }
    // Using jquery
    var button = $("#myButton");
    button.click( function() { myController.particularMethod() } )
}

或者，如果button是您创建的对象或模块，您可以设置回调：

var Button = function(selector, clickFunction) {
    // Using jquery
    $(selector).click(clickFunction)
    ...
}
var MyController = function() {
    this.particularMethod = function() { 
        // update model
    }
    var button = new Button("#myButton", this.particularMethod);
    ...
}

不幸的是，琐碎的例子并不能真正说明不同方法的好处！

有很多方法可以做到这一点。

var app = new App();
function App() {
  var model = new Model();
  var view = new View();
  var controller = new Controller(view, model);
}
function Controller(view, model) {
  view.addActionListener(function() {
    alert("on activate");
  });
}
function View() {
  var self = this;
  $("button").onclick = function() {
    self.listener();
  }
}
View.prototype.addActionListener = function(listener) {
  this.listener = listener;
}
相关文章：