前端开发中，我们经常需要监听某个 DOM 元素的变化，例如在数据渲染完毕后，需要处理一些特殊的操作。而且，随着单页面应用的流行，越来越多的页面元素是由 JavaScript 动态生成的，这就给 DOM 元素的监听带来了新的挑战。
@oprasad/observer 是一款基于 MutationObserver 的轻量级 DOM 监听库，它能够帮助我们轻松地监听任意 DOM 元素的变化。本文将详细介绍 @oprasad/observer 的使用方法，希望对初学者有所帮助。
安装
使用 npm 进行安装：
npm install @oprasad/observer --save
使用方法
@oprasad/observer 的使用方法非常简单。我们只需要声明一个 Observer 实例，然后指定 target 和 callback 即可。
import { Observer } from '@oprasad/observer';
const observer = new Observer();
// 监听所有 <div> 元素的变化
observer.observe('div', (mutations) => {
console.log(mutations);
});上述代码中，我们实现了对所有 <div> 元素的监听，并在每次 DOM 变化时输出到控制台。其中，mutations 是一个 MutationRecord 数组，用于存储变化的数据。更多关于 MutationObserver 的用法，请参考 MDN 文档。
除了监听所有元素，我们还可以选择监听指定的元素：
const element = document.getElementById('example');
observer.observe(element, (mutations) => {
console.log(mutations);
});或者，用选择器字符串来选取多个元素：
observer.observe('.example', (mutations) => {
console.log(mutations);
});高级用法
除了基本用法，@oprasad/observer 还提供了一些高级功能。
处理多个回调函数
如果我们需要同时处理多个回调函数，可以通过 addCallback 方法添加：
observer.observe('button', (mutations) => {
console.log('Callback #1:', mutations);
});
observer.addCallback('button', (mutations) => {
console.log('Callback #2:', mutations);
});取消监听
当我们不再需要监听某个元素时，可以使用 unobserve 方法来取消监听：
const element = document.getElementById('example');
observer.observe(element, (mutations) => {
console.log(mutations);
});
// 过一段时间后取消监听
setTimeout(() => {
observer.unobserve(element);
}, 5000);监听多个事件
如果我们需要监听多个事件，可以使用 observeEvents 方法，它接受一个事件对象数组作为参数：
const events = [
{
target: 'button', // 监听目标元素
events: ['click', 'mousedown'], // 监听的事件数组
callback: (mutations, event) => {
console.log(event.type, mutations);
}
}
];
observer.observeEvents(events);上述代码中，我们监听了一个带有多个事件的按钮，并在每次事件触发时输出变化数据到控制台。
总结
本文介绍了 @oprasad/observer 的基本用法和高级用法，希望能够为大家的前端开发工作带来便利。同时，也提醒大家，在使用观察者模式时，要注意避免过多地监听 DOM 元素，以免影响性能。
示例代码：https://github.com/oprasad/observer-demo
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/60067381890c4f72775842aa