Web-Component组件简述

前言

组件的概念在Web上已经存在一段时间了,Web Components是一个Web组件标准,通过一种标准化的非侵入的方式封装一个组件,每个组件能组织好它自身的HTML、CSS、JavaScript,并且不会干扰页面上的其他代码Web Components主要由以下几个部分组成HTML templates(HTML模板)slots (slots槽) 和 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

templates

templates小例子

上面代码完成了一个基本的templates小例子,虽然是个简单的例子,但已经可以开始了解它的作用了

slots(添加灵活度)

我们使用 让它能在单个实例中通过声明式的语法展示不同的文本

defaultText

如果模板对象添加到 html 脚本中时槽的内容还没定义, 或者浏览器不支持槽,将显示默认的defaultText

Let's have some different text!

同作用

Shadow DOM(影子DOM)

一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。

Shadow DOM案例

我们定义一个 web 组件使用模板作为阴影(shadow) DOM 的内容

Custom elements(自定义元素)

Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长、深层嵌套的标签来实现同样的页面功能

CustomElementRegistry

接口的实例用来处理 web 文档中的 custom elements — 该对象允许你注册一个 custom element,返回已注册 custom elements 的信息

CustomElementRegistry.define()

方法用来注册一个 custom emelent,该方法接受以下参数:

- 表示所创建的元素名称的符合 DOMString 标准的字符串。注意,custom element 的名称不能是单个单词,且其中必须要有短横线。

- 用于定义元素行为的 类 。

- 可选参数,一个包含 extends 属性的配置对象,是可选参数。它指定了所创建的元素继承自哪个内置元素,可以继承任何内置元素。

HTML Imports

用于将 HTML 代码及 Web Component 导入到网页中。然而,在交叉参考 ES Module 规范后,Firefox 团队认为这不是一种最佳实践,该规范也就没多少人在推动了。就不做过多解析

Component例子

Autonomous custom elements

class PopUpInfo extends HTMLElement {

constructor() {

// 必须首先调用 super方法

super();

// 元素的功能代码

// 创建一个 shadow root

var shadow = this.attachShadow();

// 创建一个 spans

var wrapper = document.createElement('span');

wrapper.setAttribute('class','wrapper');

var icon = document.createElement('span');

icon.setAttribute('class','icon');

icon.setAttribute('tabindex', 0);

var info = document.createElement('span');

info.setAttribute('class','info');

// 获取text属性上的内容,并添加到一个span标签内

var text = this.getAttribute('text');

info.textContent = text;

// 插入 icon

var imgUrl;

if(this.hasAttribute('img')) {

imgUrl = this.getAttribute('img');

} else {

imgUrl = 'img/default.png';

}

var img = document.createElement('img');

img.src = imgUrl;

icon.appendChild(img);

// 创建一些 CSS,并应用到 shadow dom上

var style = document.createElement('style');

style.textContent = '.wrapper {' +

// 简洁起见,省略了具体的CSS

// 将创建的元素附加到 shadow dom

shadow.appendChild(style);

shadow.appendChild(wrapper);

wrapper.appendChild(icon);

wrapper.appendChild(info);

}

}

我们使用之前提到的define()方法将 custom element注册到CustomElementRegistry上,在方法的参数里,我们指定了元素的名称,以及定义了元素功能的类

customElements.define('popup-info', PopUpInfo);

我们就可以使用PopUpInfo

生命周期

在custom element的构造函数中,可以指定多个不同的回调函数,它们将会在元素的不同生命时期被调用:

connectedCallback:当 custom element首次被插入文档DOM时,被调用。

disconnectedCallback:当 custom element从文档DOM中删除时,被调用。

adoptedCallback:当 custom element被移动到新的文档时,被调用。

attributeChangedCallback: 当 custom element增加、删除、修改自身属性时,被调用。

兼容性

Shadow DOM 第二版和 Custom Element 第二版在 Chrome、Safari、三星浏览器上已经支持,还被 Firefox 列为要支持的特性,希望很大。而 Edge 依然在考虑是否支持

总结

Web Components 总的来说是提供一整套完善的封装机制来把 Web 组件化这个东西标准化,这样可以更好推动组件的复用。Custom Elements 提供了自定义元素和标签的能力,template 提供组件模板,而 Shadow DOM 则处理组件间代码隔离的问题。

现代框架比如说 React、Angular、Vue 进一步把组件放在开发的前列,并作为核心要素用在它们自己的框架结构上,而原生的Web Components是希望能打破这些框架间的界限。让开发者不用再去理解那么多抽象概念,释放更多的潜力。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190908A06GHU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券