- → Программирование
- → JavaScript
- → Статьи
Mustache.js – обзор, начало работы, разработка HTML шаблонов с mustache
Веб приложения используют MVC архитектуру, чтобы отделить бизнес логику от презентационного вида. Сложные проекты, с насыщенной клиентской стороной могут быть трудоемкими в разработке. Во многих сценариях кода можно использовать шаблонные системы для увеличения скорости разработки и простоты изменения видов в дальнейшем.
Mustache.js
Mustache.js предоставляет хорошо документированную шаблонную систему, которая может быть использована для управления HTML шаблонов. Так, как mustache поддерживает большое количество программных языков, нам не надо использовать несколько шаблонизаторов на серверной стороне.
В этой статье мы рассмотрим основы работы и проектирования HTML шаблонов с библиотекой mustache.js
Зачем нужны шаблонные системы?
Многие разработчики, которые не пользуются благами шаблонизаторов, создают новые узлы HTML кода и динамически вставляют их в DOM используя JavaScript. Наиболее распространенный способ достичь этого, создать строку HTML кода, после использовать innerHTML свойство или html() jQuery метод для вставки кода в шаблон. Рассмотрим пример такой техники:
var dynamic_html = "<div><span>Highlighted</span><span>Author</span></div>";
document.getElementByID("container").innerHTML = dynamic_html;
Немного иной способ, создать DOM элементы средствами JS и вставить их индивидуально, как показано ниже:
var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');
highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);
Оба способа выше используются для динамического создания HTML элементов на странице. Например, нам надо использовать красивый список в дизайне троих разных страниц. Используя эти техники, надо повторять HTML код в троих разных местах. Это не очень хорошо.
Во многих сценариях мы можем использовать заранее подготовленные шаблоны, избегая повторения кода.
Mustache.js очень популярная библиотека для генерации шаблонов с помощью JavaScript. Так как mustache предоставляет решение для клиентской и серверной стороны одновременно, нам не нужно беспокоиться о выборе нескольких шаблонизаторов.
Начало работы с Mustache.js
Mustache – это открытый ресурс, который разрабатывается на JavaScript, Ruby, Python, PHP, и Java. Вы можете скачать последнюю версию библиотеки на официальной GitHub странице проекта. Mustache базируется на шаблонах и видах при создании динамических дизайнов. Виды содержат данные, которые будут использованы в шаблоне в JSON формате. Шаблоны содержат презентационный HTML и данные со специализированными тегами для подключения видов.
Что же, приступим. Начнем с простой структуры:
<!doctype html>
<html lang="en">
<head>
<title>Mustache.js Inline Method</title>
<script type="text/javascript" src="mustache.js" ></script>
<script>
var view = {
name : "Joe",
occupation : "Web Developer"
};
function loadtemp(){
var output = Mustache.render("{{name}} is a {{occupation}}", view);
document.getElementById('person').innerHTML = output;
}
</script>
</head>
<body onload="loadtemp()" >
<p id="person"></p>
</body>
</html>
Прежде, подключаем файл библиотеки mustache.js в начале документа. Теперь можно работать. В виде описаны имя персоны и ее род деятельности. Далее мы имеем шаблон внутри функции render() в котором содержится презентационный HTML код с тегами имени и рода деятельности. Теги определяются с помощью двойных фигурных дужек. Далее рассмотрим как работает метод render().
Обработка mustache шаблонов
Следующий код показывает применение функции render() внутри mustache.js файла. В функцию могут быть переданы три параметра. Первые два, шаблон и вид, обязательны. Третий может применяться для динамических шаблонов встраиваемых в главных шаблон. В нашем прежнем примере, мы передавали только первые два параметра.
Writer.prototype.render = function (template, view, partials) {
return this.compile(template)(view, partials);
};
Это наиболее простой и базовый способ построения шаблонов с mustache. Взглянем на другие варианты написания кода.
Разработка HTML + Mustache шаблонов
Существует несколько способов встроить mustache шаблоны в ваше веб приложение. Эти методы схожи с подключением CSS стилей. То есть, можно прописывать строкой кода, блоком, или подключать внешний файл. Пример, который рассматривали раньше, является строковым подключением шаблона. Рассмотрим, как можно использовать шаблоны в качестве строковых скриптов.
Подключение шаблонов строковым методом
Мы можем определить шаблон внутри тега <script>, который включить в HTML структуру кода. Чтобы предотвратить обработку кода шаблона, необходимо изменить MIME тип text/javascript, на что-то другое. Можно использовать следующие MIME типы: text/html, text/template, text/mustache. Следующий пример, показывает как это реализовать:
<script id="sample_template" type="text/html">
<h1>{{name}}</h1>
</script>
Вы можете встраивать множество шаблонов с разными ID в тело HTML документа. Когда потребуется его использовать, достаточно вызвать innerHTML, и передать в функцию render() как шаблон. Вот так:
<script type='text/javascript'>
var template = document.getElementById('sample_template').innerHTML;
var output = Mustache.render(template, view);
document.getElementById('person').innerHTML = output;
</script>
Как видно, шаблоны хранятся отдельно и используются динамически, только когда это нужно. Такой подход увеличивает возможности повторного использования шаблонов. Хотя, использование строковых скриптов ограничивает видимость шаблонов в рамках одной страницы. Если у вас несколько страниц, надо определять шаблоны снова. Поэтому, подключение шаблонов как внешних файлов будет идеальным решением – как в случае с CSS.
Шаблоны как внешние HTML сниппеты
В этом случае, мы будем использовать jQuery для подключения шаблонов. jQuery предоставляет функцию load(), которая позволяет подключать внешние куски кода документа. Load() функция не выполняет скрипты, потому нам не надо заключать шаблон в тег <script>, как мы делали в предыдущем варианте. Следующий код показывает как выглядит внешний подключаемый шаблон:
<div id="template1" >
<h1>{{name}}</h1>
</div>
<div id="template2" >
<div>{{name}}</div>
</div>
<div id="template3" >
<p><span>{{name}}</span></p>
</div>
Вместо тега <script>, мы используем <div> блок, чтобы отделить один шаблон от другого. Мы имеем три разных шаблона с разными ID блоков. Теперь перейдем к их использованию в теле документа:
<!doctype html>
<html lang="en">
<head>
<title>Mustache.js External Method</title>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="mustache.js" ></script>
<script>
$(document).ready(function(){
var view = {
name : "Joe",
occupation : "Web Developer"
};
$("#templates").load("template.html #template1",function(){
var template = document.getElementById('template1').innerHTML;
var output = Mustache.render(template, view);
$("#person").html(output);
});
});
</script>
</head>
<body>
<p id="person"></p>
<div id="templates" style="display: none;"></div>
</body>
</html>
jQuery вставляет HTML код в тело документа, не в переменную! Поэтому нам надо создать отдельный блок для шаблонов. В примере использован templates, который скрыт по умолчанию. В коде выше, мы получаем template1 и загружаем его. Теперь можем получить шаблон из блока документа и передать на обработку в mustache. Вот как работает этот способ. Так же можно получать данные из сервера используя AJAX запросы.
В завершение
Шаблонизаторы и фреймверки важны при управлении сложных систем с динамическими презентационными видами. Mustache.js является одним из лучших в своем роде.
Теперь вы имеете решение на случай создания сложных проектов. Более подробную информацию и обсуждения можно найти на mustache GitHub странице (на английском).
Будем рады узнать ваш опыт использования mustache.js! Делитесь им в комментариях ниже.
Источник материала ...
Дальше: Как перенести сайт на WordPress? Инструкция по переезду сайта на WordPress
Development — Taras Moroz