wangeditor/src/utils/observer/mutation.ts

wangEditor - 轻量级 web 富文本编辑器，配置方便，使用简单，开源免费

/**
 * @description 封装 MutationObserver
 * @author fangzhicong
 */

export type callback = (mutations: MutationRecord[], observer: Mutation) => void

/**
 * 封装 MutationObserver，抽离成公共类
 */
export default class Mutation {
    /**
     * MutationObserver 实例
     */
    protected observer: MutationObserver

    /**
     * 被监听的 Node 节点（可继承的，方便扩展但又不会在外部被修改）
     */
    protected node?: Node

    /**
     * 默认的 MutationObserverInit 配置
     */
    protected options: MutationObserverInit = {
        subtree: true,
        childList: true,
        attributes: true,
        attributeOldValue: true,
        characterData: true,
        characterDataOldValue: true,
    }

    /**
     * MutationCallback
     */
    protected callback: (mutations: MutationRecord[]) => void

    /**
     * 构造器
     * @param fn 发生变化时执行的回调函数
     * @param options 自定义配置项
     */
    constructor(fn: callback, options?: MutationObserverInit) {
        this.callback = mutations => {
            fn(mutations, this)
        }
        this.observer = new MutationObserver(this.callback)
        options && (this.options = options)
    }

    public get target() {
        return this.node
    }

    /**
     * 绑定监听节点（初次绑定有效）
     * @param node 需要被监听的节点
     */
    public observe(node: Node) {
        if (!(this.node instanceof Node)) {
            this.node = node
            this.connect()
        }
    }

    /**
     * 连接监听器（开始观察）
     */
    public connect() {
        if (this.node) {
            this.observer.observe(this.node, this.options)
            return this
        }
        throw new Error('还未初始化绑定，请您先绑定有效的 Node 节点')
    }

    /**
     * 断开监听器（停止观察）
     */
    public disconnect() {
        let list = this.observer.takeRecords()
        list.length && this.callback(list)
        this.observer.disconnect()
    }
}