Статьи

Представляем новый шаблон HTML5 Tag

Октябрь 1, 2018

Современные веб-приложения используют DOM-манипуляции для динамического изменения областей страницы или вставки значений. Типичным примером является таблица цифр; исходная страница может возвращать заголовки столбцов HTML, а затем инициализировать запрос Ajax, который возвращает несколько записей данных. Затем данные добавляются в таблицу — но как? У разработчика есть два варианта:

  1. JavaScript используется для построения строк строк HTML или фрагментов DOM, которые добавляются в таблицу. Это кажется простым до тех пор, пока вам не понадобится внести изменения, и вам не придется искать код JavaScript, связанный с вашим JavaScript. Чтобы упростить жизнь, разработчики часто возвращают целые фрагменты HTML-строки из вызова Ajax, но это делает полезную нагрузку более многословной и открывает потенциал для атак с использованием межсайтовых сценариев.
  2. В качестве альтернативы вы создаете пустую первую строку на странице HTML, которая используется в качестве шаблона для всех остальных строк. Это должно быть проще в обслуживании, но вам нужно удалить его из DOM или оформить его с помощью display: ни одного, чтобы гарантировать, что он не появится.

Ни одно из решений не является особенно элегантным.

К счастью, W3C представил новый тег template который предоставляет механизм для определения фрагментов HTML-разметки как прототипов. (Возможно, это также успокоит тех, кто расстроен кончиной элемента hgroup !)

По сути, шаблон может использоваться для вставки фрагментов HTML-кода на вашу страницу, например 

 <template id="mytablerow">
<tr>
<td class="record"></td>
<td></td>
<td></td>
</tr>
</template>

Код templateheadbodyframeset Тем не мение:

  1. шаблоны не будут отображаться
  2. шаблоны не считаются частью документа, т.е. использование document.getElementById («mytablerow») не будет возвращать дочерние узлы
  3. шаблоны не используются до тех пор, пока они не будут использованы, т. е. вложенные изображения не будут загружаться, медиа не будут воспроизводиться, сценарии не будут запускаться и т. д.

Использование шаблонов

Чтобы использовать шаблон, его необходимо клонировать и вставить в DOM. Например, предполагая следующий HTML: 

 <table id="mytable">
<thead>
<tr>
<td>ID</td>
<td>name</td>
<td>twitter</td>
</tr>
</thead>
<tbody>

<!-- rows to be appended here -->

</tbody>
</table>

<!-- row template -->
<template id="mytablerow">
<tr>
<td class="record"></td>
<td></td>
<td></td>
</tr>
</template>

Мы можем клонировать новую строку в JavaScript: 

 // fetch tbody and row template
var	t = document.querySelector("#mytable tbody"),
	row = document.getElementById("mytablerow");

// modify row data
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "SitePoint";
td[2].textContent = "sitepointdotcom";

// clone row and insert into table
t.appendChild(row.content.cloneNode(true));

Важный вопрос: можем ли мы использовать шаблоны тегов?

Вероятно, не только пока. Он поддерживается в последних версиях ночных Chrome и Firefox. Opera будет поддерживать тег, когда он переключается на Blink . Пока нет слов от команд IE и Safari, но на JSfiddle был продемонстрирован шаблон shim, если вы хотите поддерживать все браузеры.

Лично я думаю, что тег template Это просто и стандартизирует методы создания шаблонов для разработчиков HTML5.

36
Share: