在 Web Components 中创建可复用 HTML 组件的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 Web 技术的不断发展，越来越多的开发者开始关注 Web Components 技术。Web Components（Web 组件）是一套浏览器 API，可以用来创建可复用的自定义 HTML 元素，可以看作是一种更高级别的前端组件化技术。本文主要介绍如何在 Web Components 中创建可复用 HTML 组件的最佳实践。

环境准备

在开始之前，请确保你已经了解了以下技术：

HTML/CSS/JavaScript
浏览器相关 API（如：DOM API）
Web Components 相关概念和 API

如果你还没有了解这些技术，可以先去学习相关知识。

Web Components 组件的基本结构

Web Components 组件主要由以下三个 API 构成：

Custom Elements：自定义元素 API，用于定义自定义 HTML 元素；
Shadow DOM：影子 DOM API，用于封装组件内部 DOM 结构；
HTML Templates：HTML 模板 API，用于定义组件内部 HTML 模板。

下面是一个简单的 Web Components 组件的结构示例：

<template id="my-component-template">
  <style>
    /* 组件内部样式 */
  </style>

  <div class="my-component">
    <!-- 组件内部结构 -->
  </div>
</template>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();

      this.attachShadow({ mode: "open" });

      const template = document.querySelector("#my-component-template");
      const content = template.content.cloneNode(true);

      this.shadowRoot.appendChild(content);
    }
  }

  customElements.define("my-component", MyComponent);
</script>

<my-component></my-component>

首先，我们在 HTML 的 <template> 标签中定义了组件的内部结构和样式。

然后，我们在 JavaScript 中定义了一个名为 MyComponent 的类，继承自 HTMLElement。在类的构造函数中，我们首先调用了 super() 方法，然后调用了 this.attachShadow({ mode: "open" }) 方法来创建影子 DOM。

接着，我们使用 document.querySelector("#my-component-template") 方法获取了组件的 HTML 模板，并使用 content.cloneNode(true) 方法克隆了模板的内容。最后，将克隆后的内容添加到影子 DOM 中。

最后，我们使用 customElements.define("my-component", MyComponent) 方法将组件注册为自定义元素。在 HTML 中，我们可以简单地使用 <my-component></my-component> 标签来使用这个组件。

Web Components 组件的最佳实践

1. 合理使用影子 DOM

影子 DOM 是 Web Components 中定义自定义元素的重要特性之一，对组件的封装、样式隔离等方面都有很大的帮助。但是，在使用影子 DOM 时，需要注意以下几点：

使用 this.attachShadow({ mode: "open" }) 方法创建影子 DOM 时，需要指定 mode 为 "open"，这样才能使组件的使用者能够访问到组件内部的属性和方法；
在组件内部的样式表中，应该使用 :host 伪类来引用自定义元素，例如：.my-component { color: red; } 应该写成 :host(.my-component) { color: red; }，这样可以避免组件内部样式对外部产生不必要的影响；
在使用多个自定义元素时，应该根据自定义元素的子组件关系来决定是否使用影子 DOM。通常情况下，只有最外层的自定义元素需要使用影子 DOM，内部的子组件不需要。

2. 使用 HTML Templates 定义组件的内部结构

使用 HTML Templates 时，应该注意以下几点：

在 <template> 标签中的代码不会在页面中显示；
在 JavaScript 中使用 document.querySelector() 方法获取 <template> 标签时，需要将 document 对象作为方法的参数传入；
在使用 HTML Templates 时，应该注意 HTML 模板的内容是否包含了需要动态更新的部分，如果需要动态更新，可以使用 JavaScript 动态插入元素。

3. 使用自定义事件实现组件间的通信

组件间的通信是 Web Components 中一个很重要的问题。通过自定义事件，不同组件之间可以进行简单直接的通信。例如：

// 在组件内部触发事件
this.dispatchEvent(new CustomEvent("my-event", { detail: { foo: "bar" } }));

// 在组件外部监听事件
myComponent.addEventListener("my-event", (event) => {
  console.log(event.detail.foo); // 输出 "bar"
});

在上述代码中，我们在组件内部使用 this.dispatchEvent() 方法触发了一个自定义事件，事件名为 "my-event"，事件数据为 { foo: "bar" }。

在组件外部，我们使用 myComponent.addEventListener() 方法监听了 "my-event" 事件，并在事件处理函数中输出了事件的数据 { foo: "bar" }。

通过自定义事件的方式，不同的组件之间就可以进行数据传递和交互了。

示例代码

下面是一个使用 Web Components 创建可复用的分页组件的示例代码：

<template id="my-pager-template">
  <style>
    :host {
      display: block;
      font-size: 16px;
      text-align: center;
    }

    button {
      margin: 0 10px;
      cursor: pointer;
    }

    button[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }
  </style>

  <div class="pager">
    <button id="prev" disabled><</button>
    <span id="pages"></span>
    <button id="next" disabled>></button>
  </div>
</template>

<script>
  class MyPager extends HTMLElement {
    constructor() {
      super();

      this.attachShadow({ mode: "open" });

      // 获取组件模板并克隆
      const template = document.querySelector("#my-pager-template");
      const content = template.content.cloneNode(true);

      // 查找模板中的元素并保存到组件实例中
      this.prevBtn = content.querySelector("#prev");
      this.pagesEl = content.querySelector("#pages");
      this.nextBtn = content.querySelector("#next");

      // 将克隆后的模板添加到影子 DOM 中
      this.shadowRoot.appendChild(content);

      // 给按钮添加点击事件监听
      this.prevBtn.addEventListener("click", this.handlePrevClick.bind(this));
      this.nextBtn.addEventListener("click", this.handleNextClick.bind(this));
    }

    static get observedAttributes() {
      return ["current-page", "total-pages"];
    }

    attributeChangedCallback(attrName, oldVal, newVal) {
      this.update();
    }

    update() {
      const currentPage = parseInt(this.getAttribute("current-page")) || 1;
      const totalPages = parseInt(this.getAttribute("total-pages")) || 1;

      // 更新分页按钮状态
      this.prevBtn.disabled = currentPage === 1;
      this.nextBtn.disabled = currentPage === totalPages;

      // 更新分页页码
      const pages = [];
      for (let i = 1; i <= totalPages; i++) {
        pages.push(
          `<button data-page="${i}" ${
            i === currentPage ? "disabled" : ""
          }>${i}</button>`
        );
      }
      this.pagesEl.innerHTML = pages.join("");

      // 给页码按钮添加事件监听
      this.pagesEl.childNodes.forEach((btn) => {
        btn.addEventListener("click", this.handlePageClick.bind(this));
      });
    }

    handlePrevClick() {
      const currentPage = parseInt(this.getAttribute("current-page")) || 1;
      const newPage = currentPage - 1;

      // 触发自定义事件
      this.dispatchEvent(
        new CustomEvent("page-changed", { detail: { page: newPage } })
      );
    }

    handleNextClick() {
      const currentPage = parseInt(this.getAttribute("current-page")) || 1;
      const totalPages = parseInt(this.getAttribute("total-pages")) || 1;
      const newPage = currentPage + 1;

      // 触发自定义事件
      this.dispatchEvent(
        new CustomEvent("page-changed", { detail: { page: newPage } })
      );
    }

    handlePageClick(event) {
      const newPage = parseInt(event.target.getAttribute("data-page"));

      // 触发自定义事件
      this.dispatchEvent(
        new CustomEvent("page-changed", { detail: { page: newPage } })
      );
    }
  }

  customElements.define("my-pager", MyPager);
</script>

<my-pager current-page="1" total-pages="10"></my-pager>

在上述代码中，我们创建了一个名为 MyPager 的组件，用于实现分页的功能。组件包含了三个按钮和一个显示页码的 <span> 元素，共五个子元素。

在组件的构造函数中，我们在影子 DOM 中创建了组件内部的结构，并将其中的三个按钮和一个页码显示元素分别保存到组件实例中。

随后，我们给三个按钮和页码显示元素分别添加了事件监听器，并在事件处理函数中触发了自定义事件 "page-changed"。

在组件外部，我们可以简单地使用 <my-pager> 标签来创建分页组件。例如：

<my-pager current-page="1" total-pages="10"></my-pager>

<script>
  const pager = document.querySelector("my-pager");

  pager.addEventListener("page-changed", (event) => {
    console.log(event.detail.page); // 输出当前页码
    // TODO: 发送请求获取数据并更新页面
  });
</script>

在设置了组件的 current-page 和 total-pages 属性后，我们就可以在页面中看到一个分页组件了。

在组件的使用者监听了 "page-changed" 事件后，就可以根据事件的数据更新当前页面的状态了。

总结

Web Components 是一种更高级别的前端组件化技术。在 Web Components 中创建可复用的 HTML 组件是开发者们在日常工作中非常重要的一项技能。通过本文的介绍，我们可以更好地理解 Web Components 组件的基本结构和使用方式，并了解了在 Web Components 中创建可复用 HTML 组件的最佳实践。希望能对大家有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a488c3add4f0e0ffcd5b0c

在 Web Components 中创建可复用 HTML 组件的最佳实践

前言