澳门在线威尼斯官方 > 威尼斯澳门在线 > 5分钟学一学Web,是个什么样的东西

原标题:5分钟学一学Web,是个什么样的东西

浏览次数:100 时间:2019-10-31

Web Components 是个什么样的东西

2016/09/04 · HTML5, JavaScript · Web Components

原文出处: teabyii   

前端组件化这个主题相关的内容已经火了很久很久,angular 刚出来时的 Directive 到 angular2 的 components,还有 React 的components 等等,无一不是前端组件化的一种实现和探索,但是提上议程的 Web Components 标准是个怎样的东西,相关的一些框架或者类库,如 React,Angular2,甚至是 x-tag,polymer 现在实现的组件化的东西和 Web Components 标准差别在哪里?我花时间努力地把现有的 W3C Web Components 文档看了下,然后坚强地写下这些记录。

首先我们需要知道,Web Components 包括了四个部分:

  • Custom Elements
  • HTML Imports
  • HTML Templates
  • Shadow DOM

这四部分有机地组合在一起,才是 Web Components。

可以用自定义的标签来引入组件是前端组件化的基础,在页面引用 HTML 文件和 HTML 模板是用于支撑编写组件视图和组件资源管理,而 Shadow DOM 则是隔离组件间代码的冲突和影响。

下边分别是每一部分的笔记内容。

Web Components是W3C制定的一种规范,可用于构建独立的Web应用组件,主要包含以下4个模块:模板元素,HTML Import,Shadow DOM,自定义元素。

Custom Elements


概述

Custom Elements 顾名思义,是提供一种方式让开发者可以自定义 HTML 元素,包括特定的组成,样式和行为。支持 Web Components 标准的浏览器会提供一系列 API 给开发者用于创建自定义的元素,或者扩展现有元素。

这一项标准的草案还处于不稳定的状态,时有更新,API 还会有所变化,下边的笔记以 Cutsom Elements 2016.02.26 这个版本为准,因为在最新的 chrome 浏览器已经是可以工作的了,这样可以使用 demo 来做尝试,最后我会再简单写一下最新文档和这个的区别。

1. 模板元素

<template>元素中可以包含HTML标签,样式和脚本,这些都是可复用的。

检测浏览器是否支持模板特性:

var isTemplateSupported=function(){
    var tmpl=document.createElement('template');
    return 'content' in tmpl;
};

兼容性:http://caniuse.com/#feat=template

为了提高Web应用的性能,模板中的内容默认是不加载的,它不在DOM结构中,需要手动加载。有两种方式:

(1)克隆节点

<template id="template1">
    ...
</template>

<div id="container1"></div>

var container=document.querySelector('#container1');
var tmpl=document.querySelector('#template1');
container.appendChild(tmpl.content.cloneNode(true));

其中,cloneNode(true)表示深克隆,目标节点的子节点也被克隆。
cloneNode(false)表示浅克隆,只克隆目标节点,不克隆目标节点的子节点。

(2)节点导入

var container=document.querySelector('#container1');
var tmpl=document.querySelector('#template1');
container.appendChild(document.importNode(tmpl.content,true));

其中,document.importNode(targetNode,true)表示深克隆。


registerElement

首先,我们可以尝试在 chrome 控制台输入 HTMLInputElement,可以看到是有这么一个东西的,这个理解为 input DOM 元素实例化时的构造函数,基础的是 HTMLElement

Web Components 标准提出提供这么一个接口:

JavaScript

document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: function() { ... } }, ... }) })

1
2
3
4
5
6
7
8
document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype, {
    createdCallback: {      
      value: function() { ... }
    },
    ...
  })
})

你可以使用 document.registerElement 来注册一个标签,标准中为了提供 namesapce 的支持,防止冲突,规定标签类型(也可以理解为名字)需要使用 - 连接。同时,不能是以下这一些:

  • annotation-xml
  • color-profile
  • font-face
  • font-face-src
  • font-face-uri
  • font-face-format
  • font-face-name
  • missing-glyph

第二个参数是标签相关的配置,主要是提供一个 prototype,这个原型对象是以 HTMLElement 等的原型为基础创建的对象。然后你便可以在 HTML 中去使用自定义的标签。如:

XHTML

<div> <x-foo></x-foo> </div>

1
2
3
<div>
  <x-foo></x-foo>
</div>

是不是嗅到了 React 的味道?好吧,React 说它自己主要不是做这个事情的。

2. HTML Import

通过HTML Import可以将外部HTML文档嵌入当前的文档中。

<link rel="import" href="fileName.html" >

检测浏览器是否支持HTML Import特性:

var isImportSupported=function(){
    var link=document.createElement('link');
    return 'import' in link;
};

兼容性:http://caniuse.com/#feat=imports

访问引入的文档:

<link id="link1" rel="import" href="fileName.html" >

<div id="container1"></div>

var container=document.querySelector('#container1');
var externalDocument=document.querySelector('#link1').import;
container.appendChild(externalDocument.querySelector('...').cloneNode(true));

#link1会导入一个html,包括<html>,<head>,<body>等等,
externalDocument是该html的document对象,
因此,可以使用externalDocument.querySelector来获取html中的元素。

HTML Import支持两种事件:load事件与error事件


生命周期和回调

在这个 API 的基础上,Web Components 标准提供了一系列控制自定义元素的方法。我们来一一看下:

一个自定义元素会经历以下这些生命周期:

  • 注册前创建
  • 注册自定义元素定义
  • 在注册后创建元素实例
  • 元素插入到 document 中
  • 元素从 document 中移除
  • 元素的属性变化时

这个是很重要的内容,开发者可以在注册新的自定义元素时指定对应的生命周期回调来为自定义元素添加各种自定义的行为,这些生命周期回调包括了:

  • createdCallback
    自定义元素注册后,在实例化之后会调用,通常多用于做元素的初始化,如插入子元素,绑定事件等。
  • attachedCallback
    元素插入到 document 时触发。
  • detachedCallback
    元素从 document 中移除时触发,可能会用于做类似 destroy 之类的事情。
  • attributeChangedCallback
    元素属性变化时触发,可以用于从外到内的通信。外部通过修改元素的属性来让内部获取相关的数据并且执行对应的操作。

这个回调在不同情况下有对应不同的参数:

  • 设置属性时,参数列表是:属性名称,null,值,命名空间
  • 修改属性时,参数列表是:属性名称,旧值,新值,命名空间
  • 删除属性时,参数列表是:属性名称,旧值,null,命名空间

好了,就上边了解到的基础上,假设我们要创建一个自定义的 button-hello 按钮,点击时会 alert('hello world'),代码如下:

JavaScript

document.registerElement('button-hello', { prototype: Object.create(HTMLButtonElement.prototype, { createdCallback: { value: function createdCallback() { this.innerHTML = '<button>hello world</button>' this.addEventListener('click', () => { alert('hello world') }) } } }) })

1
2
3
4
5
6
7
8
9
10
11
12
document.registerElement('button-hello', {
  prototype: Object.create(HTMLButtonElement.prototype, {
    createdCallback: {
      value: function createdCallback() {
        this.innerHTML = '<button>hello world</button>'
        this.addEventListener('click', () => {
          alert('hello world')
        })
      }
    }
  })
})

要留意上述代码执行之后才能使用 <button-hello></button-hello>

3. Shadow DOM

Shadow DOM的引入就是为了解决由封装机制的作用域造成的问题,它将Web Components的HTML,CSS和JavaScript打包,不受外部作用域影响。

检测浏览器是否支持Shadow DOM特性:

var isShadowDOMSupported=function(){
    return 'createShadowRoot' in document.body;
};

兼容性:http://caniuse.com/#feat=shadowdom

Shadow DOM使得我们可以将一棵DOM子树插入正在渲染的文档中,每一个DOM树上的子节点,都能再拥有它自己的Shadow DOM树。
拥有至少一个Shadow DOM子树的DOM元素,称为宿主元素(host element),也叫作Shadow host。

:宿主元素可以用:host选择器来选择

<div id="host1"></div>

var host=document.querySelector('#host1');
var shadowRoot=host.createShadowRoot();
shadowRoot.innerHTML='hello';

扩展原有元素

其实,如果我们需要一个按钮,完全不需要重新自定义一个元素,Web Components 标准提供了一种扩展现有标签的方式,把上边的代码调整一下:

JavaScript

document.registerElement('button-hello', { prototype: Object.create(HTMLButtonElement.prototype, { createdCallback: { value: function createdCallback() { this.addEventListener('click', () => { alert('hello world') }) } } }), extends: 'button' })

1
2
3
4
5
6
7
8
9
10
11
12
document.registerElement('button-hello', {
  prototype: Object.create(HTMLButtonElement.prototype, {
    createdCallback: {
      value: function createdCallback() {
        this.addEventListener('click', () => {
          alert('hello world')
        })
      }
    }
  }),
  extends: 'button'
})

然后在 HTML 中要这么使用:

XHTML

<button is="button-hello">hello world</button>

1
<button is="button-hello">hello world</button>

使用 is 属性来声明一个扩展的类型,看起来也蛮酷的。生命周期和自定义元素标签的保持一致。

当我们需要多个标签组合成新的元素时,我们可以使用自定义的元素标签,但是如果只是需要在原有的 HTML 标签上进行扩展的话,使用 is 的这种元素扩展的方式就好。

原有的 createElementcreateElementNS,在 Web Components 标准中也扩展成为支持元素扩展,例如要创建一个 button-hello

JavaScript

const hello = document.createElement('button', 'button-hello')

1
const hello = document.createElement('button', 'button-hello')

标准文档中还有很多细节上的内容,例如接口的参数说明和要求,回调队列的实现要求等,这些更多是对于实现这个标准的浏览器开发者的要求,这里不做详细描述了,内容很多,有兴趣的自行查阅:Cutsom Elements 2016.02.26。

4. 自定义元素

Web Components规范中还规定了,如果在DOM中创建出一个全新的元素,那么自定义元素可以有自己的属性和方法。

检测浏览器是否支持自定义元素特性:

var isCustomElementSupported=function(){
    return 'registerElement' in document;
};

兼容性:http://caniuse.com/#feat=custom-elements

要开发一个自定义元素,需要5个步骤:创建对象,定义对象的属性,定义生命周期方法,注册新元素,扩展元素。

(1)创建对象
使用Object.create来创建对象,第一个参数是对象的原型,第二个参数是对象的属性。

var element=Object.create(HTMLElement.prototype);

(2)定义对象的属性
使用Object.defineProperty和Object.defineProperties这两个方法定义一个对象的属性。

Object.defineProperty(element, 'title', {
    writable:true
});

(3)定义生命周期方法
在JavaScript中,对象的生命周期是由一个个不同的状态组成的,先后顺序是:
被创建createdCallback,插入到DOM中attachedCallback,
从DOM中移除detachedCallback,对象的某一属性值更新attributeChangedCallback,

element.createdCallback=function(){
    //
};

(4)注册新元素
使用document.registerElement方法,可以在DOM中注册一个新元素。

var MyNameElement=document.registerElement('my-name',{
    prototype:element
});

// 以下向body中动态加载该元素,也可以直接在html中写<my-name>标签
var myNameElement=new MyNameElement();
myNameELement.innerHTML='hello';
document.body.appendChild(myNameElement);

将产生如下HTML:

<my-name>hello</my-name>

(5)扩展元素
一个元素可以用extends继承原生元素或者其他自定义元素。

var myNameElement=document.registerElement('my-name',{
    prototype:element,
    extends:'i'
});

var myNameElement=new MyNameElement();
myNameELement.innerHTML='hello';
document.body.appendChild(myNameElement);

将产生如下HTML:

<i is="my-name">hello</i>

以上(4)(5)也可以不使用构造器
直接在HTML中分别加入<my-name>和<i is="my-name">,也会触发createdCallback事件。


和最新版的区别

前边我提到说文档的更新变化很快,截止至我写这个文章的时候,最新的文档是这个:Custom Elements 2016.07.21。

细节不做描述了,讲讲我看到的最大变化,就是向 ES6 靠拢。大致有下边三点:

  • 从原本的扩展 prototype 来定义元素调整为建议使用 class extends 的方式
  • 注册自定义元素接口调整,更加方便使用,传入 type 和 class 即可
  • 生命周期回调调整,createdCallback 直接用 class 的 constructor

前两个点,我们直接看下代码,原本的代码按照新的标准,应该调整为:

JavaScript

class ButtonHelloElement extends HTMLButtonElement { constructor() { super() this.addEventListener('click', () => { alert('hello world') }) } } customElements.define('button-hello', ButtonHelloElement, { extends: 'button' })

1
2
3
4
5
6
7
8
9
10
11
class ButtonHelloElement extends HTMLButtonElement {
  constructor() {
    super()
 
    this.addEventListener('click', () => {
      alert('hello world')
    })
  }
}
 
customElements.define('button-hello', ButtonHelloElement, { extends: 'button' })

从代码上看会感觉更加 OO,编写上也比原本要显得方便一些,原本的生命周期回调是调整为新的:

  • constructor in class 作用相当于原本的 createdCallback
  • connectedCallback 作用相当于 attachedCallback
  • disconnectedCallback 作用相当于 detachedCallback
  • adoptedCallback 使用 document.adoptNode(node) 时触发
  • attributeChangedCallback 和原本保持一致

connect 事件和插入元素到 document 有些许区别,主要就是插入元素到 document 时,元素状态会变成 connected,这时会触发 connectedCallback,disconnect 亦是如此。

5. 新增的CSS选择器

(1):unresolved
当自定义元素被加载并注册到DOM时,浏览器将选择出匹配的元素,然后根据该元素所在的生命周期将它升级。
在这个升级过程中,这个元素将暴露给浏览器,此时它是没有任何样式的。
我们可以通过使用:unresolved伪类选择器,避免没有样式的内容闪现。

my-name:unresolved::after{
    content:'Registering Element ...';
    color:red;
}

(2):host
Shadow DOM的宿主元素可以通过:host伪选择器来获取到。

:host{
    text-transform:uppercase;
}

(3)::shadow
宿主的Shadow DOM子树可以通过::shadow伪元素选择器应用样式。

:host::shadow h1{
    color:orange;
}

:Shadow DOM是:host的伪元素,而不是子元素,因此:host::shadow中间不能加空格

(4)::content
content插入点元素可以通过::content伪元素应用样式。

:host ::content b{
    color:blue;
}

参考:
WEB COMPONENTS CURRENT STATUS
Learning Web Component Development

HTML Imports

概述

HTML Imports 是一种在 HTMLs 中引用以及复用其他的 HTML 文档的方式。这个 Import 很漂亮,可以简单理解为我们常见的模板中的include 之类的作用。

我们最常见的引入一个 css 文件的方式是:

XHTML

<link rel="stylesheet" href="/css/master.css">

1
<link rel="stylesheet" href="/css/master.css">

Web Components 现在提供多了一个这个:

XHTML

<link rel="import" href="/components/header.html">

1
<link rel="import" href="/components/header.html">

HTMLLinkElement

原本的 link 标签在添加了 HTML Import 之后,多了一个只读的 import 属性,当出现下边两种情况时,这个属性为 null

  • link 不是用来 import 一个 HTML 的。
  • link 元素不在 document 中。

否则,这个属性会返回一个表示引入的 HTML 文件的文档对象,类似于 document。比如说,在上边的代码基础上,可以这样做:

JavaScript

const link = document.querySelector('link[rel=import]') const header = link.import; const pulse = header.querySelector('div.logo');

1
2
3
4
const link = document.querySelector('link[rel=import]')
const header = link.import;
 
const pulse = header.querySelector('div.logo');

阻塞式

我们要知道的是,默认的 link 加载是阻塞式的,除非你给他添加一个 async 标识。

阻塞式从某种程度上讲是有必要的,当你 improt 的是一个完整的自定义组件并且需要在主 HTML 中用标签直接使用时,非阻塞的就会出现错误了,因为标签还没有被注册。

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:5分钟学一学Web,是个什么样的东西

关键词:

上一篇:没有了

下一篇:没有了