Использование тегов script в Backbone.js: объяснение примера

Быстрый ответ

Тег <script type="text/template"> используется для хранения HTML-кода, который не предназначен для немедленного отображения на странице. Это удобный метод организации HTML-шаблонов. Такие шаблоны извлекаются и наполняются данными через JavaScript когда это необходимо. Таким образом, этот тег позволяет создавать фрагменты интерфейса как дифферированный контент, который можно оживить в нужный момент.

<script type="text/template" id="my-template">
  <h1>{{title}}</h1>
  <p>{{message}}</p>
</script>

Далее, с помощью JavaScript, извлекается содержимое шаблона, а плейсхолдеры в нем заменяются актуальными значениями:

var tmpl = document.getElementById('my-template').innerHTML;
document.body.innerHTML += tmpl.replace('{{title}}', 'Привет').replace('{{message}}', 'Мир!');

Клиентский шаблонизатор: всё, что нужно знать

Клиентский шаблонизатор совмещает JavaScript и HTML для создания динамического контента. Когда проект разрастается, простое изменение DOM или склеивание строк становится недостаточно эффективным.

База для выбора: библиотеки для шаблонизации

Backbone.js не предоставляет собственных средств для шаблонизации, поэтому разработчик может выбрать на своё усмотрение:

• Underscore.js: Приемлемо совмещается с Backbone.js.
• Mustache: Шаблоны без логики, только разметка.
• Handlebars.js: Улучшенная версия Mustache.
• Haml, Eco, Google Closure templates: Пригодны для разработчиков, желающих экспериментировать.

Подробнее об этом расскажет наш спикер на видео

Преимущества использования <script type="text/template"> с точки зрения производительности

Использование <script type="text/template"> способствует улучшению производительности благодаря:

• Ускорению начальной загрузки, поскольку шаблоны не отображаются сразу.
• Уменьшению количества запросов к серверу, поскольку шаблоны уже загружены на стороне клиента.
• Параллельной загрузке с другими элементами страницы.

Стоит учесть следующие моменты:

• Совместимость с браузерами: старые версии могут вести себя непредсказуемо.
• Безопасность: обратите особое внимание на защиту от XSS-атак.
• Отладка: ошибки в шаблонах могут быть непрозрачными.

Визуализация

Представте HTML-документ как театральную сцену, где <script type="text/template"> — это закулисье:

Передняя часть сцены (🎭): то, что видит зритель – открытая часть HTML.
Закулисье (🗄️): `<script type="text/template"> ... </script>`, не видимая зрителям часть.

HTML-элементы и JavaScript обычно не имеют доступа в закулисье!

Когда JavaScriptу нужен новый элемент для работы:

var template = document.querySelector('script[type="text/template"]').innerHTML;

Этот элемент остается не заметным до того момента, когда он понадобится:

<div class="skit">
    <!-- Здесь появятся элементы шаблона. -->
</div>

Улучшите свои навыки работы с шаблонами

Разработайте свои шаблоны так, чтобы они были интерактивными и эффективными.

Микро-шаблонизация: внедрение JS в шаблоны

Попробуйте микро-шаблонизацию, которую предложил Джон Ресиг, используя _.template:

var compiled = _.template("Привет, <%= name %>!");
console.log(compiled({name: 'Джейн'})); // Выведет: "Привет, Джейн!"

Элемент <template>: современный метод

Используйте <template> для более эффективного и совместимого подхода:

<template id="my-new-template">
  <p>Содержимое шаблона тут</p>
</template>

Rails-приложения + Шаблоны: упакуйте все с помощью гема!

Если вы разрабатываете на Rails, гем Jammit поможет в интеграции шаблонов:

# assets.yml
templates:
  – templates/*.jst

Полезные материалы

1. <template>: Элемент шаблона содержимого – HTML: HyperText Markup Language | MDN — подробное руководство MDN по <template>.
2. HTML template tag — справочник и примеры работы с <template>.
3. javascript – Объяснение <script type = "text/template"> ... </script> – Stack Overflow — дискуссии сообщества о <script type="text/template">.
4. Can I use... Support таблицы для HTML5, CSS3 и т.д. — информация о совместимости <template> с различными браузерами.
5. HTML Standard — официальная документация по <template>.
6. Lit — библиотека для создания быстрых, производительных веб-компонентов с использованием <template>.