Web Component--01. 简介

Web Components 是什么？

Web Components是W3C定义的新标准，它给了前端开发者扩展浏览器标签的能力，可以自由的定制组件，更好的进行模块化开发，彻底解放了前端开发者的生产力。

Web Components 架构

Web Components在 W3C 规范中的发展有几个模块：

• 模板元素
• Html Import
• Shadow DOM
• 自定义元素
• 装饰器

目前前四个模块足以支撑 Web Component，装饰器还没有一个完整的规范。

template 模板元素

创建一个template的 html 标签，通过 javascript 获取节点的模板内容

<template id="test">
test template
</template>
<h1 id="message"></h1>
<script type="text/javascript">
    var template = document.getElementById("test");
    console.log(template.content);
</script>

模板默认不显示，需要激活模板，通过以下两种方法来激活节点

• 克隆节点

  var templateContent  = template.content;
  var activeNode = templateContent.cloneNode(true);
  document.body.appendChild(activeNode);
  

• 导入节点

  var templateContent  = template.content;
  var activeNode = document.importNode(templateContent,true);
  document.body.appendChild(activeNode);
  

Html Import

Html Import 可以将外部的 HTML 文档嵌入到当前文档中，提供很好的资源共享。
带有import属性的link 支持两个事件

• onload：文件成功引入页面会触发

• onerror： 文件加载失败会触发

  <script type="text/javascript">
  function importTest(message){
  console.log(message);
  }
  </script>

Shadow DOM

在 Web Component 规范出来之前，关于 HTML、CSS、Javascript 构建 Web 应用程序的程序的争论一直不断。主要质疑有几种:

• 样式覆盖：文档的样式会影响Web Component
• 脚本替换：文档的Javascript会覆盖Web Component的部分代码
• 重复的 ID：文档出现重复 ID 会导致解析异常

Shadow DOM的引入就是为了解决封装机制作用域的问题。
浏览器通常情况下是看不到Shadow DOM节点的，Google 开发工具可以帮我审查这些元素，需要做如下设定：

创建Shadow DOM ： 通过 createShadowRoot 函数对一个 DOM 元素（宿主元素）创建一个 Shadow DOM 子树

<div id="box"></div><!--容器-->
<template id="test">
<style>
:host h1{color:red};
</style>
<h1>Test</h1>
</template>
<script type="text/javascript">
    var box = document.getElementById("box");
    var shadowRoot = box.createShadowRoot();
    var template = document.getElementById("test");
    var templateContent  = template.content;
    var activeNode = document.importNode(templateContent,true);
    shadowRoot.appendChild(activeNode);
</script>

自定义元素

开发一个自定义元素需要五个步骤：

• 创建对象：

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

• 定义对象属性：

  //定义单个属性
  Object.defineProperty(objectProto,'title',{
      writable : true,
  })
  
  //定义单个多个
  Object.defineProperties(objectProto,{
      height: {writable : true},
      width: {writable : true}
  })
  

• 定义生命周期方法：

  //成功创建对象
  objectProto.createdCallback = function(){
      console.log('created');
  }
  //对象插入DOM中
  objectProto.attachedCallback = function(){
      console.log('attached');
  }
  

• 注册新元素

  document.registerElement('test',{
          prototype : objectProto
  });
  

输入24px 的 HelloWorld：

<my-name title="HelloWorld" fontsize="2"></my-name>
<script type="text/javascript">
    var objectProto = Object.create(HTMLElement.prototype);
    Object.defineProperties(objectProto,{
        title: {writable : true},
        fontsize: {writable : true}
    })
    objectProto.createdCallback = function(){
        this.innerText = this.attributes.title.value;
        this.style.fontSize = this.attributes.fontsize.value * 12 + 'px';
    }
    document.registerElement('my-name',{
        prototype : objectProto
    });
</script>

时钟应用

• test.html ：通过import方式加载Clock Component
• clock-elemect.html：负责倒计时的实现

test.html

<link rel="import" href="clock-element.html"/>
<digital-clock></digital-clock>

clock-elemect.html

<template id="clockTemplete">
    <style>
    :host::shadow .clock{
        display: inline-flex;
        justify-content: space-around;
        background:white;
        font-size: 8rem;
        box-shadow: 2px 2px 4px -1px grey;
        border: 1px solid green;
        font-family: sans-serif;
        width: 100%;
    }
    :host::shadow .clock .hour,
    :host::shadow .clock .minute,
    :host::shadow .clock .second{
        color: orange;
        padding: 1.5rem;
        text-shadow: 0px 2px black;
    }
    </style>
    <div class="clock">
        <div class="hour">HH:</div>
        <div class="minute">MM:</div>
        <div class="second">SS</div>
    </div>
</template>
<script type="text/javascript">
(function(){
    var selfDoucment = document.currentScript.ownerDocument;
    var objectProto = Object.create(HTMLElement.prototype);
    objectProto.createdCallback = function(){
        var shadow = this.createShadowRoot();
        var templateContent = selfDoucment.querySelector('#clockTemplete').content;
        var templateNode = selfDoucment.importNode(templateContent,true);
        shadow.appendChild(templateNode);
        var hourElement = shadow.querySelector('.hour');
        var minuteElement = shadow.querySelector('.minute');
        var secondElement = shadow.querySelector('.second');
        window.setInterval(function(){
            var date = new Date();
            hourElement.innerText = date.getHours()+':';
            minuteElement.innerText = date.getMinutes()+':';
            secondElement.innerText = date.getSeconds();
        },1000);
    };
    document.registerElement('digital-clock',{
        prototype : objectProto
    });
})();
</script>

来自为知笔记(Wiz)