Custom Elements V1：构建高性能、可复用的 Web 组件生命周期 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Custom Elements V1：告别“意大利面条式”代码，拥抱积木式 Web 开发

想象一下，你正在搭建一个乐高城堡。如果每一块积木都形状各异，材质不一，甚至来自不同的乐高套装，那会是什么样的体验？你会花费大量时间来调整、适配，最终拼出来的城堡可能摇摇欲坠，充满了各种妥协的痕迹。

Web 开发也一样。如果没有标准化的组件化机制，我们很容易陷入“意大利面条式”代码的泥潭：代码冗余，维护困难，复用性差。幸运的是，Custom Elements V1 给了我们一把锋利的剪刀，可以优雅地将复杂的 Web 应用拆解成一个个独立的、可复用的积木，让 Web 开发变得更高效、更优雅。

什么是 Custom Elements V1？

简单来说，Custom Elements V1 允许你创建自己的 HTML 标签。没错，就是这么简单粗暴。你可以定义一个 <my-awesome-button>，一个 <data-grid>，甚至一个 <flying-unicorn>（如果你真的需要的话）。这些标签的行为和外观完全由你掌控，就像你创造了一门新的“HTML 方言”。

这听起来有点像魔术，但实际上，它背后是一套精心设计的 API 和生命周期钩子，让你可以完全控制自定义元素的创建、属性修改、连接到 DOM 树和从 DOM 树断开等过程。

为什么要用 Custom Elements V1？

你可能会问：“我已经用 React、Vue、Angular 这些框架了，为什么还要学习 Custom Elements V1 呢？” 这是一个很好的问题。Custom Elements V1 并非要取代这些框架，而是要成为它们的有力补充。

框架无关性： Custom Elements V1 是 Web 标准，这意味着你创建的组件可以在任何框架中使用，甚至可以在没有框架的项目中使用。想象一下，你用 Vue.js 创建了一个漂亮的日期选择器组件，现在你可以在 React 项目中直接使用它，而无需进行任何修改！这种跨框架的复用性简直是开发者的福音。
真正的封装： Custom Elements V1 配合 Shadow DOM 可以实现真正的样式和行为封装。你的组件就像一个独立的黑盒子，不会受到外部 CSS 和 JavaScript 的影响。这意味着你可以放心地编写组件，而不用担心样式冲突或命名空间污染的问题。
性能优势： 浏览器原生支持 Custom Elements V1，这意味着它可以充分利用浏览器的优化机制，从而获得更好的性能。相比于通过框架模拟组件化的方式，Custom Elements V1 在性能方面具有天然的优势。
未来趋势： Web Components 是 Web 开发的未来趋势。越来越多的框架和工具都在拥抱 Web Components 标准。学习 Custom Elements V1 可以让你站在技术的最前沿，更好地适应未来的 Web 开发。

Custom Elements V1 的生命周期：像培育植物一样呵护你的组件

Custom Elements V1 提供了四个关键的生命周期钩子，让你可以精确地控制组件的行为：

constructor()：构造函数，组件诞生的摇篮

这是组件的第一个生命周期钩子，也是组件实例创建的地方。你可以在这里初始化组件的状态，设置默认值，绑定事件处理函数等等。但是，请记住，此时组件还没有连接到 DOM 树，所以你不能在这里访问组件的属性和子元素。

class MyAwesomeButton extends HTMLElement {
  constructor() {
    super(); // 必须调用 super()
    this._shadowRoot = this.attachShadow({ mode: 'open' }); // 创建 Shadow DOM
    this._shadowRoot.innerHTML = `
      <style>
        button {
          background-color: #4CAF50;
          border: none;
          color: white;
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          cursor: pointer;
        }
      </style>
      <button>Click Me!</button>
    `;
    this._button = this._shadowRoot.querySelector('button');
    this._button.addEventListener('click', this._handleClick.bind(this));
  }

  _handleClick() {
    alert('Button clicked!');
  }
}

在这个例子中，我们在构造函数中创建了 Shadow DOM，并添加了一个按钮。我们还绑定了按钮的点击事件处理函数。

connectedCallback()：组件连接到 DOM 树，开始绽放

当组件被添加到 DOM 树时，connectedCallback() 会被调用。这意味着组件已经准备好显示在页面上了。你可以在这里执行一些初始化操作，例如加载数据，设置事件监听器等等。
```
class MyAwesomeButton extends HTMLElement {
  // ... (constructor) ...

  connectedCallback() {
    console.log('MyAwesomeButton 组件已连接到 DOM 树！');
  }
}
```
在这个例子中，当组件连接到 DOM 树时，我们会在控制台输出一条消息。
disconnectedCallback()：组件从 DOM 树断开，优雅谢幕

当组件从 DOM 树中移除时，disconnectedCallback() 会被调用。你可以在这里执行一些清理操作，例如移除事件监听器，释放资源等等，避免内存泄漏。
```
class MyAwesomeButton extends HTMLElement {
  // ... (constructor, connectedCallback) ...

  disconnectedCallback() {
    console.log('MyAwesomeButton 组件已从 DOM 树断开！');
    this._button.removeEventListener('click', this._handleClick); // 移除事件监听器
  }
}
```
在这个例子中，当组件从 DOM 树断开时，我们会移除按钮的点击事件监听器。

attributeChangedCallback(name, oldValue, newValue)：属性变化，随风起舞

当组件的属性发生变化时，attributeChangedCallback() 会被调用。你可以使用 observedAttributes getter 来指定需要监听的属性。这个回调函数允许你根据属性的变化来更新组件的状态和外观。

class MyAwesomeButton extends HTMLElement {
  // ... (constructor, connectedCallback, disconnectedCallback) ...

  static get observedAttributes() {
    return ['label']; // 指定需要监听的属性
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'label') {
      this._button.textContent = newValue;
    }
  }
}

customElements.define('my-awesome-button', MyAwesomeButton);

// 使用方式：
// <my-awesome-button label="New Label"></my-awesome-button>

在这个例子中，我们监听了 label 属性的变化。当 label 属性发生变化时，我们会更新按钮的文本内容。

一个更复杂的例子：可排序的数据表格

让我们用 Custom Elements V1 来创建一个可排序的数据表格组件，深入了解它的应用。

class SortableDataTable extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({ mode: 'open' });
    this._data = [];
    this._sortColumn = null;
    this._sortOrder = 'asc'; // 'asc' or 'desc'
    this._render();
  }

  static get observedAttributes() {
    return ['data']; // 我们将通过 attribute 传递数据
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data') {
      try {
        this._data = JSON.parse(newValue); // 假设数据是 JSON 字符串
        this._render(); // 重新渲染表格
      } catch (error) {
        console.error('Invalid data format:', error);
        this._data = []; // 错误时清空数据
        this._render();
      }
    }
  }

  _render() {
    if (!this._data || this._data.length === 0) {
      this._shadowRoot.innerHTML = '<p>No data to display.</p>';
      return;
    }

    const headers = Object.keys(this._data[0]); // 从第一行数据获取表头
    let tableHTML = `
      <style>
        table {
          border-collapse: collapse;
          width: 100%;
        }

        th, td {
          border: 1px solid #ddd;
          padding: 8px;
          text-align: left;
        }

        th {
          background-color: #f2f2f2;
          cursor: pointer; /* 表头可以点击排序 */
        }
      </style>
      <table>
        <thead>
          <tr>
            ${headers.map(header => `<th>${header}</th>`).join('')}
          </tr>
        </thead>
        <tbody>
          ${this._data.map(row => `
            <tr>
              ${headers.map(header => `<td>${row[header]}</td>`).join('')}
            </tr>
          `).join('')}
        </tbody>
      </table>
    `;

    this._shadowRoot.innerHTML = tableHTML;

    // 添加排序事件监听器
    const thElements = this._shadowRoot.querySelectorAll('th');
    thElements.forEach((th, index) => {
      th.addEventListener('click', () => this._sortTable(headers[index]));
    });
  }

  _sortTable(column) {
    if (this._sortColumn === column) {
      this._sortOrder = this._sortOrder === 'asc' ? 'desc' : 'asc'; // 切换排序顺序
    } else {
      this._sortColumn = column;
      this._sortOrder = 'asc'; // 默认升序
    }

    this._data.sort((a, b) => {
      const valueA = a[column];
      const valueB = b[column];

      if (valueA < valueB) {
        return this._sortOrder === 'asc' ? -1 : 1;
      }
      if (valueA > valueB) {
        return this._sortOrder === 'asc' ? 1 : -1;
      }
      return 0;
    });

    this._render(); // 重新渲染表格
  }
}

customElements.define('sortable-data-table', SortableDataTable);

// 使用方式：
// <sortable-data-table data='[{"name": "Alice", "age": 30}, {"name": "Bob", "age": 25}]'></sortable-data-table>

这个例子展示了 Custom Elements V1 的强大之处：

数据驱动： 通过 data 属性传递数据，组件自动渲染表格。
可排序： 点击表头可以对数据进行排序。
封装性： 组件的样式和行为完全封装在 Shadow DOM 中，不会受到外部影响。
可复用： 你可以在任何 Web 项目中使用这个组件，而无需进行任何修改。

Custom Elements V1 的局限性

虽然 Custom Elements V1 非常强大，但它也有一些局限性：

学习曲线： 相比于使用现成的框架，学习 Custom Elements V1 需要一定的学习成本。你需要了解 Web Components 的相关概念和 API。
框架集成： 虽然 Custom Elements V1 可以在任何框架中使用，但与一些框架的集成可能需要一些额外的配置。例如，在 React 中使用 Custom Elements V1 需要使用 React.forwardRef 来处理 ref 的传递。
浏览器兼容性： 虽然 Custom Elements V1 得到了主流浏览器的支持，但一些旧版本的浏览器可能需要使用 polyfill 来支持。

总结：拥抱 Web Components 的未来

Custom Elements V1 为我们提供了一种构建高性能、可复用的 Web 组件的强大工具。它可以帮助我们告别“意大利面条式”代码，拥抱积木式 Web 开发。虽然它有一些局限性，但它的优势远大于劣势。

学习 Custom Elements V1 不仅可以让你更好地理解 Web Components 的相关概念和 API，还可以让你站在技术的最前沿，更好地适应未来的 Web 开发。

所以，不要犹豫，现在就开始学习 Custom Elements V1 吧！你会发现，Web 开发原来可以如此优雅、高效。也许你会发现，自己也能创造出令人惊叹的 Web 组件，让 Web 世界变得更加美好。

Custom Elements V1：告别“意大利面条式”代码，拥抱积木式 Web 开发

发表回复 取消回复

发表回复取消回复