如果我在 JavaScript 中遵循粗略的 MVC 模式，视图（例如 button 元素）通知控制器的最佳方式是什么？
button 是否应该触发控制器必须监听的事件？或者，button 是否应该直接调用控制器函数？或者控制器应该将事件分配给视图？
感谢您的任何意见！
【问题讨论】：
标签： javascript model-view-controller controller views
有很多方法可以做到这一点。这是一种方法。
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;
}
【讨论】：
我会说 View 应该捕获按钮触发的事件并触发自己的事件，该事件将由 控制器 处理。
让我解释一下：
@raynos 写道：
控制器监听输入。这意味着控制器监听事件 来自 DOM 节点
就个人而言，尽管我同意第一个陈述，但我不喜欢这种解释。
遵循此声明意味着控制器必须知道 UI 中的每个按钮/文本字段/元素及其 ID/选择器。
我更喜欢让 View 触发语义事件，例如“languageSelected”或“searchRequested”，并将相关数据添加到事件中。
所以一个典型的流程是当用户点击按钮时，视图呈现一些 UI（假设它有一个搜索框和一个按钮） - View 处理事件并触发它自己的“searchRequested”事件。此事件由 Controller 处理，该控制器将调用 Model 并要求它执行搜索。完成后，Model 将触发“searchResultsUpdated” evnet，该 evnet 将由 View 处理，使其显示结果。
如果您现在选择更改应用的设计以显示搜索词链接而不是搜索框和按钮（或者即使您当时并排 - 或在不同的屏幕上），您唯一需要更改的就是是视图。
技术说明： 如果使用 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);
...
}
不幸的是，琐碎的例子并不能真正说明不同方法的好处！
【讨论】：