记录--你不知道的Js高级方法

这篇具有很好参考价值的文章主要介绍了记录--你不知道的Js高级方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--你不知道的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);     // 元素左边界相对于视口左侧的距离

为了更好地理解,我在页面上设置了一个容器,其对应属性看下图:

记录--你不知道的Js高级方法

应用场景

这个方法通常用于需要获取元素在视口中的位置和尺寸信息的场景,比如实现拖拽、定位或响应式布局等,兼容性很好,一般用滚动事件比较多。

特殊场景会用上,比如你登录了淘宝的网页,当你下拉滑块的时候,下面的图片不会立即加载出来,有一个懒加载的效果。当上面一张图片没在可视区内时,就开始加载下面的图片。

下面代码就是判断一个容器是否出现在可视窗口内:

 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 需要以下步骤:

  1. 创建一个 IntersectionObserver 实例,传入一个回调函数和可选的配置对象。
const observer = new IntersectionObserver(callback, options);
const callback = (entries, observer) => {
  // 处理交叉状态变化的回调函数
};

const options = {
  // 可选配置
};
  1. 将要观察的目标元素添加到观察者中。
const target = document.querySelector('#targetElement');
observer.observe(target);
  1. 在回调函数中处理交叉状态的变化。
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 结构:

记录--你不知道的Js高级方法

并且在每个 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);

上述代码输出结果为:

记录--你不知道的Js高级方法

 

有一个 id 为 box 容器的 CSS 样式声明对象,以及伪元素的宽高。

requestAnimationFrame()

上面4种方法我们可能用得不是很多,但是requestAnimationFrame方法相对使用较多。requestAnimationFrame() 是一个用于在下一次浏览器重绘之前调用指定函数的方法,它是 HTML5 提供的 API。

与setInterval和setTimeout

requestAnimationFrame的调用频率通常为每秒60次。这意味着我们可以在每次重绘之前更新动画的状态,并确保动画流畅运行,而不会对浏览器的性能造成影响。

setIntervalsetTimeout它可以让我们在指定的时间间隔内重复执行一个操作,不会考虑浏览器的重绘,而是按照指定的时间间隔执行回调函数,可能会被延迟执行,从而影响动画的流畅度。

效果对比

我们设置了两个容器,分别用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)

        })

效果图如下:

记录--你不知道的Js高级方法

可能我们肉眼看得不是很清楚,但是确实下面的图形平移没有上面图形流畅,用setTimeout会有卡顿现象。

本文转载于:

https://juejin.cn/post/7242983917603405883

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--你不知道的Js高级方法文章来源地址https://www.toymoban.com/news/detail-609745.html

到了这里,关于记录--你不知道的Js高级方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 免费使用微软Azure进行文字转语音!分享三个方法给大家!

    作为一个短视频制作的爱好者,使用了非常多的文字转语音工具,其中最接近真人发声的还是微软的文字转语音工具,这也是目前非常多的自媒体制作者在使用的文字转语音工具,目前有21种发声角色可以选择,而且可以自己挑整语速以及音调等功能,所以今天就给大家分享

    2024年02月01日
    浏览(53)
  • cajviewer怎么转换成pdf格式,分享几个方法给大家!

    CAJViewer是一款常用的文献阅读软件,它主要用于打开和阅读中国知网等数据库中的CAJ格式文件。然而,有时候我们可能需要将这些CAJ文件转换为PDF格式,以便更方便地与他人分享或者进行打印。本文将介绍两到三种将CAJViewer文件转换为PDF格式的方法,其中之一是使用记灵在线

    2024年02月08日
    浏览(102)
  • 计算机专业研究方向相关论文查找方法,分享给大家,实测有用。

     经过一段时间对机器学习、深度学习基础课程的理解和学习,现在开始进行论文学习,但在学习过程中,发现如果没有一个好的论文文献检索方法,去找一篇文献是很难的,而这个工作也会花费大量不必要的时间,现总结一些常规但有用的论文查找方法,分享给大家。  可

    2024年02月07日
    浏览(43)
  • 你不知道的 ES2023

    6 月 27 日 ECMA 大会批准了 ECMAScript 2023 (es14)规范,意味着新的一些语法将正式成为标准。下面来看看 ECMAScript 2023 有哪些值得我们关注的新特性。 具体相关提案原文详情可以跳转:已完成提案 •从后往前查找数组 •Hashbang 语法 •Symbol 类型作为 WeakMap 类型的键 •不改变原数组

    2024年02月15日
    浏览(62)
  • 如何把歌曲里的伴奏音乐提取出来,分享几个方法给大家!

    对于一首歌,我们都知道,它有两部分组成:背景音乐+人声。这两者合在一起,便是我们经常听的歌。部分用户想要直接获取歌曲伴奏,那么可以在UU伴奏网上下载。 操作方法比较简单,直接搜索想要的歌曲名称就可以了。 只不过免费的伴奏极少,大部分都是需要U币(钱钱

    2024年02月08日
    浏览(60)
  • 你不知道的自动装箱和拆箱

    “改天是明天,下次是每一次,以后是以后的每一天” 装箱就是自动将基本数据类型转换为包装器类型(int–Integer);调用方法:Integer的valueOf(int) 方法 拆箱就是自动将包装器类型转换为基本数据类型(Integer–int);调用方法:Integer的intValue方法 在Java SE5之前,如果要生成一个数值为

    2024年02月02日
    浏览(42)
  • 你不知道的AI绘画变现方式

    🏆 文章目标:学习AI绘画变现方式 🍀 入门篇:你不知道的AI绘画变现方式 ✅ 创作者:熊猫Jay ✨ 个人公众号: 熊猫Jay字节之旅 (文末有链接) 🍁 展望:若本篇讲解内容帮助到您,请帮忙点个赞吧,再点点您的小手关注下公众号,您的支持是我继续写作的最大动力,谢谢。🙏

    2024年02月15日
    浏览(42)
  • 无效数据大揭秘——你不知道的那些坑!

    进行数据管理时,无效数据可能会对生产力和决策质量造成严重的影响。如何发现和处理无效数据变得愈发重要。一起来唠唠各位大佬是如何处理的? 无效数据是指在某个特定领域或目的中,不符合要求或无意义的数据。它通常是由于数据收集或处理过程中的错误、不一致或

    2024年02月05日
    浏览(57)
  • 你不知道的几个JavaScript 高阶技巧

    基础: 高阶: 基础: 高阶: 基础: 高阶: 基础: 高阶: 基础: 高阶: 基础: 高阶: 基础: 高阶: 基础 高阶 更简单的方法: null 是一个  value ,然而 undefined 不是. null 像一个空盒子,但 undefined 不是. 传递 null 时, 不采用 默认值。然而,当未定义或未传递任何内容时,

    2024年02月08日
    浏览(53)
  • element - - - - - 你不知道的loading使用方式

    求人不如求己 关于页面交互,最害怕的就是接口等待时间太长,用户体验不好。 而如何提高用户体验呢? 接口返回速度 这个是后端同学去优化,前端同学也可通过 加载loading 来优化体验 Element 提供了两种调用 Loading 的方法:指令和服务 详情可查看官网 : Element Loading 加载

    2024年02月02日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包