关于前端:Web-Components-系列二-关于-Custom-Elements

前言

在上一篇文章中介绍了 Web Components 的相干概念，晓得它是浏览器用来原生反对“组件化”的办法，并且通晓它的技术组成为：

• Custom Elements
• Shadow DOM
• HTML templates

明天，咱们就来学习它的技术之一——Custom Element 的局部相干常识。

Custom Elements 的意义

Web Components 规范十分重要的一个个性是，它使开发者可能将 HTML 页面的性能封装为 custom elements（自定义标签），而平常，开发者不得不写一大堆简短、深层嵌套的标签来实现同样的页面性能。

Custom Elements 是网页组件化的根底，也是其外围。

Custom Elements 的分类

依据是否继承根底 HTML 元素，将 Custom Elements 分为两类。

Autonomous custom elements

是独立的元素，它不继承其余内建的 HTML 元素。你能够间接把它们写成 HTML 标签的模式，来在页面上应用。例如 <my-card>，或者是 document.createElement("my-card") 这样。

Customized built-in elements

继承自根本的 HTML 元素。在创立时，你必须指定所需扩大的元素，应用时，须要先写出根本的元素标签，并通过 is 属性指定 custom element 的名称。例如<p is="my-card">, 或者 document.createElement("p", { is: "my-card"})。

CustomElementRegistry 对象

咱们对自定义标签的概念等相干常识已有理解，那在理论开发中到底怎么应用自定义标签呢？这里就须要介绍一下 Custom Elements 的重点对象——CustomElementRegistry 对象。

要获取它的实例，请应用 window.customElements 属性。它的次要作用有：

• 给页面注册一个自定义标签
• 获取已注册的 Custom Elements 的相干信息

咱们来看一下 CustomElementRegistry 对象的相干办法：

能够看到，CustomElementRegistry 对象蕴含四个办法：

• CustomElementRegistry.define()
• CustomElementRegistry.get()
• CustomElementRegistry.upgrade()
• CustomElementRegistry.whenDefined()

接下来，咱们别离介绍一下 CustomElementRegistry 对象的各个办法。

CustomElementRegistry.define()

它被用来定义（创立）一个自定义标签。语法如下：

customElements.define(name, constructor, options);

参数解析：

• name 自定义标签名。留神：它不能是单个单词，且其中必须要有短横线，比方：my-card 这样的。
• constructor 自定义元素结构器，它能够管制元素的表现形式、行为和生命周期等。
• options 一个蕴含 extends 属性的配置对象，是可选参数。它指定了所创立的元素继承自哪个内置元素，能够继承任何内置元素。

返回值为 undefined。

应用示例：

// 申明自定义标签构造函数类
class MyCard extends HTMLParagraphElement{constructor(){super();
        ……
    }
}

// 注册自定义标签
customElements.define('my-card', MyCard, { extends: 'p'});

CustomElementRegistry.get()

该办法用于返回之前定义的自定义标签的构造函数。语法如下：

constructor = customElements.get(name);

name 示意想要获取的自定义标签构造函数的标签名，其格局也应该为短横线连贯的单词。

指定名字的自定义元素的构造函数，如果没有应用该名称的自定义元素定义，则为undefined。

应用示例：

// 调用 get 办法
customElements.get("my-card");

// class MyCard extends HTMLParagraphElement{//     constructor(){//         super();        
//     }
// }

customElements.get("MyCard");
// undefined

CustomElementRegistry.upgrade()

该办法将更新 root 子树中所有蕴含影子 DOM 的自定义元素，甚至在它们载入主文档之前也能够更新。语法如下：

customElements.upgrade(root);

root 示意带有要降级的蕴含暗影的后辈元素的 Node 实例。如果没有能够降级的后辈元素，则不会抛出谬误。

其返回值为 undefined。

不调用 upgrade 办法：

const el = document.createElement("my-card");
class MyCard extends HTMLElement {}
customElements.define("my-card", MyCard);
console.log(el instanceof MyCard); // false

调用 upgrade 办法：

const el = document.createElement("my-card");
class MyCard extends HTMLElement {}
customElements.define("my-card", MyCard);
customElements.upgrade(el);
console.log(el instanceof MyCard); // true

CustomElementRegistry.whenDefined()

返回当应用给定名称定义自定义元素时将会执行的 promise。如果曾经定义了这样一个自定义元素，那么立刻执行返回的 promise。语法如下：

Promise<> customElements.whenDefined(name);

name 还是示意自定义标签的名称。

示例一：

class MyCard extends HTMLParagraphElement {constructor() {super();
    }
}

customElements.whenDefined("my-card").then(() => {console.log(`my-card 被注册 `);
});
console.log("my-card 注册前");
customElements.define("my-card", MyCard, { extends: "p"});
console.log("my-card 注册后");

// my-card 注册前
// my-card 注册后
// my-card 被注册

如果再次执行以下代码，则会立刻执行 resolve 办法：

customElements.whenDefined("my-card").then((res) => {console.log(res);
    console.log(`my-card 被注册 `);
});
// my-card 被注册

总结

以上就是对于 Custom Elements 的局部知识点，后续会补充自定义标签的生命周期函数等内容。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！