深度解读vue-resize的具体用法


Posted in Javascript onJuly 08, 2020

前言

作为一名优秀的前端来说,在平时的造火箭(拧螺丝)过程中,难免要遇到一个情况,就是当窗口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结构

深度解读vue-resize的具体用法

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

深度解读vue-resize的具体用法

再说一句

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

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

深度解读vue-resize的具体用法

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

深度解读vue-resize的具体用法

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

深度解读vue-resize的具体用法

结语

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

到此这篇关于深度解读vue-resize的具体用法的文章就介绍到这了,更多相关vue-resize解读内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
js检测用户输入密码强度
Oct 22 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
详解React 条件渲染
Jul 08 #Javascript
webpack5 联邦模块介绍详解
Jul 08 #Javascript
实例讲解React 组件
Jul 07 #Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 #Javascript
详解React 元素渲染
Jul 07 #Javascript
JS数据类型判断的几种常用方法
Jul 07 #Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 #Javascript
You might like
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
Cookie 小记
2010/04/01 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
跟老齐学Python之重回函数
2014/10/10 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
财务管理专业推荐信
2013/11/19 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
策划创业计划书
2014/02/06 职场文书
信息技术教学反思
2014/02/12 职场文书
安全宣传标语口号
2014/06/06 职场文书
意向书范本
2014/07/29 职场文书
村党建工作汇报材料
2014/11/02 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
中学图书馆工作总结
2015/08/11 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技