Custom Elements 实现组件 API 的设计和开发思路-JavaScript中文网-JavaScript教程资源分享门户

在网页开发中，组件是一种非常常见的设计思想。通过组件化的设计，我们可以将网页分成各个独立的组件，每个组件负责特定的功能。这样不仅可以提高代码的复用性，还可以方便地管理和维护不同组件的状态。而 Custom Elements 就是一种实现组件化设计的技术。

Custom Elements 简介

Custom Elements 是 Web Components 规范的核心之一，允许开发者定义自己的 HTML 元素，这些自定义元素可以和原生 HTML 元素一样在 DOM 中使用。Custom Elements 提供了一些 API，可以让我们自定义元素的行为、样式以及方法，从而实现高度定制化的组件。

在 Custom Elements 中，开发者需要定义一个自定义元素，这个元素可以有自己的标签名、属性、状态以及方法。比如我们可以定义一个名为 x-counter 的元素，这个元素可以实现一个简单的计数器功能。我们可以通过以下方式定义这个元素：

// javascriptcn.com 代码示例
<template id="x-counter-template">
  <button id="decrement">-</button>
  <span id="counter">0</span>
  <button id="increment">+</button>
</template>

<script>
  class XCounter extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('x-counter-template').content.cloneNode(true);
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.appendChild(template);
      this.$counter = shadowRoot.getElementById('counter');
      shadowRoot.getElementById('increment').addEventListener('click', () => this.increment());
      shadowRoot.getElementById('decrement').addEventListener('click', () => this.decrement());
    }

    get count() {
      return parseInt(this.getAttribute('count')) || 0;
    }

    set count(value) {
      this.setAttribute('count', value);
      this.$counter.textContent = value;
    }

    increment() {
      this.count++;
    }

    decrement() {
      this.count--;
    }
  }

  customElements.define('x-counter', XCounter);
</script>

上面的代码中，我们首先定义了一个名为 x-counter 的自定义元素，并在元素内部使用了一个模板（template）来实现计数器的三个按钮。在 XCounter 类的构造器中，我们通过 attachShadow 方法创建了一个 Shadow DOM，并将模板内容添加到其中。我们还定义了两个方法 increment 和 decrement，以及一个属性 count，它们负责改变计数器的状态。

在定义完成后，我们通过 customElements.define 方法将 XCounter 类注册为 x-counter 元素。这样就可以将 x-counter 作为一个普通的 HTML 元素使用，如下所示：

<x-counter count="10"></x-counter>

这样就可以在页面中使用一个带有计数器功能的自定义元素。

Custom Elements API 设计

Custom Elements 提供了一些 API，可以让我们更加方便地定义和使用自定义元素。以下是 Custom Elements API 的一些常用方法和属性：

customElements.define(name, constructor)

用于定义一个新的自定义元素，其中 name 是元素的标签名，constructor 是元素的构造函数。

HTMLElement.connectedCallback()

当元素被插入到文档时会被调用，可以在这个方法中初始化元素的状态。

HTMLElement.disconnectedCallback()

当元素从文档中移除时会被调用，可以在这个方法中清理元素的状态。

HTMLElement.attributeChangedCallback(name, oldValue, newValue)

当元素的属性发生变化时会被调用，可以在这个方法中响应属性变化。

HTMLElement.observedAttributes()

返回一个数组，包含需要观察的元素属性名列表。

HTMLElement.shadowRoot

获取元素的 Shadow DOM，可以在其中添加模板和样式。

HTMLElement.setAttribute(name, value)

设置元素的属性值。

HTMLElement.getAttribute(name)

获取元素的属性值。

HTMLElement.removeAttribute(name)

移除元素的属性。

通过以上的 API，我们可以方便地定义和开发自定义元素，并在其中实现各种功能。

Custom Elements 开发实例

下面我们通过一个实例来演示如何使用 Custom Elements 开发一个带有表格过滤器功能的组件。

组件设计

我们需要设计一个表格过滤器组件，该组件包含搜索框、下拉框和表格三个部分，其中搜索框和下拉框用于过滤表格内容。组件的 HTML 结构和样式如下：

// javascriptcn.com 代码示例
<template id="x-table-filter-template">
  <div class="table-filter">
    <div class="filter-item">
      <label>关键字</label>
      <input type="text" id="keyword"/>
    </div>
    <div class="filter-item">
      <label>类型</label>
      <select id="type">
        <option value="">全部</option>
        <option value="1">类型 1</option>
        <option value="2">类型 2</option>
        <option value="3">类型 3</option>
      </select>
    </div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>类型</th>
          <th>时间</th>
        </tr>
      </thead>
      <tbody id="tbody"></tbody>
    </table>
  </div>
</template>

<style>
  .table-filter {
    border: 1px solid #ccc;
    padding: 10px;
  }

  .filter-item {
    display: inline-block;
    margin-right: 20px;
  }

  label {
    font-weight: 700;
    margin-right: 5px;
  }

  input[type="text"], select {
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: none;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    text-align: left;
    padding: 5px;
    border: 1px solid #ccc;
  }
</style>

组件实现

我们可以定义一个名为 x-table-filter 的自定义元素来实现上述的表格过滤器组件。在组件内部我们需要初始化搜索框和下拉框的初始值，并在对应的 change 事件中响应过滤操作。我们还需要通过类似于 API 表中的 connectedCallback 方法，初始化组件，其中包括获取表格数据，更新表格内容以及注册搜索框和下拉框的 change 事件。

// javascriptcn.com 代码示例
<script>
  class XTableFilter extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('x-table-filter-template').content.cloneNode(true);
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.appendChild(template);
      this.$keyword = shadowRoot.getElementById('keyword');
      this.$type = shadowRoot.getElementById('type');
      this.$tbody = shadowRoot.getElementById('tbody');
      this.$keyword.value = '';
      this.$type.value = '';
      this.$keyword.addEventListener('change', () => this.filterTable());
      this.$type.addEventListener('change', () => this.filterTable());
      this.loadTableData();
    }

    async loadTableData() {
      const response = await fetch('https://jsonplaceholder.typicode.com/comments');
      const data = await response.json();
      this.tableData = data;
      this.updateTable();
    }

    filterTable() {
      const keyword = this.$keyword.value.trim().toLowerCase();
      const type = this.$type.value;
      const filteredData = this.tableData.filter(item => {
        if (keyword && !item.name.includes(keyword)) {
          return false;
        }
        if (type && item.type !== type) {
          return false;
        }
        return true;
      });
      this.updateTable(filteredData);
    }

    updateTable(data = this.tableData) {
      const tbody = this.$tbody;
      tbody.innerHTML = '';
      const fragment = document.createDocumentFragment();
      for (const item of data) {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${item.name}</td>
          <td>${item.type}</td>
          <td>${item.time}</td>
        `;
        fragment.appendChild(tr);
      }
      tbody.appendChild(fragment);
    }
  }

  customElements.define('x-table-filter', XTableFilter);
</script>

在以上代码中，我们首先定义了一个名为 x-table-filter 的自定义元素，在其中实现了 loadTableData、filterTable 和 updateTable 三个方法，它们用于加载表格数据、过滤表格数据以及更新表格内容。在组件初始化完成后，我们调用了 loadTableData 方法，获取并显示表格内容。同时，我们为搜索框和下拉框注册了 change 事件，实现过滤操作。

总结

Custom Elements 是 Web Components 规范中一种实现组件化设计的技术，它允许开发者定义自己的 HTML 元素，并在其中实现各种功能。通过 Custom Elements，我们可以创建出高度定制化的组件，从而实现更好的代码复用性和可维护性。在组件开发过程中，我们需要考虑设计良好的 API 接口，以及清晰的组件结构和分工。

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