代码速查

生命周期

    customElements.define('fancy-components', class extends HTMLElement {
      constructor () {
        super()
        // 相当于 Vue 的 setup
        console.log('先运行构造函数')
      }
      connectedCallback () {
        // 相当于 Vue 的 mounted
        console.log('再运行连接回调')
      }
      disconnectedCallback () {
        // 相当于 Vue 的 unmounted
        console.log('当删除组件时才会运行失联回调')
      }
      adoptedCallback () {
        // 当使用 document.adoptNode 后会触发该生命周期
        console.log('当使用 document.adoptNode 后会运行收养回调')
      }
    })

基础使用

    // 创建一个 <a-b-c> 的元素，名为 el
    const el = document.createElement('a-b-c')

    // 定义一个名为 <a-b-c> 的组件
    customElements.define('a-b-c', class extends HTMLElement {})

    // 获取 <a-b-c> 组件的构造函数
    customElements.get('a-b-c')

    // 升级我们之前创建的 el 元素
    customElements.upgrade(el)

    // 当 <a-b-c> 组件定义后
    customElements.whenDefined('a-b-c').then(
    () => { /* 当 <a-b-c> 组件定义后的回掉函数 */ }
    )

属性

  <fancy-components id="abc"></fancy-components>

  <script>
    const el = document.querySelector('fancy-components')
    const arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

    customElements.define('fancy-components', class extends HTMLElement {
      // 相当于 Vue 的 data
      static observedAttributes = ['id']
      // 也可以写成下面这样：
      // static get observedAttributes () { return ['id'] }

      // getter 和 setter 配合 attributeChangedCallback 打造属性特性联动同步
      get id () { return this.getAttribute('id') }
      set id (value) { this.setAttribute('id', value) }

      attributeChangedCallback (name, oldValue, newValue) {
        // 相当于 Vue 的 watch
        if (oldValue === newValue) return

        switch (name) {
          case 'id':
            console.log(`oldValue: ${oldValue}, newValue: ${newValue}`)
        }
      }
    })

    setInterval(() => el.id = arr[Math.round(Math.random() * 25)], 1000)
  </script>

特性

  <fancy-components id="abc"></fancy-components>

  <script>
    const el = document.querySelector('fancy-components')
    const arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

    customElements.define('fancy-components', class extends HTMLElement {
      // 相当于 Vue 的 data
      static observedAttributes = ['id']
      // 也可以写成下面这样：
      // static get observedAttributes () { return ['id'] }

      attributeChangedCallback (name, oldValue, newValue) {
        // 相当于 Vue 的 watch
        if (oldValue === newValue) return

        switch (name) {
          case 'id':
            console.log(`oldValue: ${oldValue}, newValue: ${newValue}`)
        }
      }
    })

    setInterval(() => el.id = arr[Math.round(Math.random() * 25)], 1000)
  </script>

继承

  <input is="our-input" />

  <script>
    customElements.define('our-input', class extends HTMLInputElement {
      constructor () {
        super()

        this.placeholder = '属于我们的输入框！'
        this.disabled = true
      }
    }, { extends: 'input' })
  </script>

Custom Elements 的意义

Web Components 标准非常重要的一个特性是，它使开发者能够将 HTML 页面的功能封装为 custom elements（自定义标签），而往常，开发者不得不写一大堆冗长、深层嵌套的标签来实现同样的页面功能。

Custom Elements 是网页组件化的基础，也是其核心。

Custom Elements 的分类

根据是否继承基础 HTML 元素，将 Custom Elements 分为两类。

Autonomous custom elements

是独立的元素，它不继承其他内建的 HTML 元素。你可以直接把它们写成HTML标签的形式，来在页面上使用。例如 <my-card>，或者是document.createElement("my-card")这样。

Customized built-in elements

继承自基本的HTML元素。在创建时，你必须指定所需扩展的元素，使用时，需要先写出基本的元素标签，并通过  is 属性指定custom element的名称。例如<p is="my-card">, 或者 document.createElement("p", { is: "my-card" })。

CustomElementRegistry 对象

我们对自定义标签的概念等相关知识已有了解，那在实际开发中到底怎么使用自定义标签呢？这里就需要介绍一下 Custom Elements 的重点对象——CustomElementRegistry 对象。

要获取它的实例，请使用  window.customElements 属性。它的主要作用有：

• 给页面注册一个自定义标签

• 获取已注册的 Custom Elements 的相关信息

我们来看一下 CustomElementRegistry 对象的相关方法：

可以看到， CustomElementRegistry 对象包含四个方法：

• CustomElementRegistry.define()

• CustomElementRegistry.get()

• CustomElementRegistry.upgrade()

• CustomElementRegistry.whenDefined()

以上就是前端Web Components之customElements速查表全部内容,感谢大家支持自学php网。