前言

作為一名優(yōu)秀的前端來說，在平時(shí)的造火箭（擰螺絲）過程中，難免要遇到一個(gè)情況，就是當(dāng)窗口resize的時(shí)候，我們要進(jìn)行監(jiān)聽，常見的方案就是 element.addEventListener("resize", cb)

但是對(duì)于切過五彩斑斕的黑的你來說，肯定也知道，如果在短時(shí)間內(nèi)多次resize窗口大小，那么我們這個(gè)的cb就會(huì)被調(diào)用多次，這樣來說，性能太差了，這時(shí)我們會(huì)根據(jù)我們的業(yè)務(wù)需要，添加節(jié)流或者防抖，但這真的完美了嗎

首先，我們要自己手動(dòng)添加監(jiān)聽函數(shù)，其次注意性能問題，包括上面提到的防抖節(jié)流，還有在不需要的時(shí)候卸載監(jiān)聽函數(shù)，最后一個(gè)點(diǎn)就是，我們要在我們的元素上監(jiān)聽，或許這里有人說，又要馬兒跑又讓馬兒不吃草，你想怎樣，別急，接下來，我們就介紹 vue-resize 這個(gè)庫

初步了解vue-resize

這個(gè)庫是我在使用vue-lazyload的時(shí)候偶然發(fā)現(xiàn)的，因?yàn)槔锩婢褪怯昧?vue-resize 來進(jìn)行resize事件的監(jiān)聽，使用方法也很簡(jiǎn)單,在position不為static的元素下面使用這個(gè)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結(jié)構(gòu)

其中id為resized是我們要監(jiān)聽的元素，class為resize-observer是組件生成的dom，但是我們的resize監(jiān)聽不是掛載在上面，是里面的object的嗎，也不是，而是在object里面的window里面，有點(diǎn)類似于iframe，這樣做有什么好處呢，相當(dāng)于我們把resize的監(jiān)聽放到一個(gè)sandbox里面，不受外層的干擾，而對(duì)于上層來說，我只需要監(jiān)聽resize就好了，而不用擔(dān)心它被篡改

再說一句

基本上我們已經(jīng)知道vue-resize帶來的好處，沙箱保護(hù)，全自動(dòng)卸載，對(duì)于使用者來說，唯一的要求，就是元素的position不為static，這個(gè)庫遠(yuǎn)不止這點(diǎn)干貨，畢竟作者是vue team里面的。

首先我們可以看到，這個(gè)組件添加resize-observer，它的tabindex 為-1，這意味著，tab鍵不會(huì)調(diào)到這個(gè)元素上

同時(shí)我們看下它的樣式，scoped和寬度高度跟父元素一樣沒什么好說的了，我們需要注意的是,z-index為-1，background-color: transparent;pointer-events: none;opacity:0，基本把各種可能的結(jié)果都考慮進(jìn)去了

然后，是object元素的創(chuàng)建，aria-hidden為true和tabindex為-1，可以說對(duì)ARIA11的處理，真的很細(xì)節(jié)

結(jié)語

可以看出，小小的resize還有這么大的學(xué)問在里面，同時(shí)對(duì)于細(xì)節(jié)的處理真的很好，路漫漫其修遠(yuǎn)兮，總有一天，希望會(huì)切出五光十色的白

到此這篇關(guān)于深度解讀vue-resize的具體用法的文章就介紹到這了,更多相關(guān)vue-resize解讀內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論