DataV 全屏容器组件源码解析

<div id="dv-full-screen-container" :ref="ref">
    <template v-if="ready">
      <slot></slot>
    </template>
</div>

mounted () {
  const { autoResizeMixinInit } = this
  autoResizeMixinInit()
},

methods: {
    async autoResizeMixinInit () {
      const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this
      await initWH(false)
      getDebounceInitWHFun()
      bindDomResizeCallback()
      if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
    },
}

    // 初始化宽高
    initWH (resize = true) {
      const { $nextTick, $refs, ref, onResize } = this
      return new Promise(resolve => {
        $nextTick(_ => {
          const dom = this.dom = $refs[ref]
          this.width = dom ? dom.clientWidth : 0
          this.height = dom ? dom.clientHeight : 0
          if (!dom) { 
            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
          } else if (!this.width || !this.height) {
            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
          }
          if (typeof onResize === 'function' && resize) onResize()
          resolve()
        })
      })
    },

    onResize () {
      const { setAppScale } = this
      setAppScale()
    }

getDebounceInitWHFun () {
      const { initWH } = this
      this.debounceInitWHFun = debounce(100, initWH)
    },

    // 监听dom元素变化
    bindDomResizeCallback () {
      const { dom, debounceInitWHFun } = this
      this.domObserver = observerDomResize(dom, debounceInitWHFun)
      window.addEventListener('resize', debounceInitWHFun)
    },

export function observerDomResize (dom, callback) {
  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
  const observer = new MutationObserver(callback)
  observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
  return observer
}

    afterAutoResizeMixinInit () {
      const { initConfig, setAppScale } = this
      initConfig()
      setAppScale()
      this.ready = true
    },

    initConfig () {
      const { dom } = this
      // 当前屏幕分辨率
      const { width, height } = screen
      this.allWidth = width
      dom.style.width = `${width}px`
      dom.style.height = `${height}px`
    },

    setAppScale () {
      const { allWidth, dom } = this
      const currentWidth = document.body.clientWidth
      dom.style.transform = `scale(${currentWidth / allWidth})`
    },

  beforeDestroy () {
    const { unbindDomResizeCallback } = this
    unbindDomResizeCallback()
  }

    unbindDomResizeCallback () {
      let { domObserver, debounceInitWHFun } = this
      if (!domObserver) return
      domObserver.disconnect()
      domObserver.takeRecords()
      domObserver = null
      window.removeEventListener('resize', debounceInitWHFun)
    }