Web Components 系列（五）—— 關於 Templates

程式設計三昧發表於2022-02-11
Web

Templates.001

前言

在之前介紹建立 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，結果如下：

image-20220210215858943

我們可以將 templateEle.content 當做一個正常的 document 物件來使用。

簡單使用 Templates

僅 HTML + Templates

<body>
    <h1>使用 Templates</h1>
    <template>
        <div>
            這是 template 標籤內的子節點內容
        </div>
    </template>
</body>

頁面顯示效果如下：

image-20220210215445483

符合以上兩點：被解析、不渲染。

使用 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);

最終效果如下：

image-20220210223440492

但是這樣操作的話，就存在一個缺陷，由於將 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 的相容性

image-20220210224617535

結束語

Templates 可以將一些頁面內容事先封裝並且儲存在 HTML 頁面上，且不進行渲染，隨後可以使用 JS 來操作 Templates。

以上就是 Templates 的有關知識點。

~

~ 本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章