vue-resize深度解读

8,921 阅读3分钟

前言

作为一名优秀的前端来说,在平时的造火箭(拧螺丝)过程中,难免要遇到一个情况,就是当窗口resize的时候,我们要进行监听,常见的方案就是element.addEventListener("resize", cb)

但是对于切过五彩斑斓的黑的你来说,肯定也知道,如果在短时间内多次resize窗口大小,那么我们这个的cb就会被调用多次,这样来说,性能太差了,这时我们会根据我们的业务需要,添加节流或者防抖,但这真的完美了吗

首先,我们要自己手动添加监听函数,其次注意性能问题,包括上面提到的防抖节流,还有在不需要的时候卸载监听函数,最后一个点就是,我们要在我们的元素上监听,或许这里有人说,又要马儿跑又让马儿不吃草,你想怎样,别急,接下来,我们就介绍vue-resize这个库

初步了解vue-resize

这个库是我在使用vue-lazyload的时候偶然发现的,因为里面就是用了vue-resize来进行resize事件的监听,使用方法也很简单,在position不为static的元素下面使用这个component就可以了

<template>
  <div class="demo">
    <h1>Hello world!</h1>
    <resize-observer @notify="handleResize" />
  </div>
</template>

<script>
export default {
  methods: {
    handleResize () {
      console.log('resized')
    }
  }
}
</script>

<style scoped>
.demo {
  position: relative;
}
</style>

到这里或许还有人说有什么神奇地方,我们这里看看下图生成的dom结构

其中class为resized是我们要监听的元素,class为resize-observer是组件生成的dom,但是我们的resize监听不是挂载在上面,是里面的object的吗,也不是,而是在object里面的window里面,有点类似于iframe,这样做有什么好处呢,相当于我们把resize的监听放到一个sandbox里面,不受外层的干扰,而对于上层来说,我只需要监听resize就好了,而不用担心它被篡改

再说一句

基本上我们已经知道vue-resize带来的好处,沙箱保护,全自动卸载,对于使用者来说,唯一的要求,就是元素的position不为static,这个库远不止这点干货,毕竟作者是vue team里面的。

首先我们可以看到,这个组件添加resize-observer,它的tabindex 为-1,这意味着,tab键不会调到这个元素上

同时我们看下它的样式,scoped和宽度高度跟父元素一样没什么好说的了,我们需要注意的是,z-index为-1,background-color: transparent;pointer-events: none;opacity:0,基本把各种可能的结果都考虑进去了

然后,是object元素的创建,aria-hidden为true和tabindex为-1,可以说对ARIA11的处理,真的很细节

结语

可以看出,小小的resize还有这么大的学问在里面,同时对于细节的处理真的很好,路漫漫其修远兮,总有一天,希望会切出五光十色的白