JavaScript API ResizeObserver使用示例

目录
  • 写在前面
  • API介绍
  • 浏览器兼容性
  • 用法
    • unobserve()
    • disconnect()

写在前面

今天在看同事代码的时候看见这个API，出于好奇就去了解了一下。

这是一个实验中的功能 此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。——来自MDN的提醒

API介绍

众所周知window.resize事件能帮我们监听窗口大小的变化。但是reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。

换句话说，window.resize事件通常是浪费的，因为它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。

如果我们只想监听某个元素的变化的话，这种操作就很浪费性能了。

而ResizeObserver API就可以帮助我们：监听一个DOM节点的变化，这种变化包括但不仅限于：

  • 某个节点的出现和隐藏
  • 某个节点的大小变化

浏览器兼容性

这是JavaScript一个极其新的API，所以在兼容方面还不是很好。

顺便给大家安利一个工具——Can I use，用于查询API在各个浏览器的兼容性

用法

ResizeObserver是个构造函数。在使用new关键字调用构造函数，返回实例对象时，需要传入一个回调函数，这个回调用于监听实例对象某个DOM节点的变化

// HTML
<div class="wrapper" ref="wrapper"></div>
// css
.wrapper {
  height: 500px;
  background-color: blueviolet;
}
// js
 mounted() {
    const resizeObserver = new ResizeObserver(entries => {
      console.log("我的resize变化啦");
      // console.log(entries);
    });
}

效果展示：

另外我们可以给回调函数添加一个参数，用来获取到该元素的一些信息

然后，实例对象myObserver方法除了有observe方法之外，还有disconnect方法和unobserve方法。

unobserve()

取消监听某个DOM节点。比如说想在四秒后取消监听

setTimeout(() => {
  resizeObserver.unobserve(this.$refs.wrapper);
}, 4000);

disconnect()

取消对所有节点的监听。比如说想在四秒后取消监听所有节点

setTimeout(() => {
  resizeObserver.disconnect(this.$refs.wrapper);
}, 4000);

取消监听效果展示：

参考

https://www.jb51.net/article/255898.htm

https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

以上就是JavaScript API ResizeObserver使用示例的详细内容，更多关于JavaScript API ResizeObserver的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript接入百度地图API的方法步骤

    JavaScript接入百度地图API的方法步骤

    目录 一.百度地图API接入 二.在HTML中使用百度地图API 1.在html中引入百度地图js文件 2.在网页中定义一个DIV用于显示地图 3.在网页中显示地图 4.添加可选控件 5.定位功能 6.添加地图标记 7.给地图标记添加点击事件 8.添加信息窗口 9.路径规划 10.正逆地址解析 一.百度地图API接入 1.搜索百度地图开发平台 2.注册百度账号 3.登陆并申请成为开发者 4.在百度地图开发平台的首页选择控制台,在控制台中创建应用 创建好应用以后就能在控制台我的应用中看到这个应用,

  • JavaScript嵌入百度地图API的最详细方法

    JavaScript嵌入百度地图API的最详细方法

    先看效果图 一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 1.打开百度地图开放平台 打开网址:http://lbsyun.baidu.com/ 找到首页导航栏的 开发文档 2.然后找到 开发文档 下面的 Web开发 中的 JavaScript API 并打开 打开之后找到 开发指南 并打开,然后找到账号和获取密钥并打开 3.然后进行申请账号 和 申请成为百度开发者 的操作 这过程中需要邮箱进行验证 创建账号完成之后 打开 获取服务密钥(AK) 应用类型选择 浏览器端 4

  • JS如何使用剪贴板操作Clipboard API

    JS如何使用剪贴板操作Clipboard API

    一.Document.execCommand() 方法 Document.execCommand()是操作剪贴板的传统方法,各种浏览器都支持. 它支持复制.剪切和粘贴这三个操作. document.execCommand('copy')(复制) document.execCommand('cut')(剪切) document.execCommand('paste')(粘贴) (1)复制操作 复制时,先选中文本,然后调用document.execCommand('copy'),选中的文本就会进入剪

  • ResizeObserver API使用示例详解

    ResizeObserver API使用示例详解

    目录 API介绍 浏览器兼容性 用法 总结 API介绍 当我们需要知道一个元素的大小变化或者屏幕横竖屏时,我们需要监听window.resize事件或者window.orientationchange方法.由于reize事件会在一秒内触发将近60次,所以很容易在改变窗口大小时导致性能问题.换句话说,window.resize事件通常是浪费的,因为它会监听每个元素的大小变化(只有window对象才有resize事件),而不是具体到某个元素的变化.如果我们只想监听某个元素的变化的话,这种操作就很浪费

  • JavaScript API ResizeObserver使用示例

    JavaScript API ResizeObserver使用示例

    目录 写在前面 API介绍 浏览器兼容性 用法 unobserve() disconnect() 写在前面 今天在看同事代码的时候看见这个API,出于好奇就去了解了一下. 这是一个实验中的功能 此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.——来自MDN的提醒 API介绍 众所周知window.resize事件能帮我们监听窗口大小的变化.但是reize事件会在一

  • PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)

    PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG. PhantomJS 可以用于 页面自动化 , 网络监测 , 网页截屏 ,以及 无界面测试 等. PhantomJs官网:http://phantomjs.org/ GitHub:https://github.com/ariya/phantomjs/wiki/Quick

  • 浅谈关于JavaScript API设计的一些建议和准则

    浅谈关于JavaScript API设计的一些建议和准则

    设计是一个很普遍的概念,一般是可以理解为为即将做的某件事先形成一个计划或框架. (牛津英语词典)中,设计是一种将艺术,体系,硬件或者更多的东西编织到一块的主线.软件设计,特别是作为软件设计的次类的API设计,也是一样的.但是API设计常常很少关注软件发展,因为为其他程序员写代码的重要性要次于应用UI设计和最终用户体验. 但是API设计,作为我们自己写的库中提供的公共接口,能够向调用我们代码的开发者表现出我们库的一些特点和功能,所以API设计和UI设计一样重要.事实上,两者都是为应用可以提供更好的

  • 前端 javascript 实现文件下载的示例

    在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 href 属性上的链接.示例: <a href="https://www.baidu.com" rel="external nofollow" download="baidu.html">下载</a> 1. 前端 js 下载实现与示例 通过 javascript 动态创建一个包含 download 属性的 a

  • Selenium执行JavaScript脚本的方法示例

    Selenium执行JavaScript脚本的方法示例

    JavaScript是运行在客户端(浏览器)和服务器端的脚本语言,允许将静态网页转换为交互式网页.可以通过 Python Selenium WebDriver 执行 JavaScript 语句,在Web页面中进行js交互.那么js能做的事,Selenium应该大部分也能做.WebDriver是模拟终端用户的交互,所以就不能点击不可见的元素,有时可见元素也不能点击.在这些情况下,我们就可以通过WebDriver 执行JavaScript来点击或者执行页面元素.本文将介绍如何使用 WebDriver

  • React Hooks钩子中API的使用示例分析

    目录 hooks是什么 Hooks的作用 使用Hooks组件前后开发模式的对比 Hooks使用策略 为什么要有Hooks useState useEffect使用 useEffect依赖项 使用情景 useMemo使用 useMemo缓存组件方式 useMemo和useEffect的区别 useCallback使用 useContext使用 useRef使用 为什么在函数组件中无法使用ref 如何在类组件中使用ref属性 自定义hooks hooks是什么 hooks理解字面意思就是钩子,是一些

  • Google Maps API地图应用示例分享

    Google Maps API地图应用示例分享

    效果(新版Firefox中测试): 代码: <!DOCTYPE><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Google Map</title> <script type="text/javascript" src="http://

  • ABP框架中导航菜单的使用及JavaScript API获取菜单的方法

    每一个WEB应用程序都有导航菜单,Abp也为用户提供了通用的创建和显示菜单方式. 创建菜单 一个应用程序可能包含不同的模块,而每个模块都可能有它自己的菜单项.在Abp中,需要创建一个派生自NavigationProvider的类来定义一个菜单项. 假设我们有一个这样的主菜单: Tasks Reports Administration 1 User Management 2 Role Management 由上可知,Administration菜单项有两个子菜单项.对应的生成方法如下: publi

  • 分享javascript计算时间差的示例代码

    分享javascript计算时间差的示例代码

    在实际应用中,需要计算两个时间点之间的差距,一般来说都是计算当前时间和一个指定时间点之间的差距,并且有时候需要精确到天.小时.分钟和秒,下面就简单介绍一下如何实现此效果. 效果图: 距离新年: 代码如下: <html> <head> <title>javascript计算时间差</title> <style type="text/css"> #thenceThen { font-size:2em; } </style&g

  • FCKeditor提供了一个完整的JavaScript API

    FCKeditor offers a complete JavaScript API so you can interact with it once the editor is loaded and running. FCKeditor提供了一个完整的JavaScript API(Application Public Interface),你可以利用这些API来处理FCK编辑器,只要它被加载完成或在正在运行中. Retrieving an editor instanceOnce loaded,

随机推荐