Образцовый контроллер представления в JavaScript
tl; доктор: Как каждый реализует MVC в JavaScript в очевидном способе?
Я пытаюсь реализовать MVC в JavaScript. Я погуглил и реорганизовал со своим кодом бесчисленные времена, но не нашел подходящее решение. (Код просто не "чувствует себя хорошо".)
Вот то, как я иду об этом прямо сейчас. Это невероятно сложно и является болью для работы с (но еще лучше, чем груда кода я имел прежде). Это имеет ужасные обходные решения такое поражение цель MVC.
И созерцайте, путаница, если Вы действительно храбры:
// Create a "main model"
var main = Model0();
function Model0() {
// Create an associated view and store its methods in "view"
var view = View0();
// Create a submodel and pass it a function
// that will "subviewify" the submodel's view
var model1 = Model1(function (subview) {
view.subviewify(subview);
});
// Return model methods that can be used by
// the controller (the onchange handlers)
return {
'updateModel1': function (newValue) {
model1.update(newValue);
}
};
}
function Model1(makeSubView) {
var info = '';
// Make an associated view and attach the view
// to the parent view using the passed function
var view = View1();
makeSubView(view.__view); // Dirty dirty
// Return model methods that can be used by
// the parent model (and so the controller)
return {
'update': function (newValue) {
info = newValue;
// Notify the view of the new information
view.events.value(info);
}
};
}
function View0() {
var thing = document.getElementById('theDiv');
var input = document.getElementById('theInput');
// This is the "controller", bear with me
input.onchange = function () {
// Ugly, uses a global to contact the model
main.updateModel1(this.value);
};
return {
'events': {},
// Adds a subview to this view.
'subviewify': function (subview) {
thing.appendChild(subview);
}
};
}
// This is a subview.
function View1() {
var element = document.createElement('div');
return {
'events': {
// When the value changes this is
// called so the view can be updated
'value': function (newValue) {
element.innerHTML = newValue;
}
},
// ..Expose the DOM representation of the subview
// so it can be attached to a parent view
'__view': element
};
}
Как каждый реализует MVC в JavaScript более чистым способом? Как я могу улучшить эту систему? Или действительно ли это - абсолютно неправильный способ пойти, я должен следовать за другим шаблоном?
2 ответа
Существует по крайней мере пара установленных и используемых MVC-фреймворков для JavaScript JavaScriptMVC и pureMVC . Наверное, есть еще. Я использовал JavaScriptMVC для приложений на основе браузера и Air и постоянно возвращаюсь к нему - у него есть свои проблемы, но я нашел его весьма полезным.
Есть и другие решения, взгляните на Sammy , новую вещь, о которой я слышал много хорошего. Сам не использовал, но скоро собираюсь попробовать. Я не знаю о нем достаточно, чтобы правильно его описать, но мне он кажется фронт-контроллером, который работает с маршрутами, системой шаблонов и хранилищами данных ReSTful. Я не уверен, что это MVC, но в нем есть похожие ингредиенты.
Я не согласен с ответом mway .MVC может немного отличаться от реализации в JavaScript, но его преимущества очень важны для организации этого беспорядка . Паттерны проектирования, обычно связанные с объектно-ориентированными языками, никуда не делись только потому, что js не основан на классах.
Я бы сказал, что MVC больше подходит для приложений JavaScript, чем для приложений на основе запросов (на стороне сервера). Эти объекты могут находиться некоторое время в одностраничном приложении JavaScript - минуты, если не часы - и наличие хорошо организованного способа организации их взаимодействия сделает ваш код более надежным и легким в использовании. Есть книги по этой теме.
Еще пара моментов, касающихся размещенного вами кода.
- Объекты представления несут ответственность за применение прослушивателей событий к элементам DOM. Это работа контролера. Представление просто отображает HTML - контроллер отслеживает события и действует соответствующим образом.
- Кажется, ваши модели знают ваши взгляды. Слой модели должен иметь минимальные знания о слое представления (возможно, он должен быть зарегистрирован как наблюдатели ). Держите свою модель чистой и по существу, я имею в виду бизнес-точку - бизнес-логику. В js-приложениях вы можете просто проксировать уровень модели на стороне сервера, но для вашего здравомыслия важно, чтобы ваша модель соответствовала бизнес-логике и ничего больше. Логика приложения - это работа контроллера
Если честно, MVC плохо подходит для Javascript. Конечно, он может поддерживать базовые основы дизайна - вы можете создавать псевдоклассы, которые будут действовать как контроллеры или модели, поддерживать базовое наследование, и вы можете управлять им или создавать любое количество элементов DOM, но есть цена, которую вы платите за это. - в накладных расходах, доступности и удобстве использования.
На мой взгляд, я считаю Javascript скорее улучшением - менталитет KISS существует не зря. Если вас интересуют лучшие способы организации кода, всегда есть возможность упаковать связанные функции в модули (так в оригинале) и при необходимости абстрагировать части. Например, создание фабрики для более сложного управления запросами AJAX или псевдокласса для обработки подобных типов данных. Использование стандартной базовой функции для контроллеров, другой для моделей и т. Д. В качестве прототипов для новых экземпляров этих объектов может выполнять аналогичные функции ... но опять же, это как бы идет вразрез с сущностью Javascript.
Однако, если вы зациклились на идее MVC только из-за структуры, подумайте о чем-то вроде следующего:
;(function(window, $) {
/**
* Event Object
* A quick description goes here.
**/
var Events = window.Events = {
'bindTrackables': function() {
$('a.trackable').live('click', function() {
if(!_gaq)
_gaq = [];
_gaq.push(['_trackPageview', '/ajax/foobar']);
});
},
'bindSomeEvent': function() {
// etc
}
};
/**
* Data Cache
* I'll need to remember stuff later, so I store it here
**/
var Cache = window.Cache = {
'data': {},
'store': function(key, value) {
Cache.data[key] = value;
},
'fetch': function(key) {
return Cache.data[key];
}
};
/**
* Request Object
* Stores native AJAX requests for later use
**/
var Request = window.Request = {
'current_requests': [],
'send': function(url, type, data, callback) {
Request.current_requests.push($.ajax({
'url': url,
'type': type,
'data': data,
'callback': callback
}));
},
}
// add some private logic here
})(window, jQuery);
Это очень просто, но вы поняли идею. Модульный код является ключевым ... в JS это важнее, чем принуждение вашего приложения (или языка) к определенному стилю.