什么是组件化

广义的组件化个别是指标签化，也就是以自定义标签为外围的机制。
狭义的组件化包含对数据逻辑层业务梳理，造成不同层级的能力封装

在前端技术的倒退潮流下，可大抵分为三个阶段：

  • web1.0

1.0阶段，技术实现次要以原生html、css、javascript。前端工程师概念粘稠，编程思维次要是以函数为单位拆散行为，每个函数做一件事

  • web2.0

到了2.0时代，jQuery、Bootstrap等模板引擎库开始呈现。编程上呈现了模块化标准，以模块为单位，每个模块做一件事

  • web3.0（此web3.0非彼web3.0）

3.0阶段是前端技术最沉闷的期间，angular、react、vue相继退场。用户对产品的体验越来越高，我的项目上的业务、交互越来越简单，技术上前后端开始拆散。编程思维开始以组件为单位，每个组件领有独立的构造、视图和行为，代表一个残缺的个体

在这个期间，对于组件化的开发模式愈演愈烈，各个框架和库都有本人的规范，这对于我的项目间的兼容并不敌对。于是，W3C晚期提出的 Web Components 概念逐步受到关注。

Web Components

Web Components是W3C定义的规范，是一套原生的组件化开发技术，它容许你创立可重用的定制元素并在web利用中应用它们。

应用Web Components不须要借助任何第三方框架或库，可用于开发跨端、跨框架的组件库

应用Web Components

自定义元素

Web Components 规范反对开发者可能将 HTML 页面的性能封装为自定义元素

注册自定义元素须要调用CustomElementRegistry.define()办法，CustomElementRegistry是一个接口，个别应用它的实现类customElements。

define办法有三个参数：

  • 自定义标签名（须要复合DOMString规范，不能是单个单词，且其中必须要有短横线。）
  • 封装元素行为逻辑的类
  • 蕴含 extends 属性的配置对象（是一个可选参数，extends属性示意自定义元素继承自哪个元素）

例如：

// 自定义一个继承自p元素的标签名为my-element的元素customElements.define('my-element', MyElement, { extends: 'p' });

对于封装元素行为逻辑的类，咱们须要申明一个class继承自HTMLElement。在构造函数中必须先调用super()函数，之后再编写自定义元素的行为逻辑，具体如何封装会在下一节shadowDOM中介绍。

Web Components 依据配置对象的传与否，自定义元素可分为继承自根本的 HTML 元素、独立的元素。

在组件类中能够定义以下四种生命周期回调函数的行为：

  • connectedCallback：元素首次被插入文档 DOM 时调用。
  • disconnectedCallback：元素从文档 DOM 中删除时调用。
  • adoptedCallback：元素被挪动到新的文档时调用。
  • attributeChangedCallback: 元素减少、删除、批改本身属性时调用，它承受三个参数（属性名、旧值、新值）。

Shadow DOM

Shadow DOM 是封装自定义元素的要害。Shadow DOM 就像一个独立的大沙箱，它可能人造做到 CSS 的款式隔离，与其它的DOM元素互不烦扰，它的外部蕴含一个Shadow树。和其余的根本HTML元素一样，Shadow DOM 也是一个附着在DOM树上的节点，这个节点叫作 shadow host，通过shadowRoot对象拜访该节点。上面是对于 Shadow DOM 的示意图：

通过调用 Element.attachShadow()办法来创立一个Shadow DOM并附着到自定义元素上，它返回一个shadowRoot对象，咱们所封装的自定义元素其实是封装在ShadowDOM里。attachShadow()办法承受一个蕴含mode属性的配置对象作为参数，mode 能够是 open 或者 closed，代表是否容许JavaScript操作这个节点。上面，咱们申明一个自定义元素类：

class MyElement extends HTMLElement {    constructor() {        // 首先调用super()        super();        const shadowRoot = this.attachShadow({mode= 'open'});          // 接下来，咱们能够为shadowRoot增加各种咱们想要的货色     }}

之后能够通过dom操作为shadowRoot增加节点（包含 style 、link 标签），这样就能够实现一个封装组件了。

模板内容

在自定义元素的代码中，咱们将html定义在字符串中，这不利于继续的保护。HTML5新增了template标签为 Web Components 的模板开发提供了便当。该标签内定义的内容浏览器并不会渲染，但能够通过dom获取。

咱们在页面上定义一个template标签，并放一个段落文字，这个标签并不会在页面上渲染

<template id="my-paragraph">  <p>My paragraph</p></template>

在自定义元素中应用：

customElements.define('my-element',  class extends HTMLElement {    constructor() {      super();      const content = document.getElementById('my-paragraph').content;      const shadowRoot = this.attachShadow({mode: 'open'})      shadowRoot.append(content)  }})
插槽

有时候咱们心愿用户可能定义局部模板的内容，让组件模板变得更加灵便。

Web Components 提供了slot元素，是 web 组件内的一个占位符（称作“插槽”）。插槽由其name属性标识，并且容许您在模板中定义占位符，当在标记中应用该元素时，该占位符能够填充所需的任何 HTML 标记片段。咱们把template标签里的内容改一下

<p><slot name="my-text">My default text</slot></p>

在注册自定义组件后，能够这么应用：

<my-element>  <span slot="my-text">Let's have some different text!</span></my-element>

通过设置slot属性，向组件模板插入自定义内容

到此，就是 Web Components 技术套的全部内容了。

最初

Web Components 并不是最近才呈现的，早在 2011 年 Google 就推出了 Web Components 的概念，不过也仅仅只是提出了这样一个概念，并没有去实现它。随着前端技术的倒退，Web Components 规范也逐步欠缺，尽管存在许多有余，然而起初呈现的的React、Vue、Angular等前端框架都受到了Web Components的启发。

Web Components 是一套原生的开发技术，可能实现跨端、跨框架、微服务的组件化开发，不受环境、框架技术的限度。目前很多大厂对这套技术进行了实际，市面上也呈现了很多 Web Components 库。例如：

  • omi
  • lit-element
  • Polymer
  • X-Tag

尽管如此，Web Components 仍然备受争议，想让便当原生的组件化开发，还须要大量的实际与优化。