HTML5的Template标签怎么用？如何实现动态模板？-html教程-PHP中文网

html5的<template>标签用于定义惰性html模板，其内容不会在页面加载时渲染或执行资源。使用它需要两步：1. 在html中定义模板结构；2. 用javascript克隆并插入dom实现激活。相比字符串拼接和隐藏元素方式，<template>提升了性能和安全性。动态数据绑定通过javascript手动实现，常用于列表渲染等场景。高级应用包括结合web components实现组件封装、在shadow dom中使用模板、以及单页应用的路由视图管理。注意事项包括：模板内容虽惰性但仍需合法结构、样式默认全局、脚本不自动执行、大量渲染需优化性能、且无内置响应式绑定机制。

HTML5的Template标签怎么用？如何实现动态模板？

HTML5的template标签，说白了，就是个“内容蓝图”或者“待用模版”。它允许你定义一段HTML内容，这段内容在页面加载时不会被立即渲染，也不会占用资源（比如图片不会加载，脚本不会执行），直到你用JavaScript明确地去激活它、克隆它，并把它插入到DOM中。这玩意儿极大地提升了前端开发的效率和安全性，特别是当你需要重复渲染相似结构的内容时。你可以把它想象成一个隐形的舞台幕布，幕布后面已经搭好了场景，但观众看不到，直到你拉开幕布，或者把搭好的场景复制一份搬到台前。

如何使用HTML5的Template标签

使用template标签其实不复杂，核心就是两步：定义和激活。

首先，在HTML里定义你的模板结构。这就像是画好了图纸：

立即学习“前端免费学习笔记（深入）”；

<template id="productCardTemplate">
  <div class="product-card">
    <img src="" alt="Product Image" class="product-image">
    <h3 class="product-name"></h3>
    <p class="product-price"></p>
    <button class="add-to-cart">加入购物车</button>
  </div>
</template>

<div id="products-container">
  <!-- 动态生成的商品卡片会放在这里 -->
</div>

登录后复制

接着，用JavaScript去“激活”它，也就是把这个图纸变成真实的“商品卡片”。这里需要注意，你需要获取到模板的content属性，这个属性返回的是一个DocumentFragment，然后你需要克隆这个片段，因为DocumentFragment本身是不能直接多次插入的，每次插入都会被移动。克隆后，你就可以修改克隆体里的内容，再把它添加到页面的某个地方。

// 假设我们有一些商品数据
const products = [
  { id: 1, name: '智能手机', price: '¥2999', imageUrl: 'images/phone.jpg' },
  { id: 2, name: '无线耳机', price: '¥899', imageUrl: 'images/headphone.jpg' },
  { id: 3, name: '智能手表', price: '¥1299', imageUrl: 'images/watch.jpg' }
];

const template = document.getElementById('productCardTemplate');
const container = document.getElementById('products-container');

products.forEach(product => {
  // 克隆模板内容，true 表示深度克隆，包括所有子节点
  const clone = template.content.cloneNode(true);

  // 在克隆的节点中找到对应的元素并填充数据
  clone.querySelector('.product-image').src = product.imageUrl;
  clone.querySelector('.product-image').alt = product.name;
  clone.querySelector('.product-name').textContent = product.name;
  clone.querySelector('.product-price').textContent = product.price;

  // 将填充好数据的克隆节点添加到页面中
  container.appendChild(clone);
});

登录后复制

通过这种方式，你就能很优雅地实现动态模板的渲染了。

为什么我们需要Template标签？它解决了哪些痛点？

这问题问得好，因为在template标签出现之前，我们不是没有动态生成HTML的办法，但那些办法多多少少都有些让人头疼的地方。

以前，我们可能会用字符串拼接HTML，然后通过innerHTML塞到DOM里。这种方式效率低，因为每次拼接都可能导致浏览器重新解析整个字符串，而且如果字符串里包含用户输入，那XSS攻击的风险就非常高，安全性是个大问题。你得小心翼翼地做各种转义，但总有百密一疏的时候。

另一种方法是，在页面上藏一个display: none;的div，里面放着你要用的模板结构，然后通过JavaScript去克隆这个隐藏的div。这种方式比字符串拼接好一点，至少结构是预先解析好的，但它有个缺点，就是那个隐藏的div及其内部的资源（比如图片）还是会被浏览器加载和解析，只是不显示而已。如果你有很多这样的隐藏模板，或者模板里有大图，那页面的初始加载性能可能就会受影响。

template标签的出现，就是为了解决这些痛点。它的核心优势在于“惰性”和“声明性”。它内部的内容是“惰性”的，这意味着它不会被渲染，里面的图片不会加载，脚本不会执行，直到你明确地去操作它。这大大提升了页面初始加载的性能。同时，它是“声明性”的，你的HTML结构直接写在HTML里，清晰明了，比在JavaScript里用字符串拼接要直观得多，也更易于维护。你甚至可以把它看作是Web Components的基础构件之一，没有它，Web Components的声明式Shadow DOM就很难优雅地实现。所以，它不仅仅是一个HTML标签，它更像是一个现代前端开发范式转变的标志。

Logome

AI驱动的Logo生成工具

133

查看详情

如何结合JavaScript实现动态数据绑定和渲染？

要说template标签如何实现动态数据绑定和渲染，其实它本身并没有“数据绑定”的能力，它只是一个HTML容器。真正的“动态”和“数据绑定”都是通过JavaScript来完成的。

最常见的做法，就像上面示例里展示的，就是结合数据数组进行循环渲染。当你有一组数据（比如从API获取的商品列表、评论、用户动态等等），你可以遍历这个数组，对数组中的每一个数据项，都执行一次“克隆模板 -> 填充数据 -> 插入DOM”的操作。

// 假设我们从后端获取了这样的数据
const commentsData = [
  { user: 'Alice', time: '2023-10-26 10:00', text: '这篇文章写得真棒！' },
  { user: 'Bob', time: '2023-10-26 10:15', text: '学到了很多新知识，感谢分享。' },
  { user: 'Charlie', time: '2023-10-26 10:30', text: '希望有更多关于前端性能优化的文章。' }
];

const commentTemplate = document.createElement('template'); // 也可以动态创建模板
commentTemplate.innerHTML = `
  <div class="comment-item">
    <p class="comment-meta">
      <span class="comment-user"></span> 于 
      <span class="comment-time"></span> 评论：
    </p>
    <p class="comment-text"></p>
  </div>
`;

const commentsContainer = document.getElementById('comments-list'); // 假设页面上有这个容器

commentsData.forEach(comment => {
  const commentNode = commentTemplate.content.cloneNode(true);

  // 填充数据
  commentNode.querySelector('.comment-user').textContent = comment.user;
  commentNode.querySelector('.comment-time').textContent = comment.time;
  commentNode.querySelector('.comment-text').textContent = comment.text;

  commentsContainer.appendChild(commentNode);
});

登录后复制

这里并没有所谓的“双向绑定”或“响应式”更新，那都是Vue、React这类框架做的事情。template标签提供的是一个基础且高效的“单向”渲染机制：你用数据来填充模板，然后把结果显示出来。如果你需要更新某个已渲染的项，你通常需要找到那个DOM元素，然后直接修改它的内容，或者更粗暴一点，清空容器，用新数据重新渲染一遍。

它最实用的地方在于，当你需要渲染大量结构相似但内容不同的UI组件时，比如一个电商网站的商品列表、一个社交应用的信息流，或者一个管理后台的数据表格行。你可以只定义一次结构，然后用数据去驱动无限的实例。这种模式非常高效，也保持了代码的整洁。

Template标签在实际项目中有哪些高级应用场景和注意事项？

当我们在实际项目里深入使用template标签时，会发现它远不止是简单的列表渲染那么简单，它还是构建更复杂、更模块化Web应用的基础。

一个非常重要的应用场景就是Web Components。template标签是自定义元素（Custom Elements）和Shadow DOM的绝佳搭档。当你定义一个自定义元素时，你可以把这个组件的HTML结构放在一个<template>里，然后在自定义元素的connectedCallback生命周期里，获取这个模板的内容，克隆它，然后把它挂载到自定义元素的Shadow DOM上。这样，你的组件内部样式和结构就能被完全封装起来，不会泄露到全局，也不会受到外部CSS的影响，实现了真正的组件化。这是一种非常强大的隔离机制，让组件的复用和维护变得异常简单。

<template id="my-button-template">
  <style>
    /* 这些样式只作用于Shadow DOM内部 */
    button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
  </style>
  <button><slot></slot></button>
</template>

<script>
  class MyButton extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('my-button-template');
      const shadowRoot = this.attachShadow({ mode: 'open' }); // 创建Shadow DOM
      shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
  customElements.define('my-custom-button', MyButton);
</script>

<!-- 使用自定义按钮 -->
<my-custom-button>点击我</my-custom-button>

登录后复制

此外，在前端路由的场景下，template也可以派上用场。虽然现代路由库通常有自己的渲染机制，但如果你在构建一个轻量级的单页应用，并且希望在不同路由之间切换时，能够快速地复用或渲染某个UI片段，template能提供一个干净的解决方案。你可以把不同路由对应的视图结构放在不同的template里，然后根据URL的变化，动态地加载并显示对应的模板内容。

关于注意事项，有几点是需要留意的：

惰性不等于无感知：虽然template内容不会立即渲染，但它里面的HTML结构仍然会被解析。所以，如果你在template里写了不合法的HTML，浏览器控制台还是会报错的。
样式和脚本的作用域：template内部的<style>标签定义的样式默认是全局的，会影响到整个文档，除非这个template的内容被挂载到了Shadow DOM上。同样，<script>标签在template内部是不会执行的，即使你克隆并插入了它，脚本也不会自动运行。你需要手动获取脚本元素，然后创建并替换一个新的<script>标签，或者使用eval()（不推荐），才能执行其中的代码。通常，我们是在JavaScript中处理动态行为，而不是把脚本直接写在模板里。
性能考量：虽然template本身性能很好，但如果你要渲染成千上万个列表项，单纯地循环克隆和插入DOM仍然可能导致性能问题。在这种极端情况下，你可能需要考虑更高级的虚拟列表（Virtual Scrolling）或增量渲染技术，这些技术会结合template，但更重要的是管理DOM的创建和销毁，只渲染用户可见的部分。
无内置数据绑定：再次强调，template本身没有Vue或React那样的“响应式”数据绑定能力。它只是提供了一个静态的HTML蓝图。所有的数据填充和更新逻辑都需要你用原生JavaScript来编写。这既是它的简洁之处，也是它在复杂应用中需要额外工作的地方。