DataV全屏容器组件源码分析

这篇文章主要介绍“DataV全屏容器组件源码分析”，在日常操作中，相信很多人在DataV全屏容器组件源码分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”DataV全屏容器组件源码分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

引言

数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。

源码阅读（vue2版本）

它的源码位置

看下它的DOM结构，很简单

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

源码分析

接下来重点看下它的JS实现，它的代码中混入了autoResize.js，所以我们需要两个文件一起看，不然会对突然出现的变量很奇怪。（如果觉得分开不便于阅读，其实我们可以把它合在一起来阅读，是一样的）

梳理下它的执行逻辑：

第1步、mounted（组件挂载时，这一时期可对dom进行操作）

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

第2步、autoResizeMixinInit函数

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

这其中调用了几个函数，我们来看看这些函数的作用。

1、initWH函数

    // 初始化宽高    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()        })      })    },

这个函数的作用很简单，就是在DOM渲染成功后，获取这个组件dom的宽高，返回一个Promise异步函数，作用就是：保证这个dom已经渲染好了，再去执行其他函数。

1.1、onResize

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

resize为true，即窗口大小变化、dom的style改变时要重新设置dom的缩放比例。

2、getDebounceInitWHFun

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

获取一个经过防抖的initWH函数。即debounceInitWHFun。

3、bindDomResizeCallback

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

很重要的一步，其中使用了observerDomResize来对这个组件dom进行监听。

需要监听的DOM变化：

• 窗口大小改变时触发的事件

• dom的样式改变时触发

第一个直接使用window监听resize事件即可。

第二个对dom元素的监听，我们就需要使用MutationObserver来做了。

MutationObserver用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver事件。

封装一个observerDomResize函数来对dom的style属性变化进行监听

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}

• attributes：属性的变动

• attributeFilter：表示需要观察的特定属性

• attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。

4、afterAutoResizeMixinInit

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

组件dom节点渲染出来后，设置ready为true，再渲染插槽中的DOM元素。

1、initConfig

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

作用：

• 获取当前设备屏幕的分辨率

• 将这个分辨率宽高设置为组件DOM的宽高

2、setAppScale

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

它的作用是改变当前DOM的缩放比率。

缩放比率 = 当前窗口的可视宽度 / 当前设备的屏幕分辨率（宽度）

第3步、beforeDestroy（组件卸载时）

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

我们之前对于dom的style属性和window的resize都做了监听，所以当我们组件卸载时这些监听事件也需要移除，如果不移除，那么到其他页面，做这些操作，监听事件仍然存在，但其实我们已经不需要再对他监听了，反而会造成性能浪费。

1、unbindDomResizeCallback

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

disconnect方法用来停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器。

takeRecords用来清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。

到此，关于“DataV全屏容器组件源码分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！