使用 Vanilla JavaScript 创建 Web 组件

allway2

已于 2022-06-03 21:52:17 修改

阅读量623

点赞数

文章标签： javascript 前端 ui

于 2022-06-03 21:50:54 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/125116319

版权

Web组件自定义元素 ShadowDOM JavaScript 代码重用

关键词由CSDN通过智能技术生成

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

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

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

先决条件

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

什么是网页组件

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或在没有任何框架或库的帮助下创建 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>

    <!-- scripts -->
    <script src="employee-card.js"></script>

</body>
</html>

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

const template = document.createElement('template');
template.innerHTML = `
<style>
<style>
  .employee-card {
    font-family: sans-serif;
    background: #f4f6f7;
    width: 150px;
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 10px;
  }
  .photo {
    width: 150px;
  }

</style>
<div class="employee-card">
  <img class="photo" />
  <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>`;

class EmployeeCard extends HTMLElement {
    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');
    }

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

    render() {
        this.h3;
    }
}
window.customElements.define('employee-card', EmployeeCard);

上面的代码展示了如何创建员工卡 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使用浏览器打开该文件。输出如下图所示：

结论

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

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

快乐编码！

参考

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫