Шаблон MVP со структурой Javascript? - PullRequest
27 голосов
/ 09 июля 2009

Кто-нибудь смог реализовать модель MVP с какими-либо фреймворками javascript? У меня проблемы с выяснением, как сделать докладчик -> просмотр инверсии из кода сервера в JavaScript. У меня есть некоторые идеи, но они довольно хакерские, и я хотел бы посмотреть, что делают другие.

Ответы [ 10 ]

47 голосов
/ 27 мая 2011

Основная цель MVP - разделение различных аспектов кода. Обычно в JavaScript есть 3 основных таких аспекта:

  1. Обработка событий
  2. DOM манипуляции
  3. Связь с сервером (вызовы AJAX)

Для каждой из этих проблем есть соответствующий термин из MVP:

  1. EventHandling = Ведущий
  2. DOM Manipulation = Просмотр
  3. AJAX звонки = Модель

Поскольку реализовать 3 аспекта не всегда просто, шина EVENT BUS может пригодиться. Этот автобус должен быть одноразовым, и все события, поднятые в различных контекстах, должны публиковаться в автобусе. Докладчик должен зарегистрироваться на свои события и соответствующим образом реагировать на события.

Вот как это будет работать:

Первое, что происходит, это загрузка страницы. Послушайте это, используя обычную модель событий или jQuery или что угодно удобное. Создайте модель, вид и презентера. Ведущий должен хранить экземпляры 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, например, функцию. Я предпочитаю соглашение об именовании, в этом примере Presenter.onInit (). Это дает возможность установить слушатели пользовательского интерфейса:

// 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), и он направляет его обработчику

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

И так далее ... Весь трюк привязывает шину к докладчику, и тогда вы в цикле.

НТН

6 голосов
/ 13 декабря 2010

Взгляните на knockout.js , который является инфраструктурой MVVM для ваших веб-страниц. Он обеспечивает действительно красивую и легко расширяемую структуру для связи модели и вида в слабосвязанной форме.

1 голос
/ 26 ноября 2011

Я знаю, что этот вопрос старый, но я думаю, что здесь стоит упомянуть. Мой голос переходит на Backbone.js. Даже документы говорят, что это MVC, я бы сказал, что это MVP.

  • VIEW = HTML-шаблон (jQuery.template)
  • MODEL = Backbone.Model
  • PRESENTER = Backbone.View (слой между вашим видом-шаблоном и тем, как привязать к нему данные, и чем больше вы можете сделать), и что лучше всего использовать в представлениях пар методов рендеринга (HTML-шаблоны) или выбрать использовать ...

а что лучше у тебя еще есть контроллер

  • CONTROLLER = Backbone.Controller

Альтернативой может быть, как упомянуто @JoshRivers, knockoutJS, но лично я считаю, что шаблон представления перегружен обязательными элементами.

И последнее замечание. Дело в том, что View as V из MVC или MVP - это то, что можно построить из вашего шаблона без его кодирования, создать хороший анализатор HTML-шаблонов, и вы готовы к работе :) Поверьте, соглашение - ваш друг.

1 голос
/ 07 декабря 2010

Проверьте угловой проект на http://angularjs.org/ и не стесняйтесь задавать любые вопросы в группе рассылки.

Он предназначен для совместной работы с jQuery. Очень полезно для написания приложений TESTABLE MVC JS.

0 голосов
/ 29 мая 2014

Искал несколько примеров для фреймворков MVP и наткнулся на эту ссылку, которая может быть очень полезна для выбора фреймворка, над которым нужно работать: MV * Рамки

0 голосов
/ 17 января 2014

Взгляните на Riot.js - совершенно новую, автономную микробиблиотеку 1 КБ (!) MVP, в которой есть все необходимое для создания масштабируемого модульного приложения JavaScript. Также есть полноценное демо.

0 голосов
/ 08 марта 2013

Мы говорим о MVP здесь люди! Не MVC! По моему мнению, отрасль еще не готова к MVP. Все все еще пытаются понять MVC.

0 голосов
/ 02 июля 2010

Кажется, Google использует GWT MVP:

Google GWT

0 голосов
/ 10 июля 2009

Еще один для jQuery: http://javascriptmvc.com/

Просто обратите внимание, что Ext JS также поддерживает шаблон MV (x) начиная с версии 4.0, которую я упомяну как бывший человек Ext. Как и большинство фреймворков, они тоже называют его «MVC» (как и большинство в мире JS, см. TodoMVC , в отличие от TodoMVP). Однако с практической точки зрения в Ext имеются инструменты для реализации C / P-части шаблона в соответствии с вашими потребностями. Шаблоны полезны, но, как и большинство других вещей, могут ограничивать ваше мышление при догматическом обращении.

0 голосов
/ 09 июля 2009

Check PureMVC out. У них также есть порт для JavaScript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...