Я думаю, что ваш вопрос больше касается понимания паттернов MVC ( модель-представление-контроллер ) в javascript.Я думаю, вам следует обновить свой вопрос, чтобы отразить это.
Что-то вроде «Помогите понять шаблоны MVC в javascript».
Трудно составить представление о том, как это выглядит в javscript, не предоставивдемонстрационный пример использования с примерами и подробным описанием кода.Я знаю, что по сути это то, о чем вы просили, но я думаю, что это выходит за рамки StackOverflow.
Шаблоны MVC довольно знакомы и широко используются, например, в серверных средах.
- В PHP есть CodeIgnighter
- В Ruby есть Rails
- В Python есть Django
- В Java есть Spring
- Плюс много, много других вариантов для каждого языка.
Шаблон MVC тесно связан с концепцией ООП ( объектно-ориентированное программирование ).Хотя для языка не принципиально быть объектно-ориентированным, чтобы следовать шаблону MVC.Многие фреймворки MVC, как правило, создаются в соответствии с методологиями ООП, насколько позволяет язык.
Это одна из причин, по которой я считаю, что концепция MVC менее распространена в фронт-энде.В течение долгого времени Javascript был довольно неправильно понят как язык.В результате только недавно люди применили принципы ООП в javscript.
Улучшение соответствия браузеров и библиотек, таких как JQuery, во многом связано с этим.Способность меньше фокусироваться на разочарованиях несоответствий в DOM, позволила людям осознать основные аспекты самого языка.
(Многие считали и до сих пор считают, что несоответствия браузеров являются ошибкойЯзык JavaScript, а не реализация DOM от поставщиков браузеров. Это является основной причиной неправильного понимания Javascript.)
С этим небольшим разглагольствованием я получу возможность дать вамдействительно высокий уровень интерпретации MVC.
В средах MVC предопределено создание моделей, представлений, контроллеров и способов их взаимодействия.Они делают это, чтобы поддерживать проект в чистоте и следовать одной и той же структуре.Преимущества этого состоят в том, что ..
Новым разработчикам легче прийти к проекту, чтобы понять, что происходит.
Чем больше времени выпотратить работу в рамках, тем более знакомым вы станете с API.Таким образом, это ускоряет время разработки.
Общая структура и API облегчают вам и другим пользователям поддержку кодовой базы.
Для пониманиякак они это делают в javscript, вам нужно понять, как работают функции конструктора, прототипы и объекты.Вот некоторые из основ базового языка JavaScript, и красноречивый JavaScript - хорошее место для начала.
Для начала я не думаю, что термин MVC находится в правильном порядкечтобы помочь визуализировать течение внутренних процессов.Является ли это намеренным или нет, я не знаю, я предполагаю, что разные люди воспринимают вещи по-разному, но мне кажется, что MVC проще сказать и звучит лучше.
Я предпочитаю думать об этом как CVM.
Ключевым моментом в инфраструктуре MVC является разделение логики.
КОНТРОЛЛЕР >> Контроллер - это функциональная часть приложения, каждый контроллер имеет определенный аспект взаимодействия с пользователем.Затем он управляет обработкой этого взаимодействия, передавая изменения в модели и представления, основываясь на полученных им входных данных.
МОДЕЛЬ >> Модель - это все о данных.У него только одна работа - моделирование данных.Таким образом, Модель обычно принимает данные и проверяет или изменяет свое представление.Модель также заботится о CRUD-операциях (создание, чтение, обновление, удаление).Обычно у вас есть отдельная модель для разных типов данных, проходящих через ваше приложение.например, Пользователи, Комментарии, Сообщения.
ПРОСМОТР >> Вид - это визуальное представление операции.Он берет данные из модели и генерирует визуальный вывод.В то время как представление генерирует визуальный вывод, обычно представление само по себе не выполняет его рендеринг.Он просто возвращает визуальное представление в контроллер для рендеринга.Представления не связаны с целыми страницами, каждое представление представляет отдельный визуальный аспект приложения, например, диалоговое окно входа, новый комментарий и т. Д.
Путем разделения различных частей приложения, как это.Многие части становятся взаимозаменяемыми и могут повторно использоваться различными контроллерами.
В серверной среде MVC взаимодействие с пользователем, на которое они отвечают, обычно является запросом страницы.Поэтому контроллеры слушают запросы, поступающие от клиента.Они используют параметры URL и запроса, чтобы определить, какой контроллер отвечает за обработку этого запроса.
e.g. http://myapp.com/users/ >> user Controller
Затем контроллер может использовать любую последующую часть URL, чтобы определить, какие модели и представления следует использовать дляответить.
e.g. http://myapp.com/users/new/ >> user Controller renders the newUser View
Среды MVC на стороне сервера используют фрагменты URL для ответа на взаимодействие с пользователем, поскольку они не имеют прямого доступа к взаимодействию с пользователем (например, сервер не может реагировать непосредственно на щелчок мыши),Так что серверные приложения работают не по выбору, а по принуждению.
В Javscript, тем не менее, у нас есть такая роскошь.Мы можем добавить обработчики событий в части интерфейса и реагировать непосредственно на взаимодействие с пользователем.Эта модель знакома практически каждому пользователю JavaScript.
Например (с использованием jQuery)
// Create and event handler
$('.myButton').bind('click', function(event){
// Do some work when this event is fired.
});
Однако так уж сложилось, что такая возможность микроуправления взаимодействием с пользователем неэффективна в JavaScriptинтенсивные приложения (также известные как одностраничные веб-приложения).В итоге вы получите спагетти-код и дублирование функций.Поскольку этот подход приводит к тому, что кто-то инкапсулирует всю функциональность в функцию, связанную с взаимодействием.
Например,
$('myButton').bind('click', function(event){
var self = $(this);
event.preventDefault();
$.ajax({
url: self.attr('href'),
context: self.parents('.ResponseContainer'),
success: function(data){
self.addClass('.workDone');
for( key in data ){
$(this).append('<li>'+data[key]+'</li>')
};
}
});
});
Поэтому способность JavaScripts напрямую взаимодействовать с взаимодействием фактически становится недостатком.Наличие глобального объекта, такого как URL-адрес для ответа, значительно упрощает обработку и концептуальное моделирование и разделение частей приложения.
Теоретически вы можете создать собственный глобальный объект для хранения состояния приложения и отслеживания его состояния.изменения в ваших контроллерах.Однако для большинства приложений это ненужное занятие, оказывается, что объект URL является простым и высокоэффективным для этой операции.Поскольку в своих фрагментах URL-адрес содержит форму состояния, пользователи могут переходить прямо к определенным частям вашего приложения.Если вы реализуете свой собственный объект для выполнения работы с URL, приложение не будет иметь никаких сведений о состоянии до его загрузки.Любое состояние во время выполнения также будет потеряно, как только страница закроется.Таким образом, URL обеспечивает превосходный механизм для постоянного и передаваемого состояния (так как URL может использоваться совместно).
Поэтому в большинстве сред JavaScript MVC они используют URL поверх непосредственной обработки событий.Это создает некоторые проблемы, однако, чтобы изменить URL, нужно щелкнуть ссылку.По умолчанию в браузерах отправляется запрос на сервер для новой страницы и выполняется рендеринг всей страницы.
Это явно не то, что мы хотим, чтобы произошло.Таким образом, чтобы предотвратить это, фреймворки MVC используют несколько методов, чтобы изменить поведение браузера по умолчанию.Первый механизм состоит в том, чтобы запретить использование по умолчанию для всех щелчков по ссылкам.
например
$('a').bind('click', function(event){
event.preventDefault();
});
// This prevents any link clicks from firing the browsers default action
// of making a request to the server and reloading the page.
Чтобы изменить URL, мы должны обновить объект window.location, чтобы он указывал на URL, содержащийся в атрибуте links href.Однако простое изменение window.location все равно приведет к перезагрузке страницы.Чтобы преодолеть это, мы фактически изменили URL, чтобы использовать фрагменты хеша, например http://myapp.com/#/users. Когда браузер видит хэш в URL, он не перезагружает страницу.Исторически хеш использовался для перехода к разделу контента на существующей странице.
Обновления хэша также попадают в историю просмотров, что позволяет вам перемещаться с помощью кнопок браузера «назад» и «вперед».
например,
$('a').bind('click', function(event){
event.preventDefault();
var el = $(event.currentTarget);
window.location.hash = el.attr('href');
});
// A real use case would be much more complex than this.
// This code assumes you have a link structured like
// <a href="/new/user">Sign up</a>
Отдельная функция будет отслеживать изменения во фрагменте хеша.Это может быть в форме setInterval () для location.hash, который сравнивает предыдущий фрагмент с текущим, или пользовательское событие, вызванное вышеуказанной функцией.
Чтобы позволить контроллерам отвечать на правильный URL-адрес (также называемый маршрутами), обычно используются соглашения об именах объектов или методов.
Например,
//Create your controller to listen to '/user' fragments
var users = new Controller('/users');
// function to run on '/user' fragment changes
users.On = function(reqParams){
// do some work to respond to http://myapp.com/#/users;
};
// create a Controller as a method of users, to respond to '/users/new'
users.new = new Controller('/new');
// function to run on '/user/new' fragment changes
users.new.On = function(reqParams){
// do some work to respond to http://myapp.com/#/users/new
};
Я не буду вдаваться в подробности, инфраструктуры MVC предоставляют различные способы реализации и структурирования вашего приложения.Кроме того, поскольку JavaScript действительно способен напрямую реагировать на взаимодействие с пользователем, эту мощь не следует полностью игнорировать.Поэтому в некоторых JavaScript MVC-структурах они слегка портят чистую концепцию MVC, чтобы обеспечить более глубокое управление взаимодействием.
Я наткнулся на это видео-руководство Бена Наделя, исследующее концепцию MVC в одностраничных веб-приложениях.Это чрезвычайно подробный обзор структуры приложения.А также дает несколько замечательных советов по созданию JavaScript.
Некоторые Javascript MVC Framework
Обзор нескольких структур, упомянутых выше.
И не забудьте прочитать красноречивый JavaScript, если вы этого еще не сделали
Надеюсь, вам хватит информации, чтобы начать.