细解 JavaScript 如何封装组件：HTML 模板

2024-01-13 14:31:01

在上一篇文章中，我们介绍了 Web Components 是一套原生 JavaScript 就已经支持的组件封装技术，它由三个主要技术组成：自定义元素、HTML 模板和 Shadow DOM。本文将重点介绍 HTML 模板在 JavaScript 中封装组件的作用，包括其优点、工作原理以及如何使用 HTML 模板来创建自定义元素。此外，文章还将讨论 Shadow DOM 和自定义元素的生命周期方法，帮助读者全面了解 JavaScript 中组件封装的原理和实现方法。

HTML 模板的优点

使用 HTML 模板来封装组件具有许多优点，包括：

代码可重用性： HTML 模板可以将组件的 HTML 结构与组件的逻辑代码分开，从而提高代码的可重用性。当需要在不同的地方使用相同的组件时，只需使用相同的 HTML 模板即可，而无需重新编写组件的逻辑代码。
代码的可维护性： HTML 模板可以使组件的代码更易于维护。当需要修改组件的 HTML 结构时，只需修改 HTML 模板即可，而无需修改组件的逻辑代码。
组件的可扩展性： HTML 模板可以使组件更易于扩展。当需要在组件中添加新的功能时，只需向 HTML 模板中添加新的元素即可，而无需修改组件的逻辑代码。

HTML 模板的工作原理

HTML 模板是一种特殊的 HTML 文档，它包含了组件的 HTML 结构。HTML 模板不会被直接呈现给用户，而是会被 JavaScript 代码使用来创建自定义元素。

当 JavaScript 代码使用 HTML 模板来创建自定义元素时，它会将 HTML 模板中的内容复制到一个 Shadow DOM 中。Shadow DOM 是一个与主文档隔离的特殊 DOM 树，它只对自定义元素本身可见。

Shadow DOM 的好处是，它可以将组件的 HTML 结构与主文档的 HTML 结构隔离，从而防止组件的 HTML 结构影响主文档的 HTML 结构。此外，Shadow DOM 还可以在组件中使用 CSS 样式，而不会影响主文档的 CSS 样式。

如何使用 HTML 模板来创建自定义元素

要使用 HTML 模板来创建自定义元素，需要按照以下步骤进行：

创建一个 HTML 模板文件，并将组件的 HTML 结构写入该文件中。
在 JavaScript 代码中，使用 document.createElement() 方法创建一个自定义元素。
使用 attachShadow() 方法为自定义元素创建一个 Shadow DOM。
将 HTML 模板的内容复制到 Shadow DOM 中。

下面是一个使用 HTML 模板创建自定义元素的示例：

// 创建 HTML 模板
const template = document.createElement('template');
template.innerHTML = `
  <div>
    <h1>Hello, world!</h1>
  </div>
`;

// 创建自定义元素
const MyElement = document.createElement('my-element');

// 创建 Shadow DOM
const shadowRoot = MyElement.attachShadow({ mode: 'open' });

// 将 HTML 模板的内容复制到 Shadow DOM 中
shadowRoot.appendChild(template.content);

Shadow DOM

Shadow DOM 是一个与主文档隔离的特殊 DOM 树，它只对自定义元素本身可见。Shadow DOM 的好处是，它可以将组件的 HTML 结构与主文档的 HTML 结构隔离，从而防止组件的 HTML 结构影响主文档的 HTML 结构。此外，Shadow DOM 还可以在组件中使用 CSS 样式，而不会影响主文档的 CSS 样式。

要使用 Shadow DOM，需要使用 attachShadow() 方法为自定义元素创建一个 Shadow DOM。attachShadow() 方法有两个参数：

mode：指定 Shadow DOM 的模式。有两种模式可供选择：
- open：表示 Shadow DOM 是对外部可见的。
- closed：表示 Shadow DOM 是对外部不可见的。
delegatesFocus：指定 Shadow DOM 是否应该委托焦点。有两种值可供选择：
- true：表示 Shadow DOM 应该委托焦点。
- false：表示 Shadow DOM 不应该委托焦点。

下面是一个使用 attachShadow() 方法为自定义元素创建 Shadow DOM 的示例：

const MyElement = document.createElement('my-element');

// 创建 Shadow DOM
const shadowRoot = MyElement.attachShadow({ mode: 'open' });

自定义元素的生命周期方法

自定义元素具有四个生命周期方法：

connectedCallback()：当自定义元素被添加到 DOM 树中时，会调用此方法。
disconnectedCallback()：当自定义元素被从 DOM 树中移除时，会调用此方法。
attributeChangedCallback()：当自定义元素的属性值发生改变时，会调用此方法。
adoptedCallback()：当自定义元素被移动到另一个文档中时，会调用此方法。

生命周期方法可以用来执行一些初始化操作、更新操作或销毁操作。例如，在 connectedCallback() 方法中，可以执行一些初始化操作，例如获取元素的属性值或设置元素的样式。在 disconnectedCallback() 方法中，可以执行一些销毁操作，例如释放元素占用的内存。

下面是一个使用生命周期方法的示例：

class MyElement extends HTMLElement {
  connectedCallback() {
    // 执行一些初始化操作
  }

  disconnectedCallback() {
    // 执行一些销毁操作
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // 当元素的属性值发生改变时，执行一些更新操作
  }

  adoptedCallback() {
    // 当元素被移动到另一个文档中时，执行一些操作
  }
}

customElements.define('my-element', MyElement);