自定义元素探秘及构建可复用组件最佳实践

摘要：若自定义元素标签名称不可用则摒弃。总之，自定义元素让开发者的代码更易理解和维护，并分割为小型，可复用及可封装的模块。被称为自定义元素接口，虽然现在仍然可用，但是已经被弃用并被认为是糟糕的实现。

原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。

这是 JavaScript 工作原理第十九章。

在 前述文章中，我们介绍了 Shadow DOM 接口和一些其它概念，而这些都是网页组件的组成部分。网页组件背后的思想即通过创建颗粒化，模块化和可复用的元素来扩展 HTML 内置功能。这是一个已经被所有主流浏览器兼容的相对崭新的 W3C 标准且可以被用在生产环境之中，虽然不兼容的浏览器需要使用垫片库(将在随后的章节中进行讨论)。

正如开发者所知，浏览器为构建网站和网页程序提供了一些重要的开发工具。我们所说的 HTML，CSS 和 JavaScript 即开发者使用 HTML 来构建结构，CSS 进行样式化然后使用 JavaScript 来让页面动起来。然而，在网页组件出现之前，把 JavaScript 脚本和 HTML 结构组合起来并非易事。

本文将阐述网页组件的基石-自定义元素。总之，开发者可以使用自定义元素接口来创建包含 JavaScript 逻辑和样式的自定义元素(正如名称的字面意思)。许多开发者会把自定义元素和 shadow DOM 混为一谈。但是，他们是完全不同的概念且它们互补而不是可以相互替代的。

一些框架(比如 Angular，React) 试图通过引进其自有概念来解决同样的问题。开发者可以把自定义元素和 Angular 的指令或者 React 组件进行对比。然而，自定义元素是浏览器原生的且只需要原生 JavaScript，HTML 和 CSS。当然了，这并不意味着它可以取代一个典型的 JavaScript 框架。现代框架不仅仅为开发者提供模仿自定义元素行为的能力。因此，可以同时使用框架和自定义元素。

在深入了解之前，让我们先大概快速浏览一下接口的内容。全局 customElements 对象为开发者提供了一些方法：

define(tagName, constructor, options) －创建一个新的自定义元素。

包含三个参数：自定义元素的可用标签名称，自定义元素类定义及选项参数对象。目前仅支持一个选项参数：extends 指定想要扩展的 HTML 内置元素名称的字符串。用来创建定制化内置元素。

get(tagName) －若元素已经定义则返回自定义元素的构造函数否则返回 undefined。只有一个参数：自定义元素的可用标签名称。

whenDefined(tagName)－返回一个 promise 对象，当定义自定义元素即解析。若元素已定义则立即进行解析。若自定义元素标签名称不可用则摒弃 promise。只有一个参数：自定义元素的可用标签名称。

创建自定义元素实际上就是小菜一碟。开发者只需要做两件事：创建扩展 HTMLElement 类元素的类定义，然后以合适的名称注册元素。

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // …
  }

  // …
}

customElements.define("my-custom-element", MyCustomElement);

或者如你所愿，可以使用匿名类以防止弄乱当前作用域

customElements.define("my-custom-element", class extends HTMLElement {
  constructor() {
    super();
    // …
  }

  // …
});

从以上例子可见，使用 customElements.define(...) 方法注册自定义元素。

实际上，问题是啥？嵌套 DIV 是问题之一。嵌套 Div 是啥？在现代网页程序中这是一个非常常见的现象，开发者会使用多个嵌套块状元素(div 互相嵌套之类)。

  

    

      

        

          

            …
          
        
      
    
  

因为浏览器可以在页面上正常进行渲染，所以使用了这样的嵌套结构。但是，这会使得 HTML 不具可读性且难以维护。

因此，例如假设有如下组件：

那么传统 HTML 结构类似如下：

但想象下如果可以使用类似如下代码：

要我说，第二个示例清爽多了。第二个示例更具可维护性，可读性且对于浏览器和开发者更加合理。更加简洁。

另一个问题即可复用性。作为开发者，不仅仅要书写可运行的代码还得写出可维护代码。书写可维护代码即能够轻易地复用代码片段而不是重复地复制粘贴。

我将会给出一个简单的示例而你就会明白。假设有如下元素：

若需要在其它地方使用这段代码，开发者需要再次书写相同的 HTML 结构。现在，想象 一下需要稍微修改一下这些元素。开发者需要找出每个代码需要修改的地方，然后一遍遍地做出同样的修改。太恶心了。。。

若使用如下码岂不会更好？

现代网页程序不仅仅只有静态 HTML。开发者需要做交互。这就需要 JavaScript。一般来说，开发者需要做的即创建一些元素然后在上面监听事件以响应用户输入。点击，拖拽或者悬浮事件等等。

var myDiv = document.querySelector(".my-custom-element");

myDiv.addEventListener("click", () => {
  myDiv.innerHTML = " I have been clicked ";
});

  I have not been clicked yet.

使用自定义元素接口可以把所有的逻辑封装进元素自身。以下代码可以实现和上面代码一样的功能：

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

    var self = this;

    self.addEventListener("click", () => {
      self.innerHTML = " I have been clicked ";
    });
  }
}

customElements.define("my-custom-element", MyCustomElement);

  I have not been clicked yet

咋一看上去，自定义元素技术需要书写更多的 JavaScript 代码。但是在实际程序中，创建不需复用的单一组件的情况是很少见的。一个典型的现代网页程序的重要特征即大多数元素都是动态创建的。那么，开发者就需要分别处理使用 JavaScript 动态添加元素或者使用 HTML 结构中预定义内容。那么可以使用自定义元素来实现这些功能。

总之，自定义元素让开发者的代码更易理解和维护，并分割为小型，可复用及可封装的模块。

在创建自定义元素之前，开发者需要遵守如下特殊规则：

名称必须包含一个破折号 - 。这样 HTML 解析器就可以把自定义元素和内置元素区分开来。这样可以保证不会和内置元素出现命名冲突的问题(不管是现在或者将来当添加其它元素的时候)。比如， 是正确的而 myCustomElement 和 则不然。

不允许重复注册标签名称。重复注册标签名称会导致浏览器抛出 DOMException 错误。不可以覆盖已注册自定义元素。

自定义元素不可以自关闭。HTML 解析器只允许一小撮内置元素可以自关闭(比如