前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Web Components 系列(五)—— 关于 Templates

Web Components 系列(五)—— 关于 Templates

原创
作者头像
编程三昧
发布2022-02-11 18:18:19
4420
发布2022-02-11 18:18:19
举报
文章被收录于专栏:编程三昧编程三昧
Templates.001
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
image-20220210215858943

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

简单使用 Templates

仅 HTML + Templates

代码语言:html
复制
<body>
    <h1>使用 Templates</h1>
    <template>
        <div>
            这是 template 标签内的子节点内容
        </div>
    </template>
</body>

页面显示效果如下:

image-20220210215445483
image-20220210215445483

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

使用 JS

如果想要将 Templates 中的节点内容加载到当前页面显示出来,我们可以使用一下 JS 代码实现:

代码语言:javascript
复制
// 获取 template 元素
const templateEle = document.querySelector("template");
// 获取 template 元素包含的文档片段
const content = templateEle.content;
// content 可以当做正常的 document 来使用
const node = content.querySelector("div");
// 追加节点到当前文档
document.body.appendChild(node);

最终效果如下:

image-20220210223440492
image-20220210223440492

但是这样操作的话,就存在一个缺陷,由于将 Templates 代码片段内部的 div 追加到了当前文档结构,所以 Templates 内部的 div 节点消失。

为了避免修改内容模板内部的 DOM 结构,我们可以先克隆模板内部的元素节点,再将克隆的节点追到到当前文档:

代码语言:javascript
复制
// 获取 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
image-20220210224617535

结束语

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

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

~ 本文完,感谢阅读!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • Templates 的概念
  • Templates 的属性
  • 简单使用 Templates
    • 仅 HTML + Templates
      • 使用 JS
      • Templates 的兼容性
      • 结束语
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
      http://www.vxiaotou.com