使用Javascript框架的MVP模式？

Question

有没有人能够用任何JavaScript框架实现MVP模型？我无法弄清楚如何让演示者 - >从服务器代码到javascript的视图反转.我有一些想法,但有点hackish,并希望看到别人在做什么.

Answer 1

MVP的主要目标是解码代码中的不同方面.通常,在JavaScript中,有三个主要的这样的方面:

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

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

1. EventHandling =演示者
2. DOM操作=查看
3. AJAX调用=模型

实际上,实现这三个方面并不总是很简单,因此EVENT BUS可能会派上用场.这个总线应该是一个单独的,所有在各种情况下提出的事件都应该在公交车上公布.演示者需要注册其事件并在事件发生时做出相应的反应.

以下是它的工作原理:

首先发生的是页面加载.使用普通事件模型或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
  });
}

单击Submit按钮时,将调用bus.submit(formData),并将其路由到处理程序--presenter.onSubmit(formData):

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

等等......整个技巧是将总线绑定到演示者,然后你就在循环中.

HTH

Answer 2

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

Answer 3

另一种是针对 jQuery 人员的： http: //javascriptmvc.com/

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