使用Javascript框架的MVP模式？ [英] MVP pattern with Javascript framework?

问题描述

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

Has anyone been able to implement the MVP model with any javascript frameworks? I'm having trouble figuring out how to have the presenter -> view inversion from server code to javascript. I have some ideas, but kind of hackish and would like to see what others are doing.

推荐答案

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

The main goal with MVP is decoupling of different aspects in the code. Normally, in JavaScript, there are 3 major such aspects:

1. 事件处理


2. DOM操作


3. 服务器通信（AJAX调用）

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

For each of these concerns, there's a corresponding term from MVP:

1. EventHandling = Presenter


2. DOM操作=查看


3. AJAX调用=模型

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

Since indeed it is not always simple to implement the 3 aspects, an EVENT BUS may come in handy. This bus should be a singleton and all the events, raised in various context should be published on the bus. The Presenter needs to register to its events and react accordingly when events happen.

以下是它的工作原理：

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

First thing that happens is the page load. Listen to this using the normal event model or jQuery or whatever is convenient. Create the Model, the View and the Presenter. The Presenter needs to hold the View and Model instances since he's gonna use them.

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

请记住，Presenter是事件处理程序，因此总线应该知道它并将事件路由到它以便处理：

Remember that Presenter is the event handler so the bus should know about it and route events to it for handling:

bus.registerHandler(presenter);

第一个事件是init，这表示页面已加载，MVP对象全部设置：

The first event is the "init", which means the page has loaded and the MVP objects are all set:

bus.init(); // call this yourself

这会在Presenter中触发某些内容，就像函数一样。我更喜欢on ...命名约定，在本例中是presenter.onInit（）。这样就有机会安装UI监听器：

This would trigger something in the Presenter, like a function. I prefer the on... naming convention, in this example presenter.onInit(). This gives a chance to install UI listeners:

// 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）：

When the Submit button is clicked the bus.submit(formData) is called and this will route it to the handler -- presenter.onSubmit(formData):

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

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

And so on... The entire trick is binding the bus to the presenter and then you're in the loop.

HTH

这篇关于使用Javascript框架的MVP模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！