Веб-приложения используют архитектуры MVC для отделения бизнес-логики от представлений представления. Сложные проекты, которые включают в себя большое количество манипуляций HTML на стороне клиента с JavaScript, могут быть трудны в обслуживании В таких сценариях мы можем использовать системы шаблонов для повышения возможности повторного использования и упрощения задачи управления представлениями. Mustache.js предоставляет хорошо документированную систему шаблонов, которую можно использовать для управления вашими шаблонами. И, поскольку усы поддерживают различные языки, нам не нужна отдельная система шаблонов на стороне сервера. В этой статье рассматриваются основы работы с усами.
Зачем нам нужны шаблонные системы
Большинство разработчиков, которые не знают о системах шаблонов, создают новые фрагменты HTML-кода и динамически вставляют их в DOM, используя JavaScript. Обычный способ сделать это — указать элементы HTML в строке, а затем установить свойство innerHTML или вызвать метод jQuery html() . Пример этой техники показан ниже.
var dynamic_html = "<div><span>Highlighted</span><span>Author</span></div>"; document.getElementByID("container").innerHTML = dynamic_html;
Другой метод построения DOM — создание элементов и добавление их по отдельности, как показано ниже.
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-код списка в трех разных местах. Обычно это считается плохой практикой кодирования.
В таких сценариях мы можем использовать предопределенные шаблоны в разных местах без повторения кода. Mustache.js — очень популярный шаблонизатор, использующий JavaScript. Поскольку усы предоставляют шаблоны как на стороне сервера, так и на стороне клиента для многих языков, нам не нужно беспокоиться о выборе отдельных шаблонизаторов.
Начало работы с Mustache.js
Усы — это система логических шаблонов с открытым исходным кодом, разработанная для таких языков, как JavaScript, Ruby, Python, PHP и Java. Вы можете получить копию библиотеки, посетив официальную страницу на GitHub . Усы предоставляют шаблоны и представления в качестве основы для создания динамических шаблонов. Представления содержат данные, которые будут включены в шаблоны в формате JSON. Шаблоны содержат HTML-код презентации или данные с тегами шаблона для включения данных представления. Ранее мы упоминали усы как не имеющие логики. Это означает, что шаблоны не будут содержать условия if-else или циклов. Теперь давайте начнем с шаблонов усов на простом примере.
<!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() с кодом презентации и тегами для данных об имени и профессии. Метки обозначаются двойными скобками или усами, которые их окружают. Теперь давайте посмотрим, как работает метод render() .
Визуализация шаблонов усов
Следующий код показывает реализацию функции render() внутри файла mustache.js. Три параметра могут быть переданы в render() . Первые два параметра, template и view являются обязательными. partials можно рассматривать как динамические шаблоны, которые вы можете добавить в свой основной шаблон. В нашем предыдущем примере мы передали шаблон как встроенный параметр, а представление — как второй параметр и присвоили результат output переменной.
Writer.prototype.render = function (template, view, partials) { return this.compile(template)(view, partials); };
Это самая основная форма шаблонизации с усами. Давайте посмотрим на другие методы, доступные для создания более организованного кода.
Определение шаблонов усов
Существуют различные методы определения шаблонов усов в вашем приложении. Эти методы аналогичны включению CSS с использованием встроенных стилей, встроенных таблиц стилей и внешних таблиц стилей. Пример, который мы обсуждали ранее, можно рассматривать как встроенный метод, поскольку мы передаем шаблон непосредственно в функцию. Этот метод предотвращает возможность многократного использования шаблонов. Давайте посмотрим, как мы можем определить шаблоны как встроенные шаблоны сценариев, а не напрямую передавать их в функцию.
Шаблоны как встроенные скрипты
Мы можем определить данные шаблона внутри <script> и включить их в документ HTML. Чтобы запретить браузеру выполнять код шаблона, мы должны изменить тип MIME на что-то отличное от text/javascript . Некоторые распространенные типы MIME: text/html , text/template и text/mustache . Следующий пример представляет собой простой шаблон с использованием этого метода.
<script id="sample_template" type="text/html"> <h1>{{name}}</h1> </script>
Вы можете включить в документ столько шаблонов, сколько пожелаете, с разными идентификаторами. Если вы хотите использовать шаблон, получите HTML-код внутри тега сценария с помощью innerHTML и передайте его как шаблон. Наш первый пример изменится на следующий код.
<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() выполняет сценарии вместо их возврата, поэтому мы не можем создавать шаблоны внутри тегов сценария, как мы это делали в предыдущем методе. В следующем примере показаны файлы внешних шаблонов, которые мы собираемся использовать.
<div id="template1" > <h1>{{name}}</h1> </div> <div id="template2" > <div>{{name}}</div> </div> <div id="template3" > <p><span>{{name}}</span></p> </div>
Мы использовали элементы <div> для шаблонов вместо сценариев, чтобы обеспечить его совместимость с функцией load() jQuery. Здесь у нас есть три разных шаблона с тремя разными идентификаторами. Теперь давайте перейдем к использованию этих шаблонов на ваших страницах.
<!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 и загружает его. Затем мы можем получить шаблон из пустого контейнера и передать его усам для рендеринга. Вот как работает внешний метод. Мы также можем получить данные с сервера, используя запрос AJAX.
Вывод
Механизмы и структуры шаблонов важны для управления сложными системами с динамически меняющимися представлениями презентаций. Mustache.js — один из лучших вариантов управления шаблонами на стороне клиента. Мы начали этот урок с объяснения, почему шаблоны важны. Затем мы перешли к различным методам использования шаблонов усов. Теперь вы сможете выбрать способ внедрения шаблонов усов в свои проекты.
Мы завершили изучение различных методов использования шаблонов усов, но усы также поставляются с такими тегами, как переменные, разделы, функции и частичные элементы, которые используются для управления сложными шаблонами. Обсуждение синтаксиса каждого тега выходит за рамки данного руководства. Вы можете найти полное руководство по меткам усов на странице усов GitHub .
Не стесняйтесь поделиться своим предыдущим опытом работы с mustache.js!