您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

一次DOM曝光封装历程

时间:2023-08-02 12:34:38  来源:政采云技术  作者:


随着最近曝光埋点的需求越来越频繁,就想把之前写好的曝光逻辑抽出来封装了一下作为公用。

初版

逻辑:window.scroll 监听滚动 + 使用 getBoundingClientRect() 相对于视口位置实现

具体代码如下:

function buryExposure (el, fn) {
    /*
    * 省略一些边界判断
    * ......
    **/
    let elEnter = false; // dom是否进入可视区域
    el.exposure = () => {
        const { top } = el.getBoundingClientRect();
        if (top > 0 && top < window.screen.avAIlHeight) {
            if (!elEnter) {
                elEnter = true;
                fn(el)
            }
        } else {
            elEnter = false;
        };
    }
    document.addEventListener('scroll', el.exposure);
}

回调传出 el ,一般为页面注销时注销对应滚动事件: el.exposure

其中两个点

第一个:

// 判断上边距出现在视口内,则判定为曝光
const { top } = el.getBoundingClientRect();
if (top > 0 && top < window.screen.availHeight)

其中这里的 top 以及其他边距对应视口计算方式可能和你想象的不一样,上图摘自 你真的会用getBoundingClientRect 吗 (https://juejin.im/entry/59c1fd23f265da06594316a9), 它对这个属性讲的比较详细可以看看

第二个:

let elEnter = false; //

用一个变量来控制当 dom 已经曝光则不再持续,直到 dom 离开视口,重新计算

重写

当我以为已经够用时,某次需求需要监听 DOM 在某个 div 内横向滑动的曝光,发现它并不支持!而后面一些曝光策略对比的文章说到这个 getBoundingClientRect API 会引起性能问题

不相信的你可以试一下!!!

于是我就开启 google 大法和在掘金社区内搜一些曝光的文章,然后我就发现了新大陆!

window.IntersectionObserver

这次曝光的主角:优先使用异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法

关于他的具体介绍,我这里简单讲一下我用到的属性,具体可查阅 超好用的 API 之 IntersectionObserver (https://juejin.im/post/5d11ced1f265da1b7004b6f7) 或者 MDN (https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver)

主要使用如下:

const io = new IntersectionObserver(callback, options)
io.observe(DOM)
  • callback 回调函数,options 是配置参数
  • io.observe 观察函数,DOM 为被观察对象

主要两点

1.options 的配置为:

const observerOptions = {
    root: null,  // 默认使用视口作为交集对象
    rootMargin: '0px', // 无样式
    threshold: [...Array(100).keys()].map(x => x / 100) // 监听交集时的每0.01变化触发callback回调
}

2.callback 函数如下:

(entries) => {
    // 过程性监听
    entries.forEach((item) => {
        if (item.intersectionRatio > 0 && item.intersectionRatio <= 1) { // 部分显示即为显示
            // todo....
        } else if (item.intersectionRatio === 0) { // 不可见时恢复
            // todo...
        }
    });
}

曝光的判断来自以下第二种(部分显示则曝光):

  • intersectionRatio === 1:则监听对象完整显示
  • intersectionRatio > 0 && intersectionRatio < 1 : 则监听对象部分显示
  • intersectionRatio === 0:则监听对象不显示其实 entries[] 子元素对象还有一个属性:isIntersecting

返回一个布尔值,下列两种操作均会触发 callback:

  1. 如果目标元素出现在 root 可视区,返回 true。
  2. 如果从 root 可视区消失,返回 false

按理说应该是使用它,但是发现不适合现实场景!!!

比如 类 banner 横向移动 (https://jsbin.com/vuzujiw/6/edit?html,css,js,console,output),我第一调试的时候就碰到了

用户要看的子元素是被父元素给限制住了,但是对于 isIntersecting 它来讲是出现在视口内的。

最终版

考虑兼容性:

// 使用w3c出的polyfill
require('intersection-observer');

主要逻辑如下:

/**
 * DOM曝光
 * @param {object} options 配置参数
 * options @param {Array} DOMs 要被监听的DOM列表
 * options @param {Function} callback[type, io] 回调,传入参数
 * options @param {DOM} parentDom 子元素的对应父元素
 */
export default function expose (options = {}) {
    if (!options.DOMs || !options.callback) {
        console.error('Error: 传入监听DOM或者回调函数');
        return;
    }
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: [...Array(100).keys()].map(x => x / 100)
    };
    options.parentDom && (observerOptions.root = options.parentDom);
    // 优先使用异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法
    if (window.IntersectionObserver) {
        let elEnter = false; // dom是否进入可视区域
        const io = new IntersectionObserver((entries) => {
            // 回调包装
            const fn = () => options.callback({ io });
            // 过程性监听
            entries.forEach((item) => {
                if (!elEnter && item.intersectionRatio > 0 && item.intersectionRatio <= 1) { // 部分显示即为显示
                    fn();
                    elEnter = true;
                } else if (item.intersectionRatio === 0) { // 不可见时恢复
                    elEnter = false;
                }
            });
        }, observerOptions);
        // 监听DOM
        options.DOMs.forEach(DOM => io.observe(DOM));
    }
}

参考文献

你真的会用 getBoundingClientRect 吗(https://juejin.im/entry/59c1fd23f265da06594316a9)



Tags:DOM   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Vue中虚拟Dom技术,你学会了吗?
在Vue中,虚拟DOM(Virtual DOM)是一项关键的技术,它是一种用JavaScript对象模拟真实DOM结构的机制。虚拟DOM的引入旨在提高DOM操作的效率,特别是在频繁的数据变化时。1. 为什么需...【详细内容】
2023-12-26  Search: DOM  点击:(65)  评论:(0)  加入收藏
Python中的Random模块,随机性的神奇世界
随机性在计算机编程和数据科学中扮演着至关重要的角色。Python中的random模块提供了丰富的工具和函数,帮助我们生成随机数、操作随机序列,以及模拟随机性事件。在本文中,我们将...【详细内容】
2023-10-27  Search: DOM  点击:(79)  评论:(0)  加入收藏
大型DOM结构是如何影响交互性的
没有办法绕过这一点:当你构建一个网页时,该页面一定会有一个文档对象模型(DOM)。DOM代表了你页面HTML的结构,并为JavaScript和CSS提供了访问页面结构和内容的途径。然而,问题在于D...【详细内容】
2023-09-25  Search: DOM  点击:(290)  评论:(0)  加入收藏
通过WebAssembly,C++率先打响虚拟 DOM 第一枪!
前言本文主要和大家讨论 asm-dom,即通过 WebAssembly 技术 C++ 率先支持虚拟DOM。在年初,我也确实使用 WebAssembly 将客户端应用成功移植到了 Web,这也是为什么我一直对 WebAs...【详细内容】
2023-08-22  Search: DOM  点击:(284)  评论:(0)  加入收藏
一次DOM曝光封装历程
随着最近曝光埋点的需求越来越频繁,就想把之前写好的曝光逻辑抽出来封装了一下作为公用。初版逻辑:window.scroll 监听滚动 + 使用 getBoundingClientRect() 相对于视口位置...【详细内容】
2023-08-02  Search: DOM  点击:(248)  评论:(0)  加入收藏
Maps与WeakMaps在DOM节点管理中的妙用
使用 Maps 和 WeakMaps 可以提高代码的可读性和可维护性。将DOM节点与相关数据关联起来,有助于使代码更清晰易懂。这篇文章讨论了使用 Maps 和 WeakMaps 处理DOM节点的优势。...【详细内容】
2023-05-22  Search: DOM  点击:(316)  评论:(0)  加入收藏
DOM怎么封装的?各种库是怎么写的?
DOM怎么封装的?各种库是怎么写的?(DOM库,AJAX库,动画 库,事件库)?在作用域套作用域的时候;子作用域内尽量不返回引用数据类型,因为闭包内的值,是另外一个子闭包的返回值的时候,如果子...【详细内容】
2023-05-19  Search: DOM  点击:(252)  评论:(0)  加入收藏
DOM的概念和操作
DOM(Document Object Model)也称为文档对象模型,是 W3C 组织推荐的处理可扩展标记语 言的标准编程接口。DOM 是一种与浏览器、平台和语言无关的应用程序接口(API),它可以动态 地访...【详细内容】
2022-12-03  Search: DOM  点击:(335)  评论:(0)  加入收藏
我让虚拟DOM的diff算法过程动起来了
去年写了一篇文章手写一个虚拟DOM库,彻底让你理解diff算法介绍虚拟DOM的patch过程和diff算法过程,当时使用的是双端diff算法,今年看到了Vue3使用的已经是快速diff算法,所以也想...【详细内容】
2022-10-30  Search: DOM  点击:(243)  评论:(0)  加入收藏
原生Javascript常用的获取dom元素的几种方法
<div class="wrap"> <div id="wrap-con"> <input type="text" /> <div class="form-item">1</div> <div class="form-item">2</div> </div&...【详细内容】
2022-06-20  Search: DOM  点击:(523)  评论:(0)  加入收藏
▌简易百科推荐
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(5)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(12)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(8)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(5)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(10)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(8)  评论:(0)  加入收藏
为什么都说 HashMap 是线程不安全的?
做Java开发的人,应该都用过 HashMap 这种集合。今天就和大家来聊聊,为什么 HashMap 是线程不安全的。1.HashMap 数据结构简单来说,HashMap 基于哈希表实现。它使用键的哈希码来...【详细内容】
2024-03-22  Java技术指北  微信公众号  Tags:HashMap   点击:(11)  评论:(0)  加入收藏
如何从头开始编写LoRA代码,这有一份教程
选自 lightning.ai作者:Sebastian Raschka机器之心编译编辑:陈萍作者表示:在各种有效的 LLM 微调方法中,LoRA 仍然是他的首选。LoRA(Low-Rank Adaptation)作为一种用于微调 LLM(大...【详细内容】
2024-03-21  机器之心Pro    Tags:LoRA   点击:(12)  评论:(0)  加入收藏
这样搭建日志中心,传统的ELK就扔了吧!
最近客户有个新需求,就是想查看网站的访问情况。由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的...【详细内容】
2024-03-20  dbaplus社群    Tags:日志   点击:(4)  评论:(0)  加入收藏
Kubernetes 究竟有没有 LTS?
从一个有趣的问题引出很多人都在关注的 Kubernetes LTS 的问题。有趣的问题2019 年,一个名为 apiserver LoopbackClient Server cert expired after 1 year[1] 的 issue 中提...【详细内容】
2024-03-15  云原生散修  微信公众号  Tags:Kubernetes   点击:(6)  评论:(0)  加入收藏
站内最新
站内热门
站内头条