如何在不涉及任何 DOM 元素的情况下实现事件驱动的 JavaScript？答案

【问题标题】：How to implement event-driven JavaScript without involving any DOM element?如何在不涉及任何 DOM 元素的情况下实现事件驱动的 JavaScript？
【发布时间】：2011-04-03 06:25:36
【问题描述】：

有没有什么方法可以在 JavaScript 中实现事件驱动编程，而不涉及任何 DOM 元素？例如创建一个事件处理程序，每次对数组进行排序时执行。

【问题讨论】：

标签： javascript dom events dom-events

【解决方案1】：

当然！您要查找的关键字是“pubsub”。以下是一些著名的实现：

但你也可以自己做，像这样：

window.pubsub = (function () {
    var eventToListeners = {};

    return {
        sub: function (event, callback) {
            if (!eventToListeners.hasOwnProperty(event)) {
                eventToListeners[event] = [];
            }
            eventToListeners[event].push(callback);
        },
        pub: function (event, args) {
            if (eventToListeners.hasOwnProperty(event)) {
                for (var i = 0; i < eventToListeners[event].length; ++i) {
                   try {
                       eventToListeners[event][i].call(null, args);
                   } catch (e) {
                       if (console && console.error) {
                           console.error(e);
                       }
                   }
                }
            }
        }
    };
}());

// Sample usage:
pubsub.sub("arraySorted", function () {
    console.log("array was sorted");
});

var myArray = [2, 3, 1];

myArray.sort();
pubsub.pub("arraySorted");

【讨论】：

记得将调用包装在一个 try-catch 块中，以确保所有订阅者都被调用，即使其中一个失败。
@Magnar：感谢您的建议；实施！
哇！太感谢了！！我以前从不知道这个 Pub/Sub 东西。它真的帮助了我！谢谢 :)
@Domenic 感谢您的回答，我认为这是迄今为止我找到的与 Pub/Sub 相关的最清晰、最简单的答案之一。

【解决方案2】：

在新的浏览器中，我们添加了直接构造 EventTarget 的功能：

const et = new EventTarget();

et.addEventListener("arraySorted", () => {
  console.log("array was sorted");
});

const myArray = [2, 3, 1];

myArray.sort();
et.dispatchEvent(new Event("arraySorted"));

有关更多示例以及浏览器兼容性表，请参阅https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/EventTarget。截至撰写本文时，它仅适用于 Chrome (64+) 和 Firefox (59+)，但随着时间的推移，支持将扩展到包括 Safari 和 Edge。

【讨论】：

【解决方案3】：

将 Backbone.Events 混合到你的对象中会给你这个。（参见 Backbone.js）

【讨论】：