打造原生JS组件系列（二）：基于HTML的模板封装步骤详解
最编程
2024-02-20 10:16:32
...
「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」。
写在前面
- 前面一篇文章，我们提到了 web compontens 是一套原生 js 就已经支持组件封装的技术，它由三个主要技术组成：自定义元素，HTML 模板，影子 DOM
- 我们在前面也已经介绍了自定义元素的使用，可能大家还没体会到它的好处
- 接下来我们会了解 HTML 模板的使用，这两者结合起来也会有神奇的效果
HTML Template
- 顾名思义，HTML 模板 就是一个
template标签 - 我们可以在 template 内部定义一段特定的标签结构，将其作为模板，应用到其他合适的地方
- template 在被浏览器解析后不会被渲染在页面上，也就是不会增加额外的标签节点，vue 中的 template 就是这样做的
- 话不多说，我们先写一段写 demo 体验一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<template>
<h2>template demo</h2>
</template>
</body>
</html>
- 正常情况下，大家的页面运行后，是这样的：
- 奇怪的事情发生了，为啥页面显示与我们的预期不一致呢？
- 其实上面也提到了，是我们的使用方式不对
- 查看 MDN 介绍，template 本身不会被渲染到页面上，所以需要我们先将 template 中的 content 取出来，然后放到页面上才行
- 修正后的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<template class="temp">
<h2>template demo</h2>
</template>
</body>
<script>
// const templateDom = document.createElement("template");
// templateDom.innerHTML = `
// <div>
// <h2>template demo</h2>
// </div>
// `;
const templateDom = document.querySelector(".temp");
console.log(templateDom.content);
document.body.append(templateDom.content);
</script>
</html>
- 效果如下
- 方法一
- 直接在页面定义 template 标签及其内部结构
- 使用 querySelect api 获取到 template dom 元素
- 取出 template 的 content，这个 content 就是我们想要显示的结构内容
- 最后将 content 添加到页面上
- 方法二
- 通过 createElement api 创建一个 template 元素
- 然后通过设置其 innerHTML 属性，添加我们特定的想要显示的内容
- 然后依然通过获取 template 的 content
- 最后将 content 添加到 页面上
小结
- 上面的用法看似很鸡肋，都看不出什么厉害的地方，其实还有一个需要与 template 搭配使用效果更佳的 slot 标签
- 提到 slot，使用过 vue 的小伙伴可能比较熟悉，就是：插槽
- 强大的原生 JavaScript 早就实现了
插槽了，甚至是具名插槽 - 下面一篇文章我们将来介绍 template 与 slot 的组合使用
最后
- 今天的分享就到这里，欢迎大家在评论区留言讨论
- 如果觉得文章写的还不错的话，希望大家不要吝惜点赞，大家的鼓励是我分享的最大动力 ????