27

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

4

10 回答 10

48

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

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

对于这些问题中的每一个，MVP 都有一个相应的术语：

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

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

以下是它的工作原理：

首先发生的是页面加载。使用普通的事件模型或 jQuery 或任何方便的方法来收听这个。创建模型、视图和演示者。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);
  });
}

等等......整个技巧是将总线绑定到演示者，然后你就进入了循环。

高温高压

于 2011-05-27T13:30:11.720 回答
6

看看knockout.js，它是一个用于您的网页的 MVVM 框架。它提供了一个非常漂亮且易于扩展的框架，用于以松散耦合的方式链接模型和视图。

于 2010-12-13T05:02:42.047 回答
1

在http://angularjs.org/上查看 angular 项目，并随时在邮件组提出任何问题。

它旨在与 jQuery 一起工作。对于编写可测试的 MVC JS 应用程序非常有用。

于 2010-12-07T09:13:41.080 回答
1

我知道这个问题很老，但我认为这里值得一提。我投票给 Backbone.js。甚至文档都说它是 MVC，我会说它是 MVP。

  • VIEW = html 模板 (jQuery.template)
  • 模型 = 骨干. 模型
  • PRESENTER = Backbone.View（您的视图模板之间的层以及如何将数据绑定到它，以及您可以做的更多事情）以及您可以在渲染方法中使用什么最好的视图（html模板）或切换使用哪个.. .

什么是最好的你仍然有控制器

  • CONTROLLER = Backbone.Controller

替代方案可能是@JoshRivers 提到的，knockoutJS，但我个人认为视图模板被绑定的东西淹没了。

最后一点。事情是来自 MVC 或 MVP 的 View as V 是可以从您的模板构建而无需编码的东西，制作好的 HTML 模板解析器，你很高兴 :) 相信我，约定是你的朋友。

于 2011-11-25T21:33:35.743 回答
0

检查PureMVC。他们还移植到 JavaScript。

于 2009-07-09T08:29:04.700 回答
0

另一个，对于 jQuery 人：http: //javascriptmvc.com/

请注意，Ext JS 从 4.0 版开始也支持 MV(x) 模式，我将作为前 Ext 人员提及。像大多数框架一样，它们也将其称为“MVC”（JS 世界中的大多数人都是如此，请参阅TodoMVC，而不是 TodoMVP）。但是从实际的角度来看，Ext 中的工具可以实现模式的 C/P 部分，以最适合您的需要。模式很有用，但像大多数东西一样，当教条主义地对待时，它会限制你的思维。

于 2009-07-09T23:38:33.353 回答
0

看看Riot.js - 一个全新的、独立的 1kB (!) MVP 微型库，它拥有构建可扩展的模块化 JavaScript 应用程序所需的一切。还有一个完整的演示。

于 2014-01-17T01:39:59.220 回答
0

正在搜索 MVP 框架的一些示例，并遇到了这个链接，这对于决定一个想要使用的框架可能非常有用： MV* Frameworks

于 2014-05-29T09:13:13.723 回答
0

似乎谷歌 GWT 使用 MVP：

谷歌 GWT

于 2010-07-02T12:10:56.317 回答
0

我们在这里谈论MVP！不是MVC！我认为这个行业还没有为 MVP 做好准备。大家还在努力掌握MVC。

于 2013-03-08T04:06:14.183 回答