web components入门与实践

Web Components是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。 作为开发者,我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML(以及相关的样式和脚本),有时您不得不写代码来呈现自定义UI控件,并且如果您不小心的话,多次使用它们会使您的页面变得一团糟。 Web Components旨在解决这些问题 — 它由四项主要技术组成,它们可以一起使用来创建封装功能的定制元素,可以在你喜欢的任何地方重用,不必担心代码冲突。
  • Custom elements(自定义元素):一组JavaScript API,允许您定义custom elements及其行为,然后可以在您的用户界面中按照需要使用它们。
  • Shadow DOM(影子DOM):一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
  • HTML templates(HTML模板):<template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
  • HTML Imports(HTML导入)一旦定义了自定义组件,最简单的重用它的方法就是使其定义细节保存在一个单独的文件中,然后使用导入机制将其导入到想要实际使用它的页面中。HTML 导入就是这样一种机制,尽管存在争议 — Mozilla 根本不同意这种方法,并打算在将来实现更合适的。
实现web component的基本方法通常如下所示:
  1. 使用ECMAScript 2015类语法创建一个类,来指定web组件的功能(参阅获取更多信息)。
  2. 使用CustomElementRegistry.define()方法注册您的新自定义元素 ,并向其传递要定义的元素名称、指定元素功能的类以及可选的,其所继承自的元素。
  3. 如果需要的话,使用Element.attachShadow()方法将一个shadow DOM附加到自定义元素上。使用通常的DOM方法向shadow DOM中添加子元素、事件监听器等等。
  4. 如果需要的话,使用<template> 和 <slot>方法定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。
  5. 在页面任何您喜欢的位置使用自定义元素,就像使用常规HTML元素那样。

生命周期

我们以polymer3为例,PolymerElement 继承了 HTMLElement,所以它拥有和 HTMLElement 一致的生命周期。 constructor:组件被 create 的时候会被调用,整个生命周期中最早触发也只会触发一次,通常可以在这里做一些初始化私有变量、记录数据的一些操作;但是出于性能和职责分离的考虑,不建议在这里做一些 DOM 相关的事情。 connectedCallback:组件被 连接 到 DOM Tree 的时候会触发,这个时机包括节点被插入节点树、节点被从节点树中移动,所以它可能会被触发多次。你可以在这里监听 DOM 事件或者对 DOM 节点做一些修改。 disconnectedCallback:组件被从 DOM Tree 中移除的时候触发,这个生命周期也可能被触发多次。如果你在 connectedCallback 中监听了事件,一定要记得在这里移除,否则事件监听回调可能会一直引用导致内存泄露和一些奇怪的问题。 adoptedCallback:不常用,不多介绍。 attributeChangedCallback:当组件的 attribute 发生变化的时候触发,它的三个形参分别是 name, oldValue, newValue,记得别把顺序搞反了。如果你声明了 properties 对象,对 attribute 的相应值变化也会触发这个回调。需要注意的是,如果你覆盖了组件的 observedAttributes 静态方法,properties 对象中声明的值不会触发,它会按照你覆盖的 observedAttributes 静态方法的返回值为准。 除此之外,polymer 还额外添加了一些生命周期 ready:由于 HTMLElement 的生命周期中没有一个可以操作 DOM,又只触发一次的周期,Polymer 人为地添加了 ready 这个时机,它在整个生命周期中只会触发一次,也就是第一次节点插入到 DOM 树的时刻。 记得调用 super.ready() 来触发 PolymerElement 的初始化阶段。在初始化阶段,Polymer 会做以下几件事情:
  • attache 组件实例的 Shadow DOM,所以在这个阶段之后才可以访问 this.shadowRoot
  • 初始化 properties,并赋初始值
  • 如果 properties 有声明 observer 或者 computed,会执行它们
通常可以在 ready 函数中给组件实例添加一个 this._isReady = true; 的状态以标明组件已经 ready。

实践教程

Using custom elements

介绍如何使用自定义元素的功能来创建简单的web components,以及生命周期回调和其他更高级的功能。

Using shadow DOM

介绍shadow DOM的基础知识,展示如何向元素中附加shadow DOM,添加到shadow DOM树,添加样式等等。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple DOM example</title>
  </head>
  <body>
      <section>
        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
      </section>
  </body>
</html>
上面这个代码产生的DOM结构如下: Shadow DOM 允许将隐藏的DOM树附加到一个常规的DOM节点上,这个附加的Shadow DOM树从根节点shadow root开始,下面可以像常规DOM操作一样挂载你想要的DOM节点。   Shadow DOM一些术语:
  • Shadow host: shadow DOM附加的宿主DOM节点
  • Shadow tree: shadow DOM下的DOM树
  • Shadow boundary: shadow DOM 结束, regular DOM 开始的分界.
  • Shadow root: shadow dom根节点.
  shadow DOM 的节点操作和常规DOM的操作几乎没有区别, 唯一的区别是shadow DOM 的操作不会影响外面任何正常DOM的数据和展示。shadow DOM其实并不是什么新的概念, <video>标签最早的实现原理就是利用shadow DOM来展示处理播放器的操作按钮等元素。shadow DOM 规范主要是为了方便开发者操作自定义的DOM元素下的shadow DOM。

Using templates and slots

介绍如何使用<template> 和 <slot> 元素定义可重用的HTML结构,然后在Web components中使用该结构。
综合实践,如下面这个例子:
我们可以看到这样的代码:
static get template() {
    return html`xxxx`
}
其实这是我们之前介绍过的 基于ES6标签模板实现事件绑定与数据监听 中的标签模板。  

前端进阶系列视频课程

用JavaScript自己写Virtual DOM》:http://t.cn/REeKJp0 《前端函数式编程FP易学易用》:http://t.cn/REeKVSk 《前端自己用NodeJS编写区块链BlockChain》:http://t.cn/REeoF7v 《程序语言进阶之DSL与AST实战解析》:http://t.cn/R3XoQJA  

参考:

  1. polymer3
  2. Web Components 最佳实践
  3. https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

fed123版权所有,转载请保留出处:前端123学堂 » web components入门与实践

赞 (0) 打赏

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏