前言
自从 Web 组件成为 W3C 标准以来，前端开发者便能够使用这一技术构建可复用、可组合以及可扩展的 Web 应用程序，轻松地实现组件化开发的目标。在本文中，我们将向您展示如何利用 Web 组件技术打造一个简单的表情包组件库，为您提供一个深度而有趣的练习机会。
Web 组件入门
Web 组件是由三个主要规范组成的：
- Custom Elements - 允许开发者创建自定义元素，定义其行为和样式。
- Shadow DOM - 允许开发者将隐藏的 DOM 树附加到元素，提供更好的封装和保护。
- HTML Templates - 允许开发者定义可复用的模板，以避免在 JavaScript 中写大量的 HTML 代码。
在这里，我们不会深入讨论这些规范的细节，但是如果您对此感兴趣的话，可以查看阮一峰的 《ES6标准入门》 一书，其中有相关的深度讲解。
实现过程
创建自定义元素
首先，我们需要创建一个自定义元素来显示我们的表情包。我们可以通过继承基本 HTMLElement 类或实现其接口来创建自定义元素。这里我们使用了继承：
class Emoji extends HTMLElement {
constructor() {
super();
}
}添加模板
现在，我们需要添加一个模板，用于在 Custom Elements 中渲染我们的表情包。在本例中，我们创建一个简单的模板：
<template id="emoji-template">
<div class="emoji">
<img src="" alt="">
<span></span>
</div>
</template>向 Shadow DOM 添加模板内容
接下来，我们需要将模板的内容添加到 Shadow DOM 中。我们可以通过 this.attachShadow() 方法创建 Shadow DOM，并使用 importNode() 方法导入已经存在的模板内容：
connectedCallback() {
const shadowRoot = this.attachShadow({ mode: 'open' });
const template = document.querySelector('#emoji-template');
const instance = template.content.cloneNode(true);
shadowRoot.appendChild(instance);
}我们可以通过将 Emoji 元素附加到页面中来激活 connectedCallback() 方法：
<emoji></emoji>
添加 CSS 样式
现在，我们已经将模板内容添加到 Shadow DOM 中，但他们缺乏样式。我们可以使用 CSS 进行样式化。这里我们创建了一个简单的样式，为表情包添加了一些边框，以及使其垂直居中的样式：
-- -------------------- ---- ------- ------ - -------- ----- --------------- ------- ---------------- ------- ------------ ------- ------- ----- -------- ----- -------------- ---- ------- --- ----- ----- ------ ------ ------- ------ - ------ --- - ------ ----- ------- ----- -------- ----- -------------- ---- -------- ------ -
添加功能
现在，我们已经创建了一个非常简单的表情包组件。我们要添加的功能包括：
- 设置表情包的图像和标题。
- 点击表情包时，在控制台中打印出表情包的标题和图像 URL。
首先，我们需要定义一个表示表情包标题和图像的属性，然后向标记添加其对应的 HTML 属性：
-- -------------------- ---- -------
----- ----- ------- ----------- -
------------- -
--------
-
------ --- -------------------- -
------ --------- -------------
-
------------------------------ --------- --------- -
------ ------ -
---- --------
------------------------------------------------- - ---------
------
---- ------------
-------------------------------------------------------- ----------
------
-
-
-
------------------------------ -------<emoji title="smiling face" image-url="https://cdn.jsdelivr.net/npm/emoji-datasource-apple@3.0.0/img/apple/64/1f642.png"> </emoji>
现在，我们可以展示图像和标题，接下来我们需要添加具有打印标题和图像 URL 的 click 事件：
-- -------------------- ---- ------- ------------- - -------- ------------ - ------------------------ - ------------------- - -- --- ----------------------------------------------------------------- -------------- - ---------------------- - -------------------------------------------------------------------- -------------- - --------- - ------------------- ------------------------------ ---------- ------------------------------------ -
创建自定义元素集合
现在我们已经创建了一个单独的表情包组件，但这种方式可能不够灵活。如果想要显示 10 个表情，这样写 10 次 HTML 不是我们想要的，我们可以考虑创建一个集合来批量将表情包放到页面上。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
------------------------------------------ ------ --------------------------------------------------------------------------------------------
------------------------------------------ ------ --------------------------------------------------------------------------------------------
-- ---
-
------------------ --------- -
----- ----- - --------------------------------
--------------------------- -------
------------------------------- ----------
------ ------
-
-
----------------------------------------- -----------------<emoji-collection></emoji-collection>
完整示例代码
最终的 Emoji 和 EmojiCollection 类代码如下所示：
-- -------------------- ---- -------
----- ----- ------- ----------- -
------------- -
--------
------------ - ------------------------
-
------ --- -------------------- -
------ --------- -------------
-
------------------------------ --------- --------- -
------ ------ -
---- --------
------------------------------------------------- - ---------
------
---- ------------
-------------------------------------------------------- ----------
------
-
-
------------------- -
----- ---------- - ------------------- ----- ------ ---
----- -------- - ------------------------------------------
----- -------- - ---------------------------------
---------------------------------
----------------------------------------------------------------- --------------
-
---------------------- -
-------------------------------------------------------------------- --------------
-
--------- -
------------------- ------------------------------ ---------- ------------------------------------
-
-
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
------------------------------------------ ------ --------------------------------------------------------------------------------------------
------------------------------------------ ------ --------------------------------------------------------------------------------------------
-- ---
-
------------------ --------- -
----- ----- - --------------------------------
--------------------------- -------
------------------------------- ----------
------ ------
-
-
------------------------------ -------
----------------------------------------- -----------------总结
在本文中，我们使用 Web 组件技术创建了一个简单的表情包组件库，并向您展示了如何使用 Custom Elements 进行组件化编程。这种方法已被广泛使用，并成为现代 Web 开发的重要概念之一。希望这篇文章能为您带来一些启示，鼓励您深入学习 Web 组件及其相关技术，并在您的项目中合理应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664db68fd3423812e4d4475e