template标签详解

一、template标签的概念及用途

template标签是HTML5新增的标签，用于定义模板内容，在页面载入时不显示，可以作为一个占位符，在需要时使用JavaScript动态地添加到文档当中，用于模板复用，即在不同的地方使用同一份HTML代码。在实际应用中，通常把一些常用的HTML结构放入template标签中，通过JavaScript动态生成内容，并插入到页面中。

template标签的主要用途有两个：1）页面模板的复用。2）减少由于动态添加、删除元素而造成的回流重绘。当我们需要添加一些重复的元素，并且需要 JavaScript 动态添加到页面中时，我们通常需要先创建相应的元素，然后通过 DOM 操作将它们添加到页面中，这个过程会引起重绘和回流，从而降低性能。而使用 template 标签可以避免这种情况的发生，因为它的内容是不会显示在页面中的，只有当需要使用的时候才会被取出来使用。因此，它可以提高 JavaScript 动态添加元素的性能。

二、template标签的基本语法和属性

template标签的语法非常简单，只需要在HTML文档中添加一个template标签即可。template标签可以包含任何的HTML内容，包括标签和文本，但是这些内容在文档解析时是不会被显示的。此外，template标签还可以添加一些属性，这些属性可用于指定模板的一些特性，如是否可以复制、粘贴等。

<template id="myTemplate">
  <div>
    <h3>这是一个模板</h3>
    <p>这里可以包含任何 HTML 内容</p>
  </div>
</template>

template标签的常用属性有以下三个：

id：用于定义模板的唯一标识符。
contenteditable：标示模板是否可以被编辑，默认值为 false，表示模板是只读的。
data-*：用户自定义属性，可以存储任何数据。

三、template标签的兼容性问题

template标签是 HTML5 中新添加的标签，因此不兼容IE浏览器。但是我们可以使用 polyfill 技术来解决这个问题，polyfill（或称”IE 兼容性库”）是一些 JavaScript 脚本，它们可以模拟实现一些新特性，从而让低版本浏览器也能支持这些特性。

这里我们使用一个叫做 “Web Components” 的 polyfill，它是一个独立的浏览器库，可以在所有主流浏览器中使用。使用方法非常简单：只需要引入它的脚本文件即可：

<script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.15/webcomponents-lite.min.js"></script>

四、template标签的应用实例

template标签的应用实例非常丰富，这里只列举常见的几种应用场景。

4.1 列表数据的渲染

使用 template 标签可以把常见的列表数据页变得更加简单，因为我们只需要定义一份数据模板即可，然后在 JavaScript 中动态地插入数据。下面是一个简单的示例：

<template id="list">
  <li></li>
</template>

<ul id="myList"></ul>

<script>
  var list = document.querySelector('#list');

  for(var i = 0; i < 10; i++){
    var clone = document.importNode(list.content, true);
    clone.querySelector('li').textContent = i + 1;
    document.querySelector('#myList').appendChild(clone);
  }
</script>

上面的示例中使用了一个 template 标签来定义一个 li 元素，然后在 JavaScript 中动态添加了 10 个 li 元素到 #myList 中。

4.2 弹框控件的渲染

使用 template 标签还可以方便地渲染弹框等控件，如下面的示例：

<template id="dialog">
  <div id="dialog">
    <header>
      <h3></h3>
    </header>
    <section>
      <p></p>
    </section>
    <footer>
      <button>确定</button>
      <button>取消</button>
    </footer>
  </div>
</template>

<script>
  var dialog = document.querySelector('#dialog');
  var clone = document.importNode(dialog.content, true);

  clone.querySelector('h3').textContent = '提示';
  clone.querySelector('p').textContent = '你确定要删除这个文件吗？';
  
  var buttons = clone.querySelectorAll('button');
  buttons[0].addEventListener('click', function(){
    // 确定按钮
  });
  buttons[1].addEventListener('click', function(){
    // 取消按钮
  });

  document.body.appendChild(clone);
</script>

上面的示例中定义了一个 dialog 模板，然后通过 JavaScript 动态添加内容和事件监听器，最后插入到页面中。

4.3 表单数据的渲染

如果我们有一个表单需要填写大量信息，那么可以使用 table 标签、tr 行和 td 列来布局数据表单，然后通过 template 标签来定义表格行：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2" align="center">
        <button>确定</button>
        <button>重置</button>
      </td>
    </tr>
  </tfoot>
  <tbody id="myForm"></tbody>
</table>

<template id="row">
  <tr>
    <td></td>
    <td></td>
  </tr>
</template>

<script>
  var row = document.querySelector('#row');
  var tbody = document.querySelector('#myForm');

  for(var i = 0; i < 5; i++){
    var clone = document.importNode(row.content, true);
    clone.querySelector('td:first-child').textContent = '张三' + (i + 1);
    clone.querySelector('td:last-child').innerHTML = '<input type="text" name="age">';
    tbody.appendChild(clone);
  }
</script>

上面的示例中定义了一个 row 模板，然后通过 JavaScript 动态添加表格行和输入框，最终插入到页面中。

五、总结

本文针对template标签的概念、基本语法和应用实例进行了详细的介绍。使用 template 标签可以使 HTML 与 JavaScript 更好地分离，提高代码的可维护性，同时还可以减少回流和重绘的次数，提高页面性能。需要注意的是，template 标签在 IE 浏览器中不兼容，需要使用 polyfill 技术来解决这个问题。最后，希望大家可以在实际项目中灵活使用 template 标签，提高开发效率。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/244426.html