使用 Vanilla JavaScript 创建 Web 组件

柔光的暖阳◎ 2023-09-28 09:08 15阅读 0赞

Web 应用程序开发是一个非常拥挤的技术领域。有不同类型的框架、库和工具。在开发 Web 应用程序时，主要目标是提供带有封装组件的高质量用户界面 (UI)。

因此，当您使用 React、Vue、Angular 或任何其他前端框架等框架时，您会将 UI 中的所有内容分解为组件。然而，我们甚至可以在不使用框架或库的情况下做类似的事情，那就是纯 JavaScript（Vanilla JavaScript）。

本文将讨论什么是 Web 组件以及它们为何有用。最后，它将带您了解如何从头开始创建 Web 组件。

#### 先决条件 ####

Web 组件是一个很棒的交互式指南。因此，需要对 HTML、CSS 和 JavaScript 有很好的理解。

#### 什么是网页组件 ####

[Web 组件][Web]是为网页和应用程序添加功能和特性的规范集。例如，它们允许 HTML 元素的可重用性和封装。

Web 组件使您能够构建可在不同的 Web 平台、应用程序或页面上重用的功能。

Web 组件由三种领先的技术组成，用于创建可以在您喜欢时重复使用的自定义元素。他们包括：

*  **自定义元素：**这些 API 允许您定义和创建自定义元素以提供所需的 UI。
 *  **Shadow DOM：**启用封装的 API。特定元素与主 DOM 分离，从而防止文档冲突等问题。
 *  **HTML 模板：**允许您声明不显示在页面上的标记模板片段的元素。这些元素用作模板以在多个地方重用。

包括 chrome、firefox 和 edge 在内的 Web 浏览器提供对 Web 组件的支持。这意味着完全支持技术，即（自定义元素、Shadow DOM 和 HTML 模板）。

#### 为什么要使用 Web 组件 ####

代码可重用性已被证明是有用的，在 Web 组件启动之前，实现跨不同框架和项目的可重用用户界面并不容易。

Web Components 允许 Web 开发人员使用内置的 Web API 构建可重用的 UI。这意味着我们可以为一个项目创建一个 Web 组件并将其带到另一个项目，而无需额外编码。

#### 使用 vanilla JavaScript 创建 Web 组件 ####

[本教程使用Vanilla JavaScript][Vanilla JavaScript]或在没有任何框架或库的帮助下创建 Web 组件。

我们将创建一个员工卡 Web 组件。它将包含用户图像、姓名、ID、职位、电话和电子邮件。

我们将从创建`index.html`和`employee-card.js`文件开始。然后复制并粘贴此代码：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Web Components</title>
            <style>
                h2{
                    color: blue;
                }
            </style>
    
        </head>
        <body>
            <h2>Employee Card Example</h2>
        <employee-card name="Tom Cat" avatar=image.png></employee-card>
        <div slot="id"><b>ID:</b> 238</div>
        <div slot="job title"><b>Job Title:</b> Mouse Administrator</div>
        <div slot="email"><b>Email:</b> tom@cat.com</div>
        <div slot="phone"><b>Phone:</b> 123-456-789</div>
    
        
        <script src="employee-card.js"></script>
    
    </body>
    </html>

要创建员工卡 Web 组件，请创建一个`.js`文件。让我们将其命名为`employee-card.js`复制并粘贴此代码：

上面的代码展示了如何创建员工卡 Web 组件，让我们一步一步了解每个部分。

创建模板

const template = document.createElement('template');

第一步是创建一个 HTML 内容模板元素`<template>`。该`<template>`元素包含在运行页面后不会立即呈现的 HTML。

加载包含内容的模板

template.innerHTML = ` <style> <style> .employee-card { font-family: sans-serif; background: #f4f6f7; width: 250px; display: grid; grid-template-columns: 1fr; margin-bottom: 10px; } 
    </style> <div class="employee-card"> <img/> <div> <h3></h3> <div class="details"> <p><slot name="id"/></p> <p><slot name="job title"/></p> <p><slot name="email"/></p> <p><slot name="phone"/></p> </div> </div> </div> `;

模板元素存储在`template`变量中并与`inner HTML`属性链接。该`innerHTML`属性设置元素上的 HTML 内容。因此，我们可以添加我们想要在屏幕上显示的 HTML，例如`<div>`、`<p>`等更多 HTML 元素。

创建 HTML 元素

class EmployeeCard extends HTMLElement{}

我们创建一个`EmployeeCard`扩展 HTMLElement 类的类。HTMLElement 代表所有的 HTML 元素。

封装 HTML 元素

constructor(){
         super();
         this.attachShadow({ mode: 'open'});
         this.shadowRoot.appendChild(template.content.cloneNode(true));
         this.shadowRoot.querySelector('h3').innerText = this.getAttribute('name');
         this.shadowRoot.querySelector('img').src = this.getAttribute('avatar');   
     }

我们有一个空班。接下来，我们创建一个构造函数并调用基类`super()`方法来继承一个类的特性。

一个影子 DOM 被创建，即，`this.attachShadow({ mode: 'open'})`成为我们 Web 组件的封装部分。它使我们组件的行为独立于 Html 的其余部分。

您可以关闭或打开 shadow DOM 模式。这意味着您是否可以通过组件中的 JavaScript 访问 shadow DOM。

Web Components 使我们能够使用 shadow DOM，这是浏览器中内置的一项功能。因此，如果子元素被添加到组件的影子 DOM 中，它们将被包裹在影子根中。

this.shadowRoot.querySelector('h3').innerText = this.getAttribute('name');
    this.shadowRoot.querySelector('img').src = this.getAttribute('avatar')

然后，Web 组件 API 获取要在页面上显示的属性名称和头像。

生命周期方法

connectedCallback(){
       this.h3 = this.getAttribute("name")
       this.render();
     }
    
     render(){
       this.h3;
     }

自定义元素内部定义了四种回调方法。它们使代码能够在元素中发生事件时运行。

让我们看一下一些回调方法：

*  `connectedCallback:`当组件插入 HTML 文档的 DOM 时调用。
 *  `disconnectedCallback:`当元素从文档的 DOM 中移除时调用。
 *  `adoptedCallback:`当组件移动到另一个 HTML 文档时调用。
 *  `attributeChangedCallback:`是组件的属性发生变化的时候。

创建自定义元素

window.customElements.define('employee-card', EmployeeCard);

我们的 Web 组件已经创建，但还剩下一步：创建自定义元素。`EmployeeCard`我们在创建自定义元素时使用 JavaScript 类。从而类继承了`HTML Element`.

最后，为了测试我们是否创建了员工卡 Web 组件，请`index.html`使用浏览器打开该文件。输出如下图所示：

![912a01d6be91496693c075394828c4cc.png][]

#### 结论 ####

通过本教程，您学习了如何使用 vanilla JavaScript 构建简单的 Web 组件。

希望您已经了解 Web 组件、它们为何有用以及如何构建它。此外，可以使用 react.js 和 vue.js 等框架来创建 Web 组件。因此，我鼓励您继续探索和尝试。

快乐编码！

#### 参考 ####

*  [Web Components | MDN][Web Components _ MDN]
 *  [webcomponents.org - Discuss & share web components][Web]

[Web]: https://www.webcomponents.org/introduction
[Vanilla JavaScript]: https://snipcart.com/blog/learn-vanilla-javascript-before-using-js-frameworks#:~:text=What%20is%20%22Vanilla%20JavaScript%22%3F&text=%22VanillaJS%20is%20a%20name%20to,need%20for%20additional%20JavaScript%20libraries.%22
[912a01d6be91496693c075394828c4cc.png]: https://img-blog.csdnimg.cn/912a01d6be91496693c075394828c4cc.png
[Web Components _ MDN]: https://developer.mozilla.org/en-US/docs/Web/Web_Components