前言
作为一名优秀的前端来说，在平时的造火箭（拧螺丝）过程中，难免要遇到一个情况，就是当窗口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结构
其中id为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还有这么大的学问在里面，同时对于细节的处理真的很好，路漫漫其修远兮，总有一天，希望会切出五光十色的白
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！