плагин jQuery для событийно-управляемой архитектуры? - PullRequest
30 голосов
/ 03 июня 2010

Существуют ли подключаемые модули Event Driven Architecture jQuery?

Шаг 1: подписка

alt text
Подписчики подписываются на обработчик событий посередине и передают метод обратного вызова, а также имя события, которое они прослушивают ...

т.е. Два зеленых подписчика будут слушать события p0. А синий подписчик будет слушать события p1.


Шаг 2: событие p0 запускается другим компонентом в обработчик событий

alt text

  1. Событие p0 запускается в обработчике событий
  2. Обработчик событий уведомляет своих подписчиков о событии, вызывая методы обратного вызова, которые они указали при подписке в Шаг 1. Подписка.

Обратите внимание, что синий подписчик не уведомлен, поскольку он не прослушивал события p0.


Шаг 3: событие p1 запускает компонент в обработчике событий

alt text

Событие p1 вызывается другим компонентом

Как и прежде, за исключением того, что теперь синий подписчик получает событие через обратный вызов, а два других зеленых подписчика не получают событие.

Изображения от leeand00, на Flickr

Кажется, я не могу его найти, но я предполагаю, что они просто называют это как-то еще в Javascript / jquery

Также есть имя для этого шаблона? Потому что это не просто базовый издатель / подписчик, я думаю, это нужно назвать чем-то другим.

Ответы [ 7 ]

48 голосов
/ 04 июня 2010

Вам, вероятно, не нужен плагин для этого. Прежде всего, сам DOM полностью ориентирован на события. Вы можете использовать делегирование событий для прослушивания всех событий на корневом узле (метод, который использует jQuery live). Также для обработки пользовательских событий, которые могут не иметь отношения к DOM, вы можете использовать обычный старый объект JavaScript для выполнения этой работы. Я написал сообщение в блоге о создании центрального диспетчера событий в MooTools с помощью всего одной строки кода.

var EventBus = new Class({Implements: Events});

Это также легко сделать в jQuery. Используйте обычный объект JavaScript, который действует как центральный посредник для всех событий. Любой клиентский объект может публиковать и подписываться на события этого объекта. См. Этот связанный вопрос .

var EventManager = {
    subscribe: function(event, fn) {
        $(this).bind(event, fn);
    },
    unsubscribe: function(event, fn) {
        $(this).unbind(event, fn);
    },
    publish: function(event) {
        $(this).trigger(event);
    }
};

// Your code can publish and subscribe to events as:
EventManager.subscribe("tabClicked", function() {
    // do something
});

EventManager.publish("tabClicked");

EventManager.unsubscribe("tabClicked");
<ч />

Или, если вас не интересует раскрытие jQuery, просто используйте пустой объект и вызовите bind и trigger непосредственно для обернутого объекта jQuery.

var EventManager = {};

$(EventManager).bind("tabClicked", function() {
    // do something
});

$(EventManager).trigger("tabClicked");

$(EventManager).unbind("tabClicked");

Оболочки просто для того, чтобы скрыть базовую библиотеку jQuery, чтобы вы могли заменить реализацию позже, если потребуется.

Это, в основном, публикация / подписка или шаблон наблюдателя , и несколько хороших примеров - класс NSNotificationCenter , EventBus шаблон, популяризированный Рэем Райаном в сообществе GWT и несколькими другими.

5 голосов
/ 06 февраля 2013

Хотя это и не плагин jQuery, Twitter выпустил инфраструктуру JavaScript под названием Flight , которая позволяет создавать архитектуры на основе компонентов, которые взаимодействуют через события.

Flight - это легкий, основанный на компонентах JavaScript-фреймворк от Twitter. В отличие от других JavaScript-фреймворков, основанных на паттерне MVC, Flight выполняет поведение непосредственно на узлах DOM.

Flight не зависит от того, как перенаправляются запросы или какую библиотеку шаблонов вы решите использовать. Полет обеспечивает строгое разделение проблем. Компоненты в Flight не взаимодействуют друг с другом напрямую.

Они транслируют свои действия как события, и те компоненты, которые подписаны на эти события, могут предпринимать действия на их основе. Чтобы использовать Flight, вам понадобятся ES5-shim и jQuery вместе с загрузчиком AMD.

Flight - легковесный компонентный JavaScript-фреймворк из Twitter

2 голосов
/ 08 мая 2013

Недавняя разработка - msgs.js"Программирование, ориентированное на сообщения для JavaScript. Вдохновлено Spring Integration". Он также поддерживает связь через WebSockets.

msgs.js применяет словарь и шаблоны, определенные в книге «Шаблоны интеграции предприятия», к JavaScript, расширяя программирование, ориентированное на обмен сообщениями, в браузер и / или серверный JavaScript. Шаблоны обмена сообщениями, изначально разработанные для интеграции слабосвязанных разнородных систем, также применимы к слабосвязанным модулям в рамках одного процесса приложения.

[...]

Протестированные среды:

  • Node.js (0,6, 0,8)
  • Хром (стабильный)
  • Firefox (стабильный, ESR, должен работать в более ранних версиях)
  • IE (6-10)
  • Safari (5, 6, iOS 4-6, должен работать в более ранних версиях)
  • Opera (11, 12, должна работать в более ранних версиях)
2 голосов
/ 02 января 2012

Это легко сделать, используя фиктивный узел jQuery в качестве диспетчера:

var someModule = (function ($) {

    var dispatcher = $("<div>");

    function init () {
        _doSomething();
    }

    /**
        @private
    */
    function _doSomething () {
        dispatcher.triggerHandler("SOME_CUSTOM_EVENT", [{someEventProperty: 1337}]);
    }

    return {
        dispatcher: dispatcher,
        init: init
    }

}(jQuery));



var someOtherModule = (function ($) {

    function init () {
        someModule.dispatcher.bind("SOME_CUSTOM_EVENT", _handleSomeEvent)
    }

    /**
        @private
    */
    function _handleSomeEvent (e, extra) {
        console.log(extra.someEventProperty) //1337
    }

    return {
        init: init
    }

}(jQuery));

$(function () {
    someOtherModule.init();
    someModule.init();
})
2 голосов
/ 28 июня 2010

Может ли это служить облегченной структурой передачи сообщений?

function MyConstructor() {
    this.MessageQueues = {};

    this.PostMessage = function (Subject) {
        var Queue = this.MessageQueues[Subject];
        if (Queue) return function() {
                                        var i = Queue.length - 1;
                                        do Queue[i]();
                                        while (i--);
                                    }
        }

    this.Listen = function (Subject, Listener) {
        var Queue = this.MessageQueues[Subject] || [];
        (this.MessageQueues[Subject] = Queue).push(Listener);
    }
}

тогда вы могли бы сделать:

var myInstance = new MyConstructor();
myInstance.Listen("some message", callback());
myInstance.Listen("some other message", anotherCallback());
myInstance.Listen("some message", yesAnotherCallback());

и позже:

myInstance.PostMessage("some message");

будет отправлять очереди

2 голосов
/ 03 июня 2010

На самом деле их два:

1 голос
/ 04 июня 2010

Я использовал OpenAjax Hub для его услуг публикации / подписки. Это не плагин jQuery, а отдельный модуль JavaScript. Вы можете скачать и использовать справочную реализацию с SourceForge. Мне нравится иерархическое именование тем и поддержка подписки на несколько тем с использованием групповых обозначений.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...