javascript - MVP 模式与 Javascript 框架？

Question

已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。

---

我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便用事实和引文来回答。

去年关闭。

社区去年审查了是否重新开放此问题，并将其关闭:

原始关闭原因未解决

Improve this question

有人能够使用任何 JavaScript 框架实现 MVP 模型吗？我无法弄清楚如何让演示者 -> View 从服务器代码反转为 JavaScript。我有一些想法，但有点老套，想看看其他人在做什么。

Answer 1

MVP 的主要目标是解耦代码中的不同方面。通常，在 JavaScript 中，主要有 3 个方面:

1. 事件处理
2. DOM 操作
3. 服务器通信(AJAX 调用)

对于每个问题，MVP 都有一个相应的术语:

1. 事件处理=演示者
2. DOM 操作 = View
3. AJAX 调用 = 模型

由于实现这 3 个方面确实并不总是那么简单，因此事件总线可能会派上用场。该总线应该是单例，并且在各种上下文中引发的所有事件都应该在总线上发布。 Presenter 需要注册其事件并在事件发生时做出相应的 react 。

它的工作原理如下:

首先发生的是页面加载。使用普通事件模型或 jQuery 或任何方便的方法来收听此内容。创建模型、 View 和演示者。 Presenter 需要保存 View 和 Model 实例，因为他要使用它们。

var model = new Model();
var view = new View();
var presenter = new Presenter(model, view);

请记住，Presenter 是事件处理程序，因此总线应该了解它并将事件路由到它进行处理:

bus.registerHandler(presenter);

第一个事件是“init”，这意味着页面已加载并且 MVP 对象已全部设置:

bus.init(); // call this yourself

这会触发 Presenter 中的某些内容，例如函数。我更喜欢 on... 命名约定，在本例中为 Presenter.onInit()。这提供了安装 UI 监听器的机会:

// in the Presenter
onInit: function() {
  view.addSubmitListener();
  view.addWhateverListener();
  ...
}

// in the View (using jQuery)
addSubmitListener: function() {
  $("#submitButton").click(function() {
    var formData = ...
    bus.submit(formData); // publish an event to the bus
  });
}

单击“提交”按钮时，将调用bus.submit(formData)，并将其路由到处理程序——presenter.onSubmit(formData):

// in the Presenter
onSubmit: function(formData) {
  model.postForm(formData, function(data) {
    // handle the response
    view.updateSomething(data);
  });
}

依此类推...整个技巧是将总线绑定(bind)到演示者，然后您就进入了循环。