网站地图    收藏   

主页 > 前端 > javascript > webapi >

前端Web Components之customElements速查表

来源:未知    时间:2024-05-14 22:16 作者:小飞侠 阅读:

[导读] 代码速查 生命周期 customElements.define(fancy-components,classextendsHTMLElement{constructor(){super()//相当于Vue的setupconsole.log(先运行构造函数)}connectedCallback(){//相当于Vue的mountedconsole.log(再运行连接回调...

代码速查

生命周期

    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 对象的相关方法:


image-20220207214934295

image-20220207214934295


可以看到, CustomElementRegistry 对象包含四个方法:

  • CustomElementRegistry.define()

  • CustomElementRegistry.get()

  • CustomElementRegistry.upgrade()

  • CustomElementRegistry.whenDefined()


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



最新评论

添加评论

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论