Использование шаблонов в браузере становится все более и более распространенным.Перемещение логики приложения от сервера к клиенту, и увеличение использования MVC-подобных моделей (model– view– контроллер) вдохновил шаблоны, чтобы охватить браузера.Раньше это серверное только делом, но шаблоны на самом деле очень мощная и выразительная в разработке клиентской части, как well.
Изображение Фото: Виктор Hertz
Почему бы вам использовать это
В общем, используя шаблоны это отличный способ отделить разметки и логики представления и максимального повторного использования кода и ремонтопригодности.С синтаксисом близки к желаемый результат (т.е. HTML), у вас есть четкий и быстрый способ добиться своей цели.Хотя шаблоны могут быть использованы для вывода любого текста, в этой статье мы приводим примеры использования HTML, так это то, что мы хотим на стороне клиента development.
В today’ S динамических приложений, клиент часто необходимо обновить пользовательский интерфейс (UI).Это может быть сделано за счет извлечения HTML фрагмент из сервера, который может быть легко вставлен в документ.Но для этого требуется сервер для поддержки предоставления таких фрагментов (в отличие от полных страниц).Кроме того, как на стороне клиента разработчик, который отвечает за разметку, вы хотите иметь полный контроль над вашим templates.Не нужно ничего знать о Smarty, Velocity, ASP, некоторые другие неясные серверных синтаксиса или еще хуже: дело со спагетти кода, такого как HTML, содержащие эти печально известный <? или <% теги всему place.
Так let’ S-новому взглянуть на альтернативу: на стороне клиента templating.
Первый Impressions
Для начала, I’ D хотел бы дать определение термина “ template”.Вот хорошее definition от FOLDOC:
“ Документ, который содержит параметры, которые были определены некоторые специальные синтаксиса, которые заменен на фактические аргументы шаблонов обработки system.”
Let’ S наблюдать, например, и посмотрите, что базовый шаблон может выглядеть так:
<h1>{{title}}</h1>
<ul>
{{#names}}
<li>{{name}}</li>
{{/names}}
</ul>
Это, вероятно, выглядит очень знакомо, если вы знаете HTML.Он содержит HTML-теги с некоторыми заполнителей.Мы заменим их с некоторыми фактическими данными.Например, с помощью этого простого объекта:
var data = {
"title": "Story",
"names": [
{"name": "Tarzan"},
{"name": "Jane"}
]
}
Объединение шаблонов и данных должны привести следующие HTML:
<h1>Story</h1>
<ul>
<li>Tarzan</li>
<li>Jane</ul>
</ul>
С шаблоны и данные разделены, она становится легко поддерживать HTML.Например, изменение или добавление тегов классов нужно будет только изменения в шаблоне.Кроме того, добавление атрибутана повторяющиеся элементы, такие как <li> элемент только должно быть сделано once.
Шаблон Engine
Синтаксис шаблона (т.е. формате заполнители, такие как {{title}}) зависит от шаблон engine Вы хотите использовать.Этот двигатель заботится о разбора шаблонов, и заменить заполнители (переменные, функции, циклы и т.д.) с фактическими данными это provided.
Некоторые шаблон двигателей логико-less.Это doesn’ означает, что вы можете иметь только простые заполнители в шаблоне, но функции довольно ограничены некоторые интеллектуальные метки (т.е. массив итерации, условный рендеринг и т.д.).Другие двигатели более многофункциональным и расширяемый.Не вдаваясь в подробности, вопрос, спросите себя, является ли и сколько логикой вы позволяете в вашем templates.
Хотя каждый шаблон машина имеет свой собственный API, как правило, вы найдете такие методы, как render() и compile(). render процесс создания конечного результата, поставив фактические данные в шаблон.Иными словами, заполнители заменяются на фактические данные.И если есть какие-либо шаблонов логики, то она выполняется.Чтобы compile шаблон означает, разобрать его, и перевести его в функцию JavaScript.Любой шаблонов логики в переводе на наличие, и данные могут быть поданы на функцию, которая объединяет все биты и куски вместе в оптимизированном way.
Усы Example
Производства приведенном выше примере можно выполнить с помощью шаблона двигателя, например, Mustache.js.Это использует популярный Mustache шаблоны синтаксиса.Подробнее о них, и альтернатив, позже.Let’ посмотрим на небольшой JavaScript для получения некоторых результатов:
var template = '<h1>{{title}}</h1><ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>';
var data = {"title": "Story", "names": [{"name": "Tarzan"}, {"name": "Jane"}]};
var result = Mustache.render(template, data);
Теперь мы хотим показать это на странице.В переводе на простой JavaScript это можно сделать так:
document.body.innerHTML = result;
That’ все!Вы можете попробовать выше, в вашем браузере путем размещения Усы сценарий, прежде чем ваш собственный код:
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
Или, вы можете попробовать это на примере jsFiddle.
Организационный Templates
Если you’ повторно, как я, вы, вероятно, don’ T хотел бы иметь HTML в одну длинную строку.Это трудно читать, и трудно поддерживать.В идеале, мы можем поставить наши шаблоны в отдельные файлы, так у нас еще есть все преимущества подсветка синтаксиса, и умение правильно отступ линии HTML для readability.
Но это приводит к другому вопросу.Если наш проект содержит множество шаблонов, мы don’ хотите, чтобы загрузить все эти файлы по отдельности, так как эта вопросов много (Ajax) запросы.Это было бы плохо для performance.
Сценарий 1: Сценарий Tags
Часто видели решение поставить все шаблоны в течение <script> теги с альтернативными type атрибут, например,type="text/template" (которое игнорируется для оказания разбора или в браузере):
<script id="myTemplate" type="text/x-handlebars-template">
<h1>{{title}}</h1>
<ul>
{{#names}}
<li>{{name}}</li>
{{/names}}
</ul>
</script>
Таким образом, вы можете поместить все ваши шаблоны в HTML документ и предотвратить вседополнительных запросов Ajax для тех, templates.
Содержание таких тег может быть использован позже в вашей JavaScript в качестве шаблона.В следующем примере кода, на этот раз используя Рули шаблонов двигатель и немного JQuery, использует предыдущий <script> теги:
var template = $('#myTemplate').html();
var compiledTemplate = Handlebars.compile(template);
var result = compiledTemplate(data);
Вы можете попробовать это пример, а на jsFiddle.
Результат здесь такой же, как в нашем примере Усы.Руль можно использовать Усы шаблонов, так что мы будем использовать тот же шаблон здесь.Существует одно (главное) разница, хотя, который является то, что Рули использует промежуточный шаг, чтобы получить HTML результат.Сначала он компилирует шаблон в функции JavaScript (мы назвали его compiledTemplate здесь).Эта функция затем выполняется с использованием данных как единственный аргумент, возвр …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров