【代码篇】事件监听函数的内存泄漏，都给我退散吧！

window.addEventListener("resize",onResize)
socket.on("message", onMessage);
emitter.on("message", onMessage);
复制代码

window.addEventListener("resize",onResize)
// 移除事件监听函数onResize失败
window.removeEventListener("resize",onResize, true)
复制代码

<script src="http://127.0.0.1:8080/dist/evm.js?t=5"></script>
<script>
    const evm = new EVM.ETargetEVM({
        // 白名单，因为DOM事件的注册可能
        isInWhiteList(target, event, listener, options) {
            if (target === window && event !== "error") {
                return true;
            }
            return false;
         }
    });
    // 开始监听
    evm.watch();
    // 定期打印极有可能是重复注册的事件监听函数信息
    setInterval(async function () {
        // statistics getExtremelyItems
        const data = await evm.getExtremelyItems({ containsContent: true });
        console.log("evm:", data);
    }, 3000)
</script>
复制代码

import { EventEmitter } from "events";
const evm = new win.EVM.EventsEVM(undefined, EventEmitter);
evm.watch();
setTimeout(async function () {
    // statistics getExtremelyItems
    const data = await evm.getExtremelyItems();
    console.log("evm:", data);
}, 5000)
复制代码

const Emitter = require('component-emitter');
const emitter = new Emitter();
const EVM = require('../../dist/evm');
const evm = new EVM.CEventsEVM(undefined, Emitter);
evm.watch();
// 其他代码
evm.getExtremelyItems()
    .then(function (res) {
        console.log("res:", res.length);
        res.forEach(r => {
            console.log(r.type, r.constructor, r.events);
        })
    })
复制代码

evm
    CEvents.ts // components-emitter系列,继承自 BaseEvm
    ETarget.ts // EventTarget系列,继承自 BaseEvm
    Events.ts  // events系列,继承自 BaseEvm
BaseEvm.ts  // 核心逻辑类
custom.d.ts 
EventEmitter.ts // 简单的事件中心
EventsMap.ts // 数据存储的核心
index.ts // 入口文件
types.ts // 类型申请
util.ts // 工具类
复制代码

Map<WeakRef<Object>, Map<EventType, EventsMapItem<T>[]>>();
interface EventsMapItem<O = any> {
    listener: WeakRef<Function>;
    options: O
}
复制代码

const DEFAULT_OPTIONS: BaseEvmOptions = {
    isInWhiteList: boolenFalse,
    isSameOptions: isSameETOptions
}
const ADD_PROPERTIES = ["addEventListener"];
const REMOVE_PROPERTIES = ["removeEventListener"];
/**
 * EVM for EventTarget
 */
export default class ETargetEVM extends BaseEvm<TypeListenerOptions> {
    protected orgEt: any;
    protected rpList: {
        proxy: object;
        revoke: () => void;
    }[] = [];
    protected et: any;
    constructor(options: BaseEvmOptions = DEFAULT_OPTIONS, et: any = EventTarget) {
        super({
            ...DEFAULT_OPTIONS,
            ...options
        });
        if (et == null || !isObject(et.prototype)) {
            throw new Error("参数et的原型必须是一个有效的对象")
        }
        this.orgEt = { ...et };
        this.et = et;
    }
    #getListenr(listener: Function | ListenerWrapper) {
        if (typeof listener == "function") {
            return listener
        }
        return null;
    }
    #innerAddCallback: EVMBaseEventListener<void, string> = (target, event, listener, options) => {
        const fn = this.#getListenr(listener)
        if (!isFunction(fn as Function)) {
            return;
        }
        return super.innerAddCallback(target, event, fn as Function, options);
    }
    #innerRemoveCallback: EVMBaseEventListener<void, string> = (target, event, listener, options) => {
        const fn = this.#getListenr(listener)
        if (!isFunction(fn as Function)) {
            return;
        }
        return super.innerRemoveCallback(target, event, fn as Function, options);
    }
    watch() {
        super.watch();
        let rp;
        // addEventListener 
        rp = this.checkAndProxy(this.et.prototype, this.#innerAddCallback, ADD_PROPERTIES);
        if (rp !== null) {
            this.rpList.push(rp);
        }
        // removeEventListener
        rp = this.checkAndProxy(this.et.prototype, this.#innerRemoveCallback, REMOVE_PROPERTIES);
        if (rp !== null) {
            this.rpList.push(rp);
        }
        return () => this.cancel();
    }
    cancel() {
        super.cancel();
        this.restoreProperties(this.et.prototype, this.orgEt.prototype, ADD_PROPERTIES);
        this.restoreProperties(this.et.prototype, this.orgEt.prototype, REMOVE_PROPERTIES);
        this.rpList.forEach(rp => rp.revoke());
        this.rpList = [];
    }
}
复制代码