Model-View-Controller для JavaScript

admin — Mon, 05 May 2008 21:30:07 +0000

Приветствую Вас дорогие читатели!

Для тех из вас, кто знаком с RubyOnRail, CodeIgniter, CakePHP, парадигма Model, View, Controller не является новинкой. Шаблон MVC позволяет разделить данные, представление и обработку действий пользователя на три отдельных компонента: модель (Model) для предоставления данных, представление (View) для отображения информации и контроллер (Controller) для интерпретации данных, введенных пользователем.

Если для таких языков программирования, как PHP, Ruby, Python, существует множество фреймворков, использующих MVC, то для JavaScript это пока диковинка. Совсем недавно появился именно такой фреймворк для JavaScript – JavaScriptMVC

Разработка фреймворка пока еще в стадии “альфа”, но тем не менее, он уже сейчас обладает внушительными возможностями. Есть большой набор дополнительных плагинов для использования AJAX, тестирования, добавления объекта History, работы с массивами, строками и много другое. Также, что немаловажно, возможно использование JavascriptMVC с другими библиотеками – jQuery, Prototype и др.

Я решил попробовать библиотеку в действии и создать простое приложение. Вот что у меня получилось: demo.

Теперь шаг за шагом о том, как я сделал его.

Шаг 1: установка

Скачайте дистрибутив и распакуйте его локально или на веб сервер.

Шаг 2: HTML

Создадим пустой HTML документ, в который добавим скрипт include.js с двумя параметрами – именем приложения и параметром, определяющим режим разработки: development, production, test, compress. Тип development удобен при разработке и отладке приложения, test при тестировании (автоматически появится pop-up окно с тестами), compress автоматически сожмет все скрипты, production – режим “готового” приложения.

Шаг 3: создание приложения.

В параметре include.js мы указали название приложения – helloworld. Это значит, что скрипт include будет искать файл приложения helloworld.js в папке apps. Создадим его, и добавим туда несколько строк:

// подключаем плагины view и controller
include.plugins('controller');
include.plugins('view');
include.plugins('model');

// подключаем контроллеры
include.controllers('main');
include.controllers('hello');
include.models('hello');

Здесь мы подключаем плагины view, controller и model, а затем подключаем контроллеры main и hello, которые будут управлять всеми событиями на странице. Контроллер main (MainController) – это специальный тип контроллера, который позволяет добавлять обработчики событий к объектам window и document. В последней строке мы добавляем модель hello, которая нужна для получения данных от сервера.

Шаг 4: Создание контроллеров.

Контроллеры создаем в папке controllers, обязательно указывая для них постфикс _controllers.js. В файл main_controller.js пишем следующее:

Controller('main',{
  // обработчик события onload для объекта window
  load: function(){

	var data = {
		header : new View({url: 'header.ejs'}).render({title:'My MVC page'}),
		footer : new View({url: 'footer.ejs'}).render({copyright:'Some rights reserved. My copyright notice'}),
		sidebar : new View({url: 'sidebar.ejs'}).render({aList : [{linkTitle:'Link1',linkHref:'#1'}, {linkTitle:'Link2',linkHref:'#2'}, {linkTitle:'Link3',linkHref:'#3'}]})
	}
	document.body.innerHTML = new View({url: 'layout.ejs'}).render(data);
  }
});

Здесь мы инициализируем новый контроллер и функцию load, которая будет выполняться при загрузке страницы. В файл hello_controller.js пишем следующее:

Controller('links',{
  // обработчик события onclick для элементов с атрибутом class="link"
  click: function(params){
  	  var href = params.element.getAttribute('href');
  	  var id = href.replace(/^.*\#/,'');
  	  Hello.find(id, null, find_callback);
  	  params.event.preventDefault();
  }
});

// обрабатываем полученный от сервера результат
function find_callback(post){
	var elem = document.getElementById("content");
	elem.innerHTML = '' + post.postTitle + '';
	elem.innerHTML += '' + post.postBody + '';
}

В этом контроллере функция click будет выполняться для элементов с атрибутом class=”link”. Здесь следует упомянуть о правилах именования элементов, определяющих порядок присвоения контроллеров к элементам HTML:

Если имя контроллера в множественном числе (множественное число в английском языке обозначается суффиксом -s в конце), например ‘employees’, то он соответствует всем элементам с именем класса в единственном числе, т.е. ‘employee’.
Если имя контроллера в единственном числе, например ‘item’, то он соответствует элементам с ID, равным имени контроллера, т.е. ‘item’.

Что касается аргумента params, то это объект, который включает в себя переменные event (объект “событие”), element (ссылка на элемент, который вызвал событие) и action (например “click” – тип события). Далее я использую функцию preventDefault() объект event чтобы предотвратить действие ссылки по умолчанию (объект event кроссбраузерный, поэтому это будет работать и в IE).

Шаг 5: создание шаблонов (View)

Шаблоны подключаются примерно следующим образом:

var myView = new View({url: 'file_name.ejs'});

Здесь параметр url указывает имя файла шаблона, который должен находиться в папке view. Для отображения шаблона (или обработки его содержимого) используется функция render(), в которую нужно передать объект с переменными шаблона. Пример:

var myView = new View({url: 'file_name.ejs'});
var someHTML = myView.render( { 'name' : 'value', 'nick' : 'dima' } );

В нашем примере я подключил черыре разных шаблона в контроллер main:

	var data = {
		header : new View({url: 'header.ejs'}).render({title:'My MVC page'}),
		footer : new View({url: 'footer.ejs'}).render({copyright:'Some rights reserved. My copyright notice'}),
		sidebar : new View({url: 'sidebar.ejs'}).render({aList : [{linkTitle:'Link1',linkHref:'#1'}, {linkTitle:'Link2',linkHref:'#2'}, {linkTitle:'Link3',linkHref:'#3'}]})
	}
	document.body.innerHTML = new View({url: 'layout.ejs'}).render(data);

Самый главный шаблон здесь – layout.ejs, который определяет основную структуру документа, содержимое остальных трех передается в layout.ejs в качестве переменных шаблона. Содержимое этого шаблона запишем следующим образом:

<%= header %>


	<%= sidebar %>
	
	Page content
	Some text
	
	


<%= footer %>

Как видите это просто HTML с добавлением переменных шаблона в тэгах <%= … %>. Если у нас в шаблоне, к примеру есть переменная <%= header %>, а в функцию render() был передан объект data, то переменная шаблона header будет заменена на содержимое переменной data.header.

Теперь создаем остальные шаблоны.

header.ejs – “шапка” страницы:


	<%= title %>

sidebar.ejs – сайдбар:



    <% for(var i=0; i
        
            
                <%= aList[i].linkTitle %>
            
        
    <% } %>

В этом шаблоне помимо обычных тэгов, используются тэги без знака “равно” <% … %>. Они не возвращают результат, а их содержимое просто выполняется интерпретатором. Я использую их здесь для организации цикла.

footer.ejs – “подвал” страницы:

<%= copyright %>

Шаг 6: создание моделей (Model)

В серверных приложениях MVC, таких как Ruby On Rails, Codeigniter и др., модели выполняют роль связующего звена между контроллерами и базой данных. В JavascriptMVC для этой цели используются асинхронные запросы к серверу при помощи библиотеки Jester, которая имитирует ActiveResource в приложениях Rails.

Model('hello', {
	format: 'json',
	prefix: 'jmvc/resource',
	urls : { list: "/get.php", show: "/get.php?id=:id", create: "/create.php", update: "/update.php?id=:id" }
},
  null,
  null
);

Здесь мы просто создаем объект класса Model. Для его создания я использовал только два параметра – имя модели и опции. В опциях указаны формат сообщений (json или xml), prefix – путь к файлам обработчикам (в данном примере путь будет /jmvc/resource) и urls – файлы, которые будут возвращать результат при выборке данных (get.php) создании (create.php) и обновлении (update.php).

Для работы с данными в классе Model есть функции find() для выборки данных, create() – для добавления данных в БД, update() для обновления данных в БД и прочее.

В данном примере я использую только функцию find() для получения записи (смотрите выше в контроллере links).

Hello.find(id, null, find_callback);

Здесь id – это параметр, который будет подставлен в URL (выше мы указали для запроса show: “get.php?id=:id”, т.е. если id=3, то получим запрос get.php?id=3). Последний параметр это callback для обработки полученных результатов.

На этом всё. Смотрите демо, если нужно скачивайте пример. Только устанавливать надо на веб сервер чтобы увидеть в работе работу модели.

До встречи!

смотреть демо загрузить пример

Также можно скачать различные демо на странице проекта в Google Code

JSToolbox - все о JavaScript » JavascriptMVC