Web Components 系列（五）—— 關於 Templates
前言
在之前介紹建立 Custom Elements 的程式碼中，有一個地方是比較繁瑣的：Shadow DOM 中的每個子元素都是通過 document.createElement 方法建立的。就像下面這樣的：
那到底有沒有方法能簡化這一步操作呢？答案是有的，就是我們今天要介紹的主角 —— Template。
Templates 的概念
引用 MDN 上的原話是：
HTML內容模板（
<template>）元素是一種用於儲存客戶端內容機制，該內容在載入頁面時不會呈現，但隨後可以(原文為 may be)在執行時使用 JavaScript 例項化。將模板視為一個可儲存在文件中以便後續使用的內容片段。雖然解析器在載入頁面時確實會處理
<template>元素的內容，但這樣做只是為了確保這些內容有效；但元素內容不會被渲染。
通過這個概念解釋，我們可以知道關於 Templates 的以下幾點：
- 它是在 HTML 頁面中使用的一組元素標籤，即
<template></template>； - 它在 HTML 頁面解析的過程中會被處理，但不會呈現在頁面上；
- 它可以被 JavaScript 獲取到。
Templates 是較早之前出現的，比 Web Components 更早。
Templates 的屬性
Templates 除了全域性屬性（也就是所有 HTML 元素所共有的屬性）外，只有一個私有屬性 ：content，這個屬性是隻讀的，返回 Templates 內部的文件片段物件及其 DOM 結構。
在控制檯操控一下template，結果如下：
我們可以將 templateEle.content 當做一個正常的 document 物件來使用。
簡單使用 Templates
僅 HTML + Templates
<body>
<h1>使用 Templates</h1>
<template>
<div>
這是 template 標籤內的子節點內容
</div>
</template>
</body>
頁面顯示效果如下：
符合以上兩點：被解析、不渲染。
使用 JS
如果想要將 Templates 中的節點內容載入到當前頁面顯示出來，我們可以使用一下 JS 程式碼實現：
// 獲取 template 元素
const templateEle = document.querySelector("template");
// 獲取 template 元素包含的文件片段
const content = templateEle.content;
// content 可以當做正常的 document 來使用
const node = content.querySelector("div");
// 追加節點到當前文件
document.body.appendChild(node);
最終效果如下：
但是這樣操作的話，就存在一個缺陷，由於將 Templates 程式碼片段內部的 div 追加到了當前文件結構，所以 Templates 內部的 div 節點消失。
為了避免修改內容模板內部的 DOM 結構，我們可以先克隆模板內部的元素節點，再將克隆的節點追到到當前文件：
// 獲取 template 元素
const templateEle = document.querySelector("template");
// 獲取 template 元素包含的文件片段
const content = templateEle.content;
// content 可以當做正常的 document 來使用
const node = content.querySelector("div");
// 匯入 node 到 當前文件
// 必須要有這一步
const cloneNode = document.importNode(node, true);
// 也可以使用 cloneNode
// const cloneNode = node.cloneNode(true);
// 追加節點到當前文件
document.body.appendChild(cloneNode);
Templates 的相容性
結束語
Templates 可以將一些頁面內容事先封裝並且儲存在 HTML 頁面上，且不進行渲染，隨後可以使用 JS 來操作 Templates。
以上就是 Templates 的有關知識點。
- ~
- 本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！