欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Web Components 系列（五）—— 关于 Templates

程序员文章站 2021-12-24 12:05:03
...

Web Components 系列（五）—— 关于 Templates

Web Components 系列（五）—— 关于 Templates前言

在之前介绍创建 Custom Elements 的代码中，有一个地方是比较繁琐的：Shadow DOM 中的每个子元素都是通过 document.createElement 方法创建的。就像下面这样的：

Web Components 系列（五）—— 关于 Templates

那到底有没有方法能简化这一步操作呢？答案是有的，就是我们今天要介绍的主角 —— Template。

Web Components 系列（五）—— 关于 TemplatesTemplates 的概念

引用 MDN 上的原话是：

HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用 JavaScript 实例化。

将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

通过这个概念解释，我们可以知道关于 Templates 的以下几点：

  • 它是在 HTML 页面中使用的一组元素标签，即 <template></template>；

  • 它在 HTML 页面解析的过程中会被处理，但不会呈现在页面上；

  • 它可以被 JavaScript  获取到。

Templates 是较早之前出现的，比 Web Components 更早。

Web Components 系列（五）—— 关于 TemplatesTemplates 的属性

Templates 除了全局属性（也就是所有 HTML 元素所共有的属性）外，只有一个私有属性 ：content，这个属性是只读的，返回 Templates 内部的文档片段对象及其 DOM 结构。

在控制台操控一下template，结果如下：

Web Components 系列（五）—— 关于 Templates

我们可以将 templateEle.content 当做一个正常的 document 对象来使用。

Web Components 系列（五）—— 关于 Templates简单使用 Templates

Web Components 系列（五）—— 关于 Templates仅 HTML + Templates

<body>    <h1>使用 Templates</h1>    <template>        <div>            这是 template 标签内的子节点内容        </div>    </template></body>

页面显示效果如下：

Web Components 系列（五）—— 关于 Templates

符合以上两点：被解析、不渲染。

Web Components 系列（五）—— 关于 Templates使用 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);

最终效果如下：

Web Components 系列（五）—— 关于 Templates

但是这样操作的话，就存在一个缺陷，由于将 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);

Web Components 系列（五）—— 关于 TemplatesTemplates 的兼容性

Web Components 系列（五）—— 关于 Templates

Web Components 系列（五）—— 关于 Templates结束语

Templates 可以将一些页面内容事先封装并且保存在 HTML 页面上，且不进行渲染，随后可以使用 JS 来操作 Templates。

以上就是 Templates 的有关知识点。

~

~ 本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

上一篇： php怎么获取对象的所有方法名

下一篇： php跟css的区别是什么

推荐阅读