Custom Elements 模块化-JavaScript中文网-JavaScript教程资源分享门户

简介

Custom Elements是Web Components的一部分，允许开发者创建自定义的HTML元素，具有自定义的行为和样式。

Custom Elements依赖于一些重要的概念，如Shadow DOM和HTML模板等。它允许我们创建从其他地方导入的现成Web Component，并将其与自定义的功能结合在一起，从而构建出强大、可重用的UI组件。

本文将深入探讨Custom Elements的模块化，详细介绍如何封装，导出和导入自定义元素，并提供代码示例作为参考。

创建Custom Elements

要创建自定义元素，我们需要使用CustomElementRegistry.define()方法。它接受两个参数：元素名称和描述元素特征的类。

下面是一个简单的例子，在其中我们创建一个自定义元素<my-element>：

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
}

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

在这个示例中，我们传递了一个class实例（即MyElement）作为第二个参数到define()方法中。这个类继承自HTMLElement，父类通常用于封装平常HTML元素的常见行为和常见方法（如addEventListener()）。

此时我们已经定义了这个自定义元素，但它目前还没有任何行为。接下来，我们将把一些自定义的行为附加到它上面。

在创建类时，我们可以定义类的方法和属性，用于封装所需行为。例如，以下代码创建了一个具有一个click事件监听器的自定义元素：

// javascriptcn.com code example
class MyElement extends HTMLElement {
  constructor() {
    super();
    
    this.addEventListener('click', e => {
      console.log('clicked!');
    });
  }
}

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

注意，在构造函数中为元素实例分配事件监听器。这个自定义元素现在将在单击时输出"clicked!"。

自定义元素的封装

在前面的部分，我们创建了一个简单的自定义元素，并将一些行为添加到元素内。但是，通常情况下，我们需要将这些行为打包到更高级别的封装中，以方便在多个项目（或同一项目中的多个位置）之间共享。

这里提供一个例子，演示了如何增加一个属性到自定义元素，并将属性的值从元素外部更改：

// javascriptcn.com code example
class MyElement extends HTMLElement {
  constructor() {
    super();

    this._count = 0;
  }

  get count() {
    return this._count;
  }

  set count(val) {
    this._count = val;
  }

  connectedCallback() {
    this.render();
  }

  render() {
    const countSpan = document.createElement('span');
    countSpan.textContent = this._count.toString();

    const incButton = document.createElement('button');
    incButton.textContent = 'Increment';

    this.appendChild(countSpan);
    this.appendChild(incButton);
  }
}

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

在这个示例中，MyElement的构造函数初始化了一个_count变量。由于类定义中的getter和setter方法，外部可以读/写count属性，这样就可以更改内部_count变量的值。

在connectedCallback()方法中，我们调用了render()方法，该方法生成了一个框架，包含了用于增加计数器值的按钮和显示计数器值的span元素。

现在，我们已经创建了一个自定义元素标签，用户可以在页面上使用它了。接下来，我们将看到如何通过export关键字导出自定义元素，并在其他项目中使用它。

自定义元素的导出

我们可以将自定义元素封装到类中，将类导出到其他JavaScript文件中。导出自定义元素的步骤如下：

编写你的自定义元素类，并将其继承自HTMLElement。
使用export default关键字导出该类以便其他文件可以访问。

这里有一个例子，展示了如何将MyElement自定义元素导出到另一个JavaScript文件中：

// javascriptcn.com code example
class MyElement extends HTMLElement {
  constructor() {
    super();

    this._count = 0;
  }

  get count() {
    return this._count;
  }

  set count(val) {
    this._count = val;
  }

  connectedCallback() {
    this.render();
  }

  render() {
    const countSpan = document.createElement('span');
    countSpan.textContent = this._count.toString();

    const incButton = document.createElement('button');
    incButton.textContent = 'Increment';

    this.appendChild(countSpan);
    this.appendChild(incButton);
  }
}

export default MyElement;

注意，我们使用了export default关键字将MyElement函数导出。这可以使另一个JavaScript文件访问MyElement。

自定义元素的导入

要使用自定义元素，我们必须从另一个JavaScript文件中导入它。要做到这一点，我们使用import关键字将类导入到现在的JavaScript文件中。

在这里，我们有一个示例，演示了如何导入MyElement自定义元素：

import MyElement from './my-element.js';

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

这里我们再次使用window.customElements.define()来定义自定义元素，但是我们现在使用MyElement类而不是在同一文件内编写代码。

请注意，在第一行中，我们从my-element.js文件中导入MyElement类。在我们的例子中，我们假设这个自定义元素定义存在于一个名为my-element.js的文件中。

结论

在本文中，我们详细探讨了如何使用Custom Elements模块化。我们演示了如何创建一个最小的自定义元素，如何封装自定义元素并导出它们，以及如何在其他项目中导入它们。

希望这篇文章为那些希望使用Custom Elements构建模块化Web Components的开发人员提供指导和学习参考。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6738c556317fbffedf12b09c