一次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)看完两件事如果你觉得这篇内容对你挺有启发，我想邀请你帮我两件小事1.点个「在看」，让更多人也能看到这篇内容（点了「在看」，bug -1 ）2.关注公众号「政采云技术」，持续为你推送精选好文招贤纳士政采云技术团队（Zero），Base 杭州，一个富有激情和技术匠心精神的成长型团队。政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队。团队现有 80 余个前端小伙伴，平均年龄 27 岁，近 4 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、智能化平台、性能体验、云端应用、数据分析、错误监控及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。如果你想改变一直被事折腾，希望开始能折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我觉得我们该聊聊。任何时间，等着你写点什么，发给ZooTeam@cai-inc.com