Freja&nb p;&mda h; модель, представление, контроллер

Рассказ о Freja JavaScript Framework мы начнем с нескольких общих слов, касающихся шаблона проектирования MVC (Model View Controller). Думаю, что практически все читатели, как минимум, десяток раз сталкивались с этим понятием, но, наверное, не каждый знает, что именно под ним понимается. Попробуем объяснить в двух словах. Итак, Model View Controller — это шаблон проектирования (или, если другими словами, архитектура программного обеспечения), в котором модель данных приложения (Model, модель), пользовательский интерфейс (View, представление) и управляющая логика (Controller, контроллер) разделены на три отдельных компонента. При этом изменение одного из перечисленных компонентов оказывает минимальный эффект на оставшиеся компоненты.

 

 

То есть шаблон MVC фактически позволяет разнести данные, представление и обработку действий пользователя на разные уровни. Сегодня, по мнению значительной части разработчиков, именно MVC является одним из лучших решений в плане проектирования ПО.

Теперь посмотрим, за что каждый из компонентов MVC отвечает:

• Model (модель) — этот компонент предоставляет данные (как правило, для View), а также реагирует на запросы от контроллера, изменяя свое состояние;
• View (представление) — этот компонент отвечает за, условно говоря, отображение информации (пользовательский интерфейс);
• Controller (контроллер) — этот компонент интерпретирует данные, введенные пользователем, и информирует модель и представление о необходимости соответствующей реакции.

Freja JavaScript Framework разработана на базе шаблона проектирования MVCВот, в принципе, и все. Остается добавить лишь о том (и это крайне важно), что и представление, и контроллер зависят от модели. В то же время сама модель не должна зависеть ни от представления, ни от контроллера. Таким образом, у разработчика появляется возможность строить модель без привязки к визуальному представлению. Отметим также, что впервые шаблон проектирования MVC был предложен для языка Smalltalk. На этом с MVC заканчиваем и переходим непосредственно к герою нашего сегодняшнего материала — Freja JavaScript Framework.

Общие сведения

Итак, как уже отмечалось чуть выше, Freja JavaScript Framework разработана на базе шаблона проектирования MVC. Каковы практические последствия? Как минимум, любопытны. Во-первых, в качестве модели используется XML-документ, предоставляемый сервером. Он может быть как статичным файлом, так и генерируемым динамически в результате выполнения скрипта на серверной стороне. Подключаем модель к приложению мы всего лишь одной строчкой.

var myModel = getModel('/path.to.model/model.name.xml');

Далее идет черед представления, которое в рамках Freja JavaScript Framework является обычным XSL-документом, лежащим на сервере, и подключается к приложению также одной-единственной строчкой.

var myView = getView('/path.to.view/view.name.xsl');

В качестве же контроллера в веб-приложениях, созданных с помощью Freja JavaScript Framework, выступает непосредственно наш JavaScript-код, который и управляет логикой программы и взаимодействием между представлением и моделью. Минимально необходимый для комплексной работы (представление данных из модели, обновление данных в модели и так далее) код состоит из трех простейших строк.

myView.render(myModel);
myModel.updateFrom(myView);
myModel.save();

Первая строчка рендерит данные из модели в представление. Вторая строчка берет данные, введенные или измененные пользователем в представлении, и с их помощью обновляет модель. Третья строчка, как нетрудно догадаться, сохраняет модель с уже обновленными из представления данными. Все очень просто даже для человека, минимально знакомого с технологиями, способами и методиками разработки веб-приложений. Если же говорить о преимуществах Freja JavaScript Framework по сравнению с другими аналогичными проектами, то здесь мы обратимся к словам разработчиков описываемого продукта, ибо они лучше всех остальных знают свое детище. Плюс несколько пунктов из других источников.

Список преимуществ Freja JavaScript Framework выглядит следующим образом:

• Freja JavaScript Framework изначально проектировался и создавался для разработки single-screen веб-приложений;
• высокий уровень гибкости и расширяемости как самой Freja JavaScript Framework, так и веб-приложений, созданных с ее помощью;
• true MVC (этот момент мы уже рассмотрели со всех сторон);
• полное разделение всего кода веб-приложения на серверную часть и клиентскую часть;
• Freja JavaScript Framework полностью построена на основе открытых стандартов (XML, XSLT), что, в принципе, сегодня уже является обычным делом;
• небольшой размер и минимум информации, которую придется изучить, прежде чем начать работать с Freja JavaScript Framework;
• веб-приложения, разработанные на базе Freja JavaScript Framework, работают правильно во всех современных веб-браузерах: Internet Explorer, Firefox, Safari, Opera;
• если требуется, то Freja JavaScript Framework отлично работает в комплексе с другими популярными JavaScript-библиотеками (Prototype, script.aculo.us, Dojo и так далее).

Отметим, что последний пункт в списке преимуществ Freja JavaScript Framework имеет достаточно большое значение для многих проектов. Для наглядности приведем простенький пример. Представим, что мы занимаемся разработкой комплексного современного веб-проекта, где нужно обеспечить не только асинхронное взаимодействие между сервером и клиентом, но и красивые визуальные эффекты и полноценный по сегодняшним меркам пользовательский интерфейс. Допустим, что схема работы с клиентом/сервером во Freja JavaScript Framework нас полностью устраивает, но для визуальных эффектов мы хотим использовать популярнейший на данный момент script,aculo.us. Никаких проблем — все будет работать без каких-либо функциональных ограничений и проблем.

Практика

Разумеется, наш обзор был бы неполным без рассказа об особенностях практического использования Freja JavaScript Framework. Перед тем как начать, заметим, что работать с этим продуктом действительно просто. Сама библиотека содержит минимальный набор функций и объектов (чем и объясняется ее малый размер), и все они прозрачны для разработчика. Иными словами, если человеку уже приходилось до момента знакомства с Freja JavaScript Framework работать с какими-то другими продуктами, то обучение вообще не займет никакого дополнительного времени.

Freja JavaScript Framework использует такие открытые стандарты, как XML и XSLTИтак, минимально необходимый набор файлов для веб-приложения, созданного на базе Freja JavaScript Framework, выглядит примерно следующим образом:

• datamodel.xml — этот файл содержит данные для нашего веб-приложения (мы используем статичный XML-документ, но, как говорилось в самом начале, можно использовать и динамически создаваемый);
• viewdisplay.xsl — этот файл содержит шаблон для представления данных пользователю;
• controller.js — этот файл содержит JavaScript-код, который управляет логикой нашего веб-приложения (мы вынесли его в отдельный файл, но можно писать и в HTML-файле);
• index.html — назначение этого файла, думаю, понятно всем: в нем все сводится воедино, и к нему обращается конечный пользователь нашего веб-приложения;
• freja.js — этот файл содержит код Freja JavaScript Framework.

В рамках настоящего материала мы не будем давать содержимое файлов с данными и с шаблоном, ибо там, по большому счету, может быть что угодно (в рамках заявленных стандартов, разумеется). Поэтому сразу перейдем к index.html.

<html>
<head>
<title>Пример для Freja JavaScript Framework</title>
<script type='text/javascript' src='freja.js'></script>
<script type='text/javascript' src='controller.js'></script>
</head>
<body>
<div id='content'> </div>
</body>
</html>

Здесь мы подгрузили два JavaScript-файла (саму библиотеку и код контроллера), а также добавили один div, у которого атрибут id имеет значение сontent. Самая же важная часть нашего веб-приложения, как можно логично предположить, находится в файле controller.js.

var data = getModel('datamodel.xml');
var display = getView('viewdisplay.xsl');
display.render(data, "content");

Для того чтобы все было понятно, рассмотрим последовательно значение каждой строчки кода. Итак, в первой мы подгружаем данные с сервера. Во второй — опять же с сервера подгружаем шаблон для дальнейшего представления данных конечному пользователю. И, наконец, в третьей строчке мы осуществляем рендеринг данных с помощью шаблона в указанный div. Однако для большинства серьезных проектов подобного функционала вряд ли хватит, посему добавим в приложение немного интерактива: сделаем «переключатель» представления данных. Для этих целей вначале чуть изменим index.html, добавив под наш единственный div две ссылки, отвечающие за разные виды представления данных.

<body>
<div id='content'> </div>
<a href='#' id='editLink'>edit</a>
<a href='#' id='displayLink'>display</a>
</body>

Затем перепишем controller.js.

var data = getModel('datamodel.xml');
var display = getView('viewdisplay.xsl');
var edit = getView('viewedit.xsl');
display.render(data, "content");

document.getElementById('editLink').onclick = function() { edit.render(data, "content"); };
document.getElementById('displayLink').onclick = function() { display.render(data, "content"); };

Freja JavaScript Framework пока не очень популярнаИ снова ничего сложного. Во-первых, мы добавили еще один view из шаблона на сервере под названием viewedit.xsl. А затем присвоили каждой ссылке-"переключателю" по функции, каждая из которых производит рендеринг данных с помощью соответствующего (указанного нами в коде) представления.

В заключение же материала остается добавить лишь пару слов о применимости Freja JavaScript Framework. С одной стороны, этот продукт выглядит гораздо менее комплексно, чем многие его конкуренты. Но, с другой, он достаточно просто и прозрачно решает поставленную перед ним задачу, и наверняка найдутся такие проекты, где его использование будет действительно оправданно и эффективно.



Статья получена: hostinfo.ru