带有 Javascript 框架的 MVP 模式？答案

【问题标题】：MVP pattern with Javascript framework?带有 Javascript 框架的 MVP 模式？
【发布时间】：2009-07-09 06:51:45
【问题描述】：

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

【问题讨论】：

为什么？我不是老派的“JS 是魔鬼的工作”的人，但即使你有大型客户端应用程序，我也看不到好处，而只是开销。
@Boldewyn，如果您不是老派，那么请考虑 HTML5 和 Javascript 并驾齐驱。如果您认为 JS 是“魔鬼的工作”，那么我认为您从未学过该语言。诚然，Javascript 很快就会变得非常混乱，但是一旦结构化，它就会变得非常强大和多才多艺。此外，TraceMonkey (Firefox) 和 V8 (Chrome) 的效率非常高，未来还会发布更快的引擎。而且我并没有提到越来越多的应用程序上线，并且倾向于客户端执行而不是服务器端的事实。如果你不是老派，你应该知道这一切......
@Yanick Rochon：实际上，JavaScript 是我所知道的最可爱的语言。我的意思是，除了设计良好的 服务器端 MVP 框架之外，我看不到 JS MVP 框架的好处。为什么要在浏览器中加载所有内容，而您也可以在服务器端进行呢？
@Boldewyn，为什么是 JS MVP？因为如果您将 MVP 放在服务器端，那么您就错过了 MVP 的概念 :) 使用 MVP，您的模型严格位于客户端，而服务器仅用作“存储”促进者。通常，MVP 在客户端，而 MVC 在服务器上。实际上，您可以将它们一起使用以在客户端和服务器端生成结构化代码。
@Boldewyn：重点是将大部分应用程序逻辑放在客户端，以免服务器陷入困境。我发现当您可以直接控制应用程序的状态而无需通过 Web 服务器时，编写应用程序会容易得多。这也使应用程序更快捷，因为它不需要等待 Ajax 请求进行简单计算。

标签： javascript mvp

【解决方案1】：

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

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

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

EventHandling = 演示者
DOM 操作 = 查看
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);
  });
}

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

HTH

【讨论】：

如果我在这里的回答不够清楚，我写这篇文章是为了更好地解释MVP with JavaScript。我离开了公共汽车，因为那不是 MVP 的一部分。
我通常不使用总线，而是使用将视图和模型扩展为事件发射器的辅助函数。模型在数据更改时发出事件，视图在用户输入时发出事件。

【解决方案2】：

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

【讨论】：

这如何解释 MVP？ :)
显然不是，但我一直避免成为迂腐的类型。我想如果你的问题是，“我有一个用 Windows 窗体编写的成功的 MVP 应用程序，还有一个我喜欢的 iOS 堆栈上的 MVVM 应用程序，现在我有一些关于 JS 上的 MVP 的详细问题”，那么我们可以谈论 MVP vs MVC vs MVVM 的细节（我不会权威地回应（受过教育的无知））。但是，“我怎样才能做到 MVP 而不会弄得一团糟？”是我认为 MV* 答案适合的那种查询。我希望这会有所帮助并增加清晰度:)
@JoshRivers 谢谢，是的，它有点帮助，我试图看到构建 JS 框架的最佳方法的主要区别。

【解决方案3】：

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

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

【讨论】：

问题是针对 MVP 的，因为 Milan 和 Josh 提到了 MVP、MVVM，并且像鹦鹉一样回答这个问题？首先，Angular 是/可以是 MV*Whatever。所以你可能误导了一些工程师，然后你建议用它来做一个MVC APP：-p

【解决方案4】：

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

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

最好还有控制器

CONTROLLER = Backbone.Controller

替代方案可能是@JoshRivers 提到的，knockoutJS，但我个人认为视图模板被绑定的东西压得喘不过气来。

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

【讨论】：

感谢您提及 knockoutJS。
谢谢有趣。我正在尝试更多地了解差异是否有人认为backbone.js 可以成为MVP？

【解决方案5】：

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

【讨论】：

尽管 MVC 对于客户端应用程序没有用处。我建议改用 PAC 模式。
@Yanick：MVC 和 MVP 非常相似，并且在这种情况下具有可比性。

【解决方案6】：

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

【讨论】：

很遗憾，我同意。大多数人不理解它，它并不复杂，它简化了并使事情更加一致。

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

顾名思义，它是 MVC 而不是 MVP！
@niutech 出于所有实际目的，MVC 和 MVP 在客户端是可互换的概念，任何声称是其中之一的库肯定会提供类似的应用程序模式。 “Controller”和“Presenter”之间的区别在服务器上意味着更多，但在客户端我不确定是否有很大区别。也许你能启发我。
我认为this 解释得很好。在 MVC 中，模型直接与视图通信，而在 MVP 中，演示者是监听模型事件和更新视图的中间人。
我的观点是，区别主要在于现实世界中的语义/学术。大多数人交换具有相同预期含义的不同 MV* 模式，大多数框架也是如此。大多数现实世界的实现都模糊了您似乎如此渴望强制执行的界限。我认为有更好的事情可以花费你的反对票。

【解决方案9】：

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

【讨论】：

【解决方案10】：

似乎 google 的 GWT 使用 MVP：

Google GWT

【讨论】：