### Web.js 中 Observer 系列 API 的介绍和用法 #### 一、Intersection Observer API Intersection Observer API 是一种高效的工具，用于监控 DOM 元素与其视口或其他祖先元素之间的交集情况。它能够帮助开发者轻松实现诸如懒加载等功能。 - **作用**: 它的主要功能是检测目标元素何时进入或离开用户的可视区域（即视口），并触发相应的回调函数[^1]。 - **基本使用**: 1. 创建观察器实例：通过 `new IntersectionObserver()` 方法创建一个新的观察器对象。 ```javascript const observer = new IntersectionObserver(callback, options); ``` 2. 设置回调函数：当被观察的目标元素与视口的交集发生变化时，会执行此回调函数。 ```javascript function callback(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { console.log('Element is visible'); } }); } ``` 3. 观察目标元素：调用 `observe(target)` 方法指定要监视的 DOM 节点。 ```javascript const target = document.querySelector('#target-element'); observer.observe(target); ``` 4. 停止观察某个特定元素：可以调用 `unobserve(target)` 来停止对该元素的观察。 ```javascript observer.unobserve(target); ``` 5. 断开所有观察：如果不再需要任何观察行为，则可调用 `disconnect()` 方法完全关闭该观察器。 ```javascript observer.disconnect(); ``` - **示例应用——懒加载图片**: 下面是一个简单的例子展示如何利用 Intersection Observer 实现图像资源按需加载。 ```javascript let lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); let count = lazyImages.length; if ("IntersectionObserver" in window) { let lazyLoad = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { let image = entry.target; image.src = image.dataset.src; image.classList.remove("lazy"); lazyLoad.unobserve(image); if (--count === 0) lazyLoad.disconnect(); // 当全部完成时断开连接 } }); }); lazyImages.forEach(image => lazyLoad.observe(image)); } else { // Fallback for browsers that do not support the Intersection Observer API. lazyImages.forEach(img => img.src = img.dataset.src); } ``` #### 二、Mutation Observer API Mutation Observer API 提供了一种机制来响应 DOM 树的变化通知。它可以用来监测节点子树中的各种修改操作，比如属性更改或者结构变动等。 - **初始化 MutationObserver 对象** ```javascript const observer = new MutationObserver(mutationsList => { mutationsList.forEach(mutation => { console.log(`Mutated type: ${mutation.type}`); }); }); ``` - **配置参数** 配置选项决定了哪些类型的变更会被记录下来以及是否应该深入到整个文档层次去查找这些变化。 ```javascript const config = { attributes: true, childList: true, subtree: true }; ``` - **开始监听** 将上述定义好的观察者绑定至具体的 DOM 元素上即可启动其工作流程。 ```javascript const targetNode = document.getElementById('some-id'); observer.observe(targetNode, config); ``` - **结束监听** 如果希望终止当前正在进行的所有观测活动的话，可以通过如下方式达成目的。 ```javascript observer.disconnect(); ``` #### 三、PerformanceObserver API PerformanceObserver API 可以捕获性能度量数据，并允许我们处理它们以便进一步分析或调试应用程序的表现状况。 - **创建 PerformanceObserver 实例** ```javascript const po = new PerformanceObserver(listOfEntries => { listOfEntries.getEntries().forEach(entry => { console.log(`${entry.name}: ${entry.duration}ms`); }); }); ``` - **设定关注项类型** 我们可以根据需求调整所关心的数据类别集合。 ```javascript po.observe({type:'measure', buffered:true}); ``` --- ###