javascript基础学习系列二百三十二：复用 MutationObserver

最新推荐文章于 2024-07-05 17:36:59 发布

完美句号

最新推荐文章于 2024-07-05 17:36:59 发布

阅读量355

点赞数 7

文章标签： javascript 学习开发语言前端系统架构架构性能优化

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135814688

版权

多次调用 observe()方法，可以复用一个 MutationObserver 对象观察多个不同的目标节点。此时，MutationRecord 的 target 属性可以标识发生变化事件的目标节点。下面的示例演示了这个过程:

let observer = new MutationObserver(
(mutationRecords) => console.log(mutationRecords.map((x) =>
x.target)));
// 向页面主体添加两个子节点
let childA = document.createElement('div'),
        childB = document.createElement('span');
    document.body.appendChild(childA);
    document.body.appendChild(childB);
// 观察两个子节点
observer.observe(childA, { attributes: true }); observer.observe(childB, { attributes: true });
// 修改两个子节点的属性 childA.setAttribute('foo', 'bar'); childB.setAttribute('foo', 'bar');
    // [<div>, <span>]

disconnect()方法是一个“一刀切”的方案，调用它会停止观察所有目标:

let observer = new MutationObserver(
(mutationRecords) => console.log(mutationRecords.map((x) =>
    x.target)));
// 向页面主体添加两个子节点
let childA = document.createElement('div'),
        childB = document.createElement('span');
    document.body.appendChild(childA);
    document.body.appendChild(childB);
// 观察两个子节点
observer.observe(childA, { attributes: true }); observer.observe(childB, { attributes: true });
    observer.disconnect();
// 修改两个子节点的属性 childA.setAttribute('foo', 'bar'); childB.setAttribute('foo', 'bar');
// (没有日志输出)

setTimeout(() => { 4

调用 disconnect()并不会结束 MutationObserver 的生命。还可以重新使用这个观察者，再将它关联到新的目标节点。下面的示例在两个连续的异步块中先断开然后又恢复了观察者与元素的关联:

let observer = new MutationObserver(() => console.log('<body> attributes changed'));
observer.observe(document.body, { attributes: true });
// 这行代码会触发变化事件 document.body.setAttribute('foo', 'bar');

5. 重用 MutationObserver

      observer.disconnect();
// 这行代码不会触发变化事件
     document.body.setAttribute('bar', 'baz');
   }, 0);
setTimeout(() => {
// Reattach
observer.observe(document.body, { attributes: true });
// 这行代码会触发变化事件
     document.body.setAttribute('baz', 'qux');
   }, 0);
   // <body> attributes changed
   // <body> attributes changed