找回密码
 会员注册
查看: 16|回复: 0

一次DOM曝光封装历程

[复制链接]

2万

主题

0

回帖

6万

积分

超级版主

积分
63700
发表于 2024-10-12 23:08:49 | 显示全部楼层 |阅读模式
一次DOM曝光封装历程 353 一次DOM曝光封装历程http://zoo.zhengcaiyun.cn/blog/article/dom随着最近曝光埋点的需求越来越频繁,就想把之前写好的曝光逻辑抽出来封装了一下作为公用。初版逻辑:window.scroll 监听滚动 + 使用 getBoundingClientRect() 相对于视口位置实现具体代码如下:function buryExposure (el, fn) {   /*   * 省略一些边界判断   * ......   **/   let elEnter = false; // dom是否进入可视区域   el.exposure = () => {       const { top } = el.getBoundingClientRect();       if (top > 0 & top 0 & top x / 100) // 监听交集时的每0.01变化触发callback回调}2.callback 函数如下entries) => {   // 过程性监听   entries.forEach((item) => {       if (item.intersectionRatio > 0 & item.intersectionRatio 0 & intersectionRatio 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 io.observe(DOM));   }}参考文献你真的会用 getBoundingClientRect 吗(https://juejin.im/entry/59c1fd23f265da06594316a9),Base 杭州,一个富有激情和技术匠心精神的成长型团队。前端团队,一个年轻富有激情和创造力的前端团队。团队现有 80 余个前端小伙伴,平均年龄 27 岁,近 4 成是全栈工程师,妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵,也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外,还在物料体系、工程平台、搭建平台、智能化平台、性能体验、云端应用、数据分析、错误监控及可视化等方向进行技术探索和实战,推动并落地了一系列的内部技术产品,持续探索前端技术体系的新边界。如果你想改变一直被事折腾,希望开始能折腾事;如果你想改变一直被告诫需要多些想法,却无从破局;如果你想改变你有能力去做成那个结果,却不需要你;如果你想改变你想做成的事需要一个团队去支撑,但没你带人的位置;如果你想改变本来悟性不错,但总是有那一层窗户纸的模糊… 如果你相信相信的力量,相信平凡人能成就非凡事,相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程,亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程,我觉得我们该聊聊。任何时间,等着你写点什么,发给 ZooTeam@cai-inc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

QQ|手机版|心飞设计-版权所有:微度网络信息技术服务中心 ( 鲁ICP备17032091号-12 )|网站地图

GMT+8, 2024-12-25 13:46 , Processed in 0.305964 second(s), 25 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表