javascript - 真正的弱引用事件发射器/调度器 : is it possible?

Question

我想知道以目前JS技术的发展水平，是否可以在JS中实现真正的弱引用事件调度程序/发射器机制？

昨天，我采用了一个非常流行的 eventemitter3 库，并对其进行了一些更改，以使用 Wea​​kMap 来保存对监听器的引用。但今天早上，我意识到实际上它不会像以前在 AS 3.0 中那样工作(嘿，FLASH 粉丝!)，因为只要调度程序本身存在，对监听器的引用就会存在。 .

'use strict';

var has = Object.prototype.hasOwnProperty
    , prefix = '~';

/**
 * Constructor to create a storage for our `EE` objects.
 * An `Events` instance is a plain object whose properties are event names.
 *
 * @constructor
 * @private
 */
function Events() {
}

//
// We try to not inherit from `Object.prototype`. In some engines creating an
// instance in this way is faster than calling `Object.create(null)` directly.
// If `Object.create(null)` is not supported we prefix the event names with a
// character to make sure that the built-in object properties are not
// overridden or used as an attack vector.
//
if (Object.create) {
    Events.prototype = Object.create(null);

    //
    // This hack is needed because the `__proto__` property is still inherited in
    // some old browsers like Android 4, iPhone 5.1, Opera 11 and Safari 5.
    //
    if (!new Events().__proto__) prefix = false;
}

/**
 * Representation of a single event listener.
 *
 * @param {Function} fn The listener function.
 * @param {*} context The context to invoke the listener with.
 * @param {Boolean} [once=false] Specify if the listener is a one-time listener.
 * @constructor
 * @private
 */
function EE(fn, context, once) {
    this.fn = fn;
    this.context = context;
    this.once = once || false;
}

/**
 * Add a listener for a given event.
 *
 * @param {WeakEventEmitter} emitter Reference to the `WeakEventEmitter` instance.
 * @param {(String|Symbol)} event The event name.
 * @param {Function} fn The listener function.
 * @param {*} context The context to invoke the listener with.
 * @param {Boolean} once Specify if the listener is a one-time listener.
 * @returns {WeakEventEmitter}
 * @private
 */
function addListener(emitter, event, fn, context, once) {
    if (typeof fn !== 'function') {
        throw new TypeError('The listener must be a function');
    }

    var listener = new EE(fn, context || emitter, once)
        , evt = prefix ? prefix + event : event;

    var _events = emitter._weakMap.get(emitter);
    if (!_events[evt]) _events[evt] = listener, emitter._eventsCount++;
    else if (!_events[evt].fn) _events[evt].push(listener);
    else _events[evt] = [_events[evt], listener];

    return emitter;
}

/**
 * Clear event by name.
 *
 * @param {WeakEventEmitter} emitter Reference to the `WeakEventEmitter` instance.
 * @param {(String|Symbol)} evt The Event name.
 * @private
 */
function clearEvent(emitter, evt) {
    if (--emitter._eventsCount === 0) {
        emitter._weakMap.set(emitter, new Events());

    } else {
        var _events = emitter._weakMap.get(emitter);
        delete _events[evt];
    }
}

/**
 * Minimal `WeakEventEmitter` interface that is molded against the Node.js
 * `WeakEventEmitter` interface.
 *
 * @constructor
 * @public
 */
function WeakEventEmitter() {
    this._weakMap = new WeakMap();
    this._weakMap.set(this, new Events());

    this._eventsCount = 0;
}

/**
 * Return an array listing the events for which the emitter has registered
 * listeners.
 *
 * @returns {Array}
 * @public
 */
WeakEventEmitter.prototype.eventNames = function eventNames() {
    var names = []
        , events
        , name;

    if (this._eventsCount === 0) return names;

    var _events = this._weakMap.get(this);
    for (name in (events = _events)) {
        if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
    }

    if (Object.getOwnPropertySymbols) {
        return names.concat(Object.getOwnPropertySymbols(events));
    }

    return names;
};

/**
 * Return the listeners registered for a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @returns {Array} The registered listeners.
 * @public
 */
WeakEventEmitter.prototype.listeners = function listeners(event) {
    var _events = this._weakMap.get(this);

    var evt = prefix ? prefix + event : event
        , handlers = _events[evt];

    if (!handlers) return [];
    if (handlers.fn) return [handlers.fn];

    for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
        ee[i] = handlers[i].fn;
    }

    return ee;
};

/**
 * Return the number of listeners listening to a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @returns {Number} The number of listeners.
 * @public
 */
WeakEventEmitter.prototype.listenerCount = function listenerCount(event) {
    var _events = this._weakMap.get(this);

    var evt = prefix ? prefix + event : event
        , listeners = _events[evt];

    if (!listeners) return 0;
    if (listeners.fn) return 1;
    return listeners.length;
};

/**
 * Calls each of the listeners registered for a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @returns {Boolean} `true` if the event had listeners, else `false`.
 * @public
 */
WeakEventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
    var evt = prefix ? prefix + event : event;

    var _events = this._weakMap.get(this);
    if (!_events[evt]) return false;

    var listeners = _events[evt]
        , len = arguments.length
        , args
        , i;

    if (listeners.fn) {
        if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);

        switch (len) {
            case 1:
                return listeners.fn.call(listeners.context), true;
            case 2:
                return listeners.fn.call(listeners.context, a1), true;
            case 3:
                return listeners.fn.call(listeners.context, a1, a2), true;
            case 4:
                return listeners.fn.call(listeners.context, a1, a2, a3), true;
            case 5:
                return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
            case 6:
                return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
        }

        for (i = 1, args = new Array(len - 1); i < len; i++) {
            args[i - 1] = arguments[i];
        }

        listeners.fn.apply(listeners.context, args);
    } else {
        var length = listeners.length
            , j;

        for (i = 0; i < length; i++) {
            if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);

            switch (len) {
                case 1:
                    listeners[i].fn.call(listeners[i].context);
                    break;
                case 2:
                    listeners[i].fn.call(listeners[i].context, a1);
                    break;
                case 3:
                    listeners[i].fn.call(listeners[i].context, a1, a2);
                    break;
                case 4:
                    listeners[i].fn.call(listeners[i].context, a1, a2, a3);
                    break;
                default:
                    if (!args) for (j = 1, args = new Array(len - 1); j < len; j++) {
                        args[j - 1] = arguments[j];
                    }

                    listeners[i].fn.apply(listeners[i].context, args);
            }
        }
    }

    return true;
};

/**
 * Add a listener for a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @param {Function} fn The listener function.
 * @param {*} [context=this] The context to invoke the listener with.
 * @returns {WeakEventEmitter} `this`.
 * @public
 */
WeakEventEmitter.prototype.on = function on(event, fn, context) {
    return addListener(this, event, fn, context, false);
};

/**
 * Add a one-time listener for a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @param {Function} fn The listener function.
 * @param {*} [context=this] The context to invoke the listener with.
 * @returns {WeakEventEmitter} `this`.
 * @public
 */
WeakEventEmitter.prototype.once = function once(event, fn, context) {
    return addListener(this, event, fn, context, true);
};

/**
 * Remove the listeners of a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @param {Function} fn Only remove the listeners that match this function.
 * @param {*} context Only remove the listeners that have this context.
 * @param {Boolean} once Only remove one-time listeners.
 * @returns {WeakEventEmitter} `this`.
 * @public
 */
WeakEventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
    var evt = prefix ? prefix + event : event;

    var _events = this._weakMap.get(this);
    if (!_events[evt]) return this;
    if (!fn) {
        clearEvent(this, evt);
        return this;
    }

    var listeners = _events[evt];

    if (listeners.fn) {
        if (
            listeners.fn === fn &&
            (!once || listeners.once) &&
            (!context || listeners.context === context)
        ) {
            clearEvent(this, evt);
        }
    } else {
        for (var i = 0, events = [], length = listeners.length; i < length; i++) {
            if (
                listeners[i].fn !== fn ||
                (once && !listeners[i].once) ||
                (context && listeners[i].context !== context)
            ) {
                events.push(listeners[i]);
            }
        }

        //
        // Reset the array, or remove it completely if we have no more listeners.
        //
        var _events = this._weakMap.get(this);
        if (events.length) _events[evt] = events.length === 1 ? events[0] : events;
        else clearEvent(this, evt);
    }

    return this;
};

/**
 * Remove all listeners, or those of the specified event.
 *
 * @param {(String|Symbol)} [event] The event name.
 * @returns {WeakEventEmitter} `this`.
 * @public
 */
WeakEventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
    var evt;

    if (event) {
        evt = prefix ? prefix + event : event;
        var _events = this._weakMap.get(this);
        if (_events[evt]) clearEvent(this, evt);

    } else {
        this._weakMap.set(this, new Events());
        this._eventsCount = 0;
    }

    return this;
};

//
// Alias methods names because people roll like that.
//
WeakEventEmitter.prototype.off = WeakEventEmitter.prototype.removeListener;
WeakEventEmitter.prototype.addListener = WeakEventEmitter.prototype.on;

//
// Expose the prefix.
//
WeakEventEmitter.prefixed = prefix;

//
// Allow `WeakEventEmitter` to be imported as module namespace.
//
WeakEventEmitter.WeakEventEmitter = WeakEventEmitter;

//
// Expose the module.
//
if ('undefined' !== typeof module) {
    module.exports = WeakEventEmitter;
}

非常感谢任何帮助!

P.S.:任何，我是认真的，非常感谢 ANT 的帮助。如果有人解释为什么这在今天技术上是不可能的，那么它将与提供有关弱引用事件调度程序机制的可能实现的线索一样有值(value)。

Answer 1

让我先重新表述一下您的问题，以便我的答案更加清晰。

• 您希望事件发射器[Emitter] 触发事件foo-event。
• 您需要一个对象[observer]来附加一个事件处理程序handler，以便当[Emitter]触发其foo时-事件。
• 您希望当对 [observer] 的所有引用都被破坏时，handler 也可以被垃圾回收。

<小时/>

您在此处使用 Wea​​kMap 所做的实际上是内置 EventTarget 的行为:

当[Emitter]变得可收集时，handler也变得可收集。
[观察者] 无关紧要。

对于你想要的，你必须使用该[observer]对象作为WeakMap的键(WeakMap.set(observer, handler))，这样当 [observer] 取消链接时，它就不再存在于 WeakMap 中。
但是WeakMaps are not iterable ，所以这是行不通的...

<小时/>

您需要的是WeakRef ，但截至撰写本文时，这些仍然是提案(第 3 阶段)，并隐藏在主要浏览器中的实验标志下 ref .

启用它后，您可以使用类似 IterableWeakMap 的内容存储您的观察者。

addObserver( event_type, observer, handler ) {
  // this._events = Map { 'foo-event' -> IterableWeakMap }
  const iterableWeakMap = this._events.get( event_type );
  iterableWeakMap.set( observer, handler );
}
triggerEvent( event_type ) {
  const evt = {/* */};
  const iterableWeakMap = this._events.get( event_type );
  for( const [ observer, handler ] of iterableWeakMap ) {
    handler( evt );
  }
}