【JavaScript】MutationObserver的简易封装

MutationObserver是JS的API，可以用于观察文档中的 DOM 树变化，并在这些变化发生时执行特定的回调函数。

使用

// 选择需要观察变动的节点
const targetNode = document.getElementById("some-id");
// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };
// 当观察到变动时执行的回调函数
const callback = function (mutations, observer) {
    mutations.forEach(function(mutation) {
        console.log('元素发生了变化！');
        console.log('变化类型：', mutation.type);
        console.log('变化的节点：', mutation.target);
        console.log('新的子节点：', mutation.addedNodes);
        console.log('被移除的节点：', mutation.removedNodes);
    });
}

const Observer = new ElObserver;

// 方式一：
Observer.setTargetEle(targetNode);
Observer.setOptions(config);
Observer.listen(callback); // 开始观察目标节点

// 方式二(链式调用)：
Observer.setTargetEle(targetNode)
        .setOptions(config)
        .listen(callback);

// 停止观察
Observer.stop();

封装ElObserver类

export class ElObserver {
  private _obTargetEl?:obServeTarget|null;
  private _obServer?:obServe;
  private _obServerConfig:obServeOptions = {
    attributes: true,      // 监视属性的更改
    childList: true,       // 监视子元素的增加/删除
    subtree: true,         // 监视所有的后代节点
    attributeOldValue: true // 将旧值传递给回调函数
  };

  setOptions(config:obServeOptions){
    Object.assign(this._obServerConfig, config);
    return this;
  }

  setTargetEle(el:string|obServeTarget){
    if (typeof el === "string"){
      this._obTargetEl = document.querySelector(el) || null;
    }else{
      this._obTargetEl = el || null;
    }
    return this;
  }

  listen(callback?: obServeCallback){
    this._obServer = new MutationObserver(function (mutations, observer) {
      if(callback)callback(mutations, observer);
    });
    if (this._obTargetEl){
      this._obServer.observe(this._obTargetEl, this._obServerConfig);
    }
  }

  stop(){
    if (this._obServer){
      this._obServer.disconnect();
    }
  }
}

export default new ElObserver()

TS声明

declare interface obServeTarget extends HTMLElement {}

declare interface obServe extends MutationObserver {}
declare interface obServeOptions extends MutationObserverInit {}

declare interface obServeCallback extends MutationCallback {
  (mutations: MutationRecord[], observer: MutationObserver): void;
}

---

相关文献：

• MutationObserver - Web API 接口参考 | MDN