一次DOM曝光封装历程

见贤思齐

一次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