记录--你不知道的Js高级方法
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
前言
在Js中有一些比较冷门但是非常好用的方法，我在这里称之为高级方法，这些方法没有被广泛使用或多或少是因为存在一些兼容性的问题，不是所有的浏览器都读得懂的。这篇文章主要就是对这些方法做一个总结，有些方法在我们开发过程中有着重要的作用，我们一起来看一下吧。
getBoundingClientRect()
getBoundingClientRect() 是一个用于获取元素位置和尺寸信息的方法。它返回一个 DOMRect对象，其提供了元素的大小及其相对于视口的位置，其中包含了以下属性：
x：元素左边界相对于视口的 x 坐标。y：元素上边界相对于视口的 y 坐标。width：元素的宽度。height：元素的高度。top：元素上边界相对于视口顶部的距离。right：元素右边界相对于视口左侧的距离。bottom：元素下边界相对于视口顶部的距离。left：元素左边界相对于视口左侧的距离。
const box = document.getElementById('box');
const rect = box.getBoundingClientRect();
console.log(rect.x); // 元素左边界相对于视口的 x 坐标
console.log(rect.y); // 元素上边界相对于视口的 y 坐标
console.log(rect.width); // 元素的宽度
console.log(rect.height); // 元素的高度
console.log(rect.top); // 元素上边界相对于视口顶部的距离
console.log(rect.right); // 元素右边界相对于视口左侧的距离
console.log(rect.bottom); // 元素下边界相对于视口顶部的距离
console.log(rect.left); // 元素左边界相对于视口左侧的距离
为了更好地理解，我在页面上设置了一个容器，其对应属性看下图：
应用场景
这个方法通常用于需要获取元素在视口中的位置和尺寸信息的场景，比如实现拖拽、定位或响应式布局等，兼容性很好，一般用滚动事件比较多。
特殊场景会用上，比如你登录了淘宝的网页，当你下拉滑块的时候，下面的图片不会立即加载出来，有一个懒加载的效果。当上面一张图片没在可视区内时，就开始加载下面的图片。
下面代码就是判断一个容器是否出现在可视窗口内：
const box = document.getElementById('box')
window.onscroll = function () {//window.addEventListener('scroll',()=>{})
console.log(checkInView(box));
}
function checkInView(dom) {
const { top, left, bottom, right } = dom.getBoundingClientRect();
return top > 0 &&
left > 0 &&
bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
right <= (window.innerWidth ||
document.documentElement.clientWidth)
}
当容器在可视区域内就输出true，否则就是false。
intersectionObserver
IntersectionObserver 是一个构造函数，可以接收两个参数，第一个参数是一个回调函数，第二个参数是一个对象。这个方法用于观察元素相交情况，它可以异步地监听一个或多个目标元素与其祖先元素或视口之间的交叉状态。它提供了一种有效的方法来检测元素是否可见或进入视口。
用法
使用 IntersectionObserver 需要以下步骤：
- 创建一个
IntersectionObserver实例，传入一个回调函数和可选的配置对象。
const observer = new IntersectionObserver(callback, options);
const callback = (entries, observer) => {
// 处理交叉状态变化的回调函数
}; const options = {
// 可选配置
};
- 将要观察的目标元素添加到观察者中。
const target = document.querySelector('#targetElement');
observer.observe(target);
- 在回调函数中处理交叉状态的变化。
const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 元素进入视口
} else {
// 元素离开视口
}
});
};
entries 参数是一个包含每个目标元素交叉状态信息的数组。每个 entry 对象都有以下属性：
target：观察的目标元素。intersectionRatio：目标元素与视口的交叉比例，值在 0 到 1 之间。isIntersecting：目标元素是否与视口相交。intersectionRect：目标元素与视口的交叉区域的位置和尺寸信息。
options 对象是可选的配置，其中常用的配置选项包括：
root：指定观察器的根元素，默认为视口。rootMargin：设置根元素的外边距，用于扩大或缩小交叉区域。threshold：指定交叉比例的阈值，可以是单个数值或由多个数值组成的数组。
应用场景
IntersectionObserver 适用于实现懒加载、无限滚动、广告展示和可视化统计等场景，同样可以判断元素是否在某一个容器内，不会引起回流。
createNodeIterator()
createNodeIterator() 方法是 DOM API 中的一个方法，用于创建一个 NodeIterator 对象，可以用于遍历文档树中的一组 DOM 节点。
通俗一点来讲就是它可以遍历 DOM 结构，把 DOM 变成可遍历的。
比较偏的面试考点
这种方法算是一个比较偏的面试考点，面试官问你怎样实现遍历 DOM 结构？其实就可以用到这个方法。但是大多数程序员答不上来这个问题，因为我们在日常开发中这个方法用得极少。这个方法常在框架源码中体现。
应用
<body>
<div id="app">
<p>hello</p>
<div class="title">标题</div>
<div>
<div class="content">内容</div>
</div>
</div> <script>
const body = document.getElementsByTagName('body')[0]
const item = document.createNodeIterator(body)//让body变成可遍历的
let root = item.nextNode() // 下一层 while (root) {
console.log(root);
if (root.nodeType !== 3) {
root.setAttribute('data-index', 123)//给每个节点添加一个属性
}
root = item.nextNode()
}
</script>
</body>
上面代码成功遍历到了各个 DOM 结构：
并且在每个 DOM 节点上都添加了data-index = "123"。
getComputedStyle()
getComputedStyle()是一个可以获取当前元素所有最终使用的CSS属性值的方法。返回的是一个CSS样式声明对象。
这个方法有两个参数，第一个参数是你想要获取哪个元素的 CSS ，第二个参数是一个伪元素。
用法
<style>
#box {
width: 200px;
height: 200px;
background-color: cornflowerblue;
position: relative;
} #box::after {
content: "";
width: 50px;
height: 50px;
background: #000;
position: absolute;
top: 0;
left: 0;
}
</style> const box = document.getElementById('box')
const style = window.getComputedStyle(box, 'after') const height = style.getPropertyValue('height')
const width = style.getPropertyValue('width') console.log(style);
console.log(width, height);
上述代码输出结果为：
有一个 id 为 box 容器的 CSS 样式声明对象，以及伪元素的宽高。
requestAnimationFrame()
上面4种方法我们可能用得不是很多，但是requestAnimationFrame方法相对使用较多。requestAnimationFrame() 是一个用于在下一次浏览器重绘之前调用指定函数的方法，它是 HTML5 提供的 API。
与setInterval和setTimeout
requestAnimationFrame的调用频率通常为每秒60次。这意味着我们可以在每次重绘之前更新动画的状态，并确保动画流畅运行，而不会对浏览器的性能造成影响。
setInterval与setTimeout它可以让我们在指定的时间间隔内重复执行一个操作，不会考虑浏览器的重绘，而是按照指定的时间间隔执行回调函数，可能会被延迟执行，从而影响动画的流畅度。
效果对比
我们设置了两个容器，分别用requestAnimationFrame()方法和setTimeout方法进行平移效果，Js 代码如下所示：
let distance = 0
let box = document.getElementById('box')
let box2 = document.getElementById('box2') window.addEventListener('click', function () { requestAnimationFrame(function move() {
box.style.transform = `translateX(${distance++}px)`
requestAnimationFrame(move)//递归
}) setTimeout(function change() {
box2.style.transform = `translateX(${distance++}px)`
setTimeout(change, 17)
}, 17) })
效果图如下：
可能我们肉眼看得不是很清楚，但是确实下面的图形平移没有上面图形流畅，用setTimeout会有卡顿现象。
本文转载于:
https://juejin.cn/post/7242983917603405883
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
记录--你不知道的Js高级方法的更多相关文章
- 读JS高级——第五章-引用类型 _记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实用方法记录-js动态加载css、js脚本文件
js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...
- js实用方法记录-简单cookie操作
js实用方法记录-简单cookie操作 设置cookie:setCookie(名称,值,保存时间,保存域); 获取cookie:setCookie(名称); 移除cookie:setCookie(名称 ...
- js实用方法记录-指不定哪天就会用到的js方法
js实用方法记录-指不定哪天就会用到的js方法 常用或者不常用都有 判断是否在微信浏览器中 测试代码:isWeiXin()==false /** * 是否在微信中 */ function isWeix ...
- JS高级---构造函数通过原型添加方法，原型的作用: 共享数据, 节省内存空间
JS高级---构造函数,通过原型添加方法,原型的作用: 共享数据, 节省内存空间 构造函数 //构造函数 function Person(sex, age) { this.sex = sex; thi ...
- JS高级前端开发群加群说明及如何晋级
JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...
- 翻译连载 | 附录 A：Transducing（上）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 A：Transducing（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 你不知道的JS之 this 和对象原型（一）this 是什么
原文:你不知道的js系列 JavaScript 的 this 机制并没有那么复杂 为什么会有 this? 在如何使用 this 之前,我们要搞清楚一个问题,为什么要使用 this. 下面的代码尝试去 ...
- Ext.js高级组件
第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...
随机推荐
- Linux中如何查找特定的数据是否在目录或文件中
一个很简单的方式就是使用grep命令,grep命令是一个强大有效可靠并且很流行的命令行工具,用于查找对应的数据包含文件或者目录中在Linux环境中. 为了便于学习,我们准备了以下文件,具体想要查找以实 ...
- qwb2023落荒而逃版
前言 qwb2023 .12.15 被打废了,N1决赛和qwb,有一个pwn可以做的但是已经在做misc看都不看--无语了. Pyjail ! It's myFILTER !!!|SOLVED|N1n ...
- Sunnyui画曲线溢出错误
之前用sunnyui做展示数据库数据曲线的时候.偶然会报溢出错误,也不报错错误在哪,就是直接程序都跑不动了. 后面发现 设置曲线上下限的时候,当上下限一样的时候就会导致溢出错误.sunnyui的曲线也 ...
- NC51216 花店橱窗
题目链接 题目 题目描述 小q和他的老婆小z最近开了一家花店,他们准备把店里最好看的花都摆在橱窗里. 但是他们有很多花瓶,每个花瓶都具有各自的特点,因此,当各个花瓶中放入不同的花束时,会产生不同的美学 ...
- Python中保存字典类型数据到文件
三种方法: 1.在 Python 中使用 pickle 模块的 dump 函数将字典保存到文件中import pickle my_dict = { 'Apple': 4, 'Banana': 2, ' ...
- Swoole从入门到入土(9)——TCP服务器[协程风格]
上一篇,我们一起初步接触了协程.我相信只有一节的讨论,很多小伙伴对于"协程"与"线程"的区分可能还有点模糊.我们这里以两者的比较作为本篇开头,进行一番比较. 首 ...
- Swoole从入门到入土(3)——TCP服务器[基本配置项]
在这一节的开篇,让我们先解决上一节的"配置"话题.对于server对象,有很多配置项决定了服务端的行为,可以用set的函数进行配置的设置. 1.函数set:用于设置运行时的各项参数 ...
- 解决：This system is not registered to Red Hat Subscription Management
使用yum命令安装软件时候出现以下错误: This system is not registered to Red Hat Subscription Management.You can use su ...
- 如何基于three.js(webgl)引擎架构，实现3D密集架库房,3D档案室（3d机器人取档、机器人盘点、人工查档、设备巡检）
前言: 这是最好的时代,也是最坏的时代:是充满挑战的时代,也是充满机遇的时代.是科技飞速的时代,也是无限可能的时代. 近年来,人工智能(AI)技术的飞速发展已经席卷了全球,不断突破着技术边界,为各行 ...
- iptables临时控制某ip访问权限
iptables -A INPUT -p tcp -s {src_ip} --dport 80 -j ACCEPT iptables -A INPUT -p tcp -s {src_ip} --dpo ...