1

我想知道在 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;
}

非常感谢任何帮助！

PS：任何，我的意思是，非常感谢ANT帮助。如果有人解释为什么这在今天在技术上是不可能的，那么它与提供关于弱引用事件调度器机制的可能实现的线索一样有价值。

4

1 回答 1

3

让我先重新表述你的问题，以便我的答案更清楚。

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

您在这里使用 Wea​​kMap 所做的实际上是内置 EventTarget 的行为：

当[Emitter]成为收藏品时，handler也成为。
[observer]无关紧要。

对于您想要的，您必须使用该[observer]对象作为 WeakMap 的键 ( WeakMap.set( observer, handler ))，以便在[observer]取消链接时，它不再在 WeakMap 中。
但是WeakMaps 是不可迭代的，所以这行不通......

您需要的是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 );
  }
}
于 2020-02-14T03:20:37.223 回答