Web Components（续）

概述

之前我们介绍了Web Components的基本概念，现在我们给出一个使用Web Components的实例代码，并且对组件化进行一些思考。记录下来，供以后开发时参考，相信对其他人也有用。

实例代码

html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pop-up info box — web components</title>
  </head>
  <body>
    <h1>Pop-up info widget - web components</h1>

    <form>
      <div>
        <label for="cvc">Enter your CVC <popup-info img="img/alt.png" data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></label>
        <input type="text" id="cvc">
      </div>
    </form>

    <script src="main.js"></script>

  </body>
</html>

js:

// Create a class for the element
class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Create a shadow root
    const shadow = this.attachShadow({mode: 'open'});

    // Create spans
    const wrapper = document.createElement('span');
    wrapper.setAttribute('class', 'wrapper');

    const icon = document.createElement('span');
    icon.setAttribute('class', 'icon');
    icon.setAttribute('tabindex', 0);

    const info = document.createElement('span');
    info.setAttribute('class', 'info');

    // Take attribute content and put it inside the info span
    const text = this.getAttribute('data-text');
    info.textContent = text;

    // Insert icon
    let imgUrl;
    if(this.hasAttribute('img')) {
      imgUrl = this.getAttribute('img');
    } else {
      imgUrl = 'img/default.png';
    }

    const img = document.createElement('img');
    img.src = imgUrl;
    icon.appendChild(img);

    // Create some CSS to apply to the shadow dom
    const style = document.createElement('style');
    console.log(style.isConnected);

    style.textContent = `
      .wrapper {
        position: relative;
      }
      .info {
        font-size: 0.8rem;
        width: 200px;
        display: inline-block;
        border: 1px solid black;
        padding: 10px;
        background: white;
        border-radius: 10px;
        opacity: 0;
        transition: 0.6s all;
        position: absolute;
        bottom: 20px;
        left: 10px;
        z-index: 3;
      }
      img {
        width: 1.2rem;
      }
      .icon:hover + .info, .icon:focus + .info {
        opacity: 1;
      }
    `;

    // Attach the created elements to the shadow dom
    shadow.appendChild(style);
    console.log(style.isConnected);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(info);
  }
}

// Define the new element
customElements.define('popup-info', PopUpInfo);

组件化思考

在MV*架构出现之前，组件主要分为两种：一种是狭义上的组件，比如UI组件；另一种是广义上的组件，即带有业务含义和数据的UI组件组合。

对于UI组件，一定有这3个部分：结构、样式和交互行为，分别对应HTML，CSS和Js。

在js中，我们利用class对组件进行封装，然后在使用的时候，我们只需实例化一个组件对象然后传入必要的参数即可。

对于组件的js结构，有以下3个标准：

基本的封装性。我们利用class进行封装。
简单的生命周期呈现。比如constructor和destroy。
明确的数据流动。这里的数据指的参数，一旦确定参数的值，就能够进行渲染。

上面的组件化会遇到一个问题，就是js里面存在大量的show，hide和toggle等方法，当逻辑一旦复杂，就会出现大量的DOM操作，严重影响性能，也加大了维护的难度。

这个时候就出现了模板引擎，它使我们在js里面拼装html代码，然后一起插入到html里面去，并且把数据独立出来，也解决了数据与界面耦合的问题。

再然后就是Web Components和MV*的组件化，他们开辟了新的组件建立方式~