web components的一些知识点

terrence386

发布于 2022-07-14 20:52:22

4580

发布于 2022-07-14 20:52:22

文章被收录于专栏：JavaScript高级程序设计

我重新开始学习高等数学了，同时花5元买了本二手书《电路》，目标是今年能看懂电路图

前情回顾

上篇文章大致说了一下用web-components重新封装UI库的思路，并附了一个demo，代码写的垃圾，无所谓了，重要的是有思路才行。这次大致对web components这个东西，简单的做下介绍。

web components 概念

有时候复杂的HTML及相关的样式会在多个地方用到，基于Vue及React我们可以将这个重复的内容封装成一个组件，web components也是为了实现同样的功能，但是它不依赖于现有的三大框架，直接通过原生HTML标签实现。

官方解释如下：

# Web Components 是一套不同的技术，允许您创建可重
# 用的定制元素它们的功能封装在您的代码之外）
# 并且在您的web应用中使用它们。

实现web components的技术点

自定义元素这个技术点可以让开发者通过JS的API直接自定义HTML标签,实现方式有两种：一是使用customElements.define('user-profile')，定义的元素名需要用连字符连接。如：

// 定义元素 user-profile 
customElements.define('user-profile')
// 使用
<user-profile></user-profile>

二是可以使用类生成，如：

class AppLayout extends HTMLElement {
  constructor() {
      super();
        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.innerHTML = `
        ${layoutStyle.layout}
        <slot></slot>
        `
    }
    // custom element首次被插入到文档DOM节点
    // 上时被调用
    connectedCallback() {}
    // 属性发生变化时触发
    attributeChangedCallback (name, oldValue, newValue) {   }
    // 当 custom element从文档DOM中删除时，被调用。
    disconnectedCallback(){}
    // 当 custom element被移动到新的文档时，被调用。
    adoptedCallback(){}
}

connectedCallback,attributeChangedCallback,disconnectedCallback,adoptedCallback是生命周期函数。

shadow Dom如果写过小程序的组件，那么shadow Dom这个概念应该不陌生，可以理解它是一段隐藏起来的Dom片段，其目的是为了封装结构，样式，和行为。同时起到了隔离的作用。

shadow dom 相关的方法有个 attachShadow({mode: 'open'})用来将一个 shadow root 附加到任何一个元素上。它接受一个配置对象作为参数，该对象有一个 mode 属性，值可以是 open 或者 closed，open表示可以通过js方法获取shodow dom，如：

import layoutStyle from './style'
class AppLayout extends HTMLElement {
  constructor() {
    super();
  // open
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = `
        ${layoutStyle.layout}
        <slot></slot>
        `
    }

    connectedCallback() {   }

    attributeChangedCallback (name, oldValue, newValue) {
       
    }
}

/***
 html 中
  <app-layout id="layout"></app-layout>
  let test = document.getElementById('layout');
  test.shadowRoot();
  这里会打印一些shadow dom 节点
  。。。
***/

HTML模板写过Vue的同学都用过template和slot标签，tamplate元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript实例化。slot是web component技术套件的一部分，是Web组件内的一个占位符。

如何写一个web components 组件

上面的用到的AppLayout就是一个组件。它继承了HTMLElement对象，引入了自己的样式，同时提供了<slot>来扩展内容。其样式内容入下：

const layout = `
<style>
    :host{
        display:flex;
        flex-direction: column;
        height:100%;
        background: #f0f2f5;
    }
    ::slotted(app-layout.inner){
        flex-direction: row;
    }
    ::slotted(app-content){
        height:100%;
    }
    ::slotted(app-sider){
        width:200px;
        flex-direction:column;
    }
    ::slotted(app-footer){
        width:100%;
        height:64px;
        background:#fff;
    }
</style>
`

有兴趣的同学可以自己去查一下这方面的资料