Как реализовать управляемый событиями JavaScript без участия какого-либо элемента DOM?

Question

Есть ли способ реализовать управляемое событиями программирование в JavaScript, без привлечения какого-либо элемента DOM?Например, создание обработчика событий, который выполняется каждый раз при сортировке массива.

Answer 1

Конечно! Ключевое слово, которое вы ищете, это "pubsub". Вот некоторые известные реализации:

• Как плагин jQuery
• PubSubJS
• EventEmitter2
• Backbone.Events

Но вы также можете сделать это самостоятельно, например:

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");

Answer 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.

Answer 3

Смешивание Backbone.Events в ваш объект даст вам это. (См. Backbone.js)