如何妙用纯原生 JS 封装组件 —— 自定义元素详解（一）

2024-01-20 12:56:25

前言：如何封装一个组件？

在现代前端开发中，使用 React 或 Vue 等框架来构建通用组件已成为一种常见做法。然而，原生 JavaScript 同样具备封装组件的能力，并且可以带来更强大的灵活性。本文将引导你探索如何利用原生 JS 封装组件，以自定义元素为基础，助你打造更具可复用性的前端应用。

自定义元素的魅力

自定义元素是 HTML5 中引入的一项重要特性，它允许你定义和使用自己的 HTML 标签。这为构建组件提供了无限的可能，你可以创建自己的元素，并在其中封装特定功能。这些自定义元素就像可重复使用的积木，可以组合成更复杂的应用程序。

原生 JS 封装的优势

原生 JavaScript 封装组件具有许多优势：

灵活性： 原生 JS 允许你完全掌控组件的实现，你可以根据自己的需求进行定制。
轻量级： 与使用框架相比，原生 JS 封装的组件更加轻量级，对性能的影响更小。
兼容性： 原生 JS 组件在所有支持 JavaScript 的浏览器中都可以运行，而无需额外的库或框架。

动手实践：封装你的第一个组件

现在，让我们动手创建一个简单的原生 JS 组件。我们将创建一个名为 <my-button> 的自定义元素，它可以像普通的 HTML 按钮一样使用，但具有更丰富的功能。

首先，创建一个 HTML 文件，并在其中包含以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <my-button>点击我</my-button>

  <script src="my-button.js"></script>
</body>
</html>

接下来，创建一个名为 my-button.js 的文件，并在其中包含以下代码：

class MyButton extends HTMLElement {
  constructor() {
    super();

    // 创建按钮元素
    const button = document.createElement('button');
    button.textContent = '点击我';

    // 为按钮添加点击事件监听器
    button.addEventListener('click', () => {
      alert('你点击了我！');
    });

    // 将按钮元素添加到组件的 shadow DOM 中
    this.attachShadow({ mode: 'open' }).appendChild(button);
  }
}

// 注册自定义元素
customElements.define('my-button', MyButton);