Плагин jQuery для архитектуры, управляемой событиями?
Есть ли плагины jQuery для управления событиями?
Шаг 1: Подписка
![alt text]()
Абоненты подписываются на обработчик событий в середине и передают метод обратного вызова, а также имя события, которое они прослушивают...
то есть. Два зеленых подписчика будут прослушивать события p0. И синий абонент будет прослушивать события p1.
Шаг 2: событие p0 запускается другим компонентом в обработчике событий
![alt text]()
- Событие p0 запускается в обработчик событий
- Обработчик событий уведомляет его о подписчиках события, вызывая методы обратного вызова, которые они указали при подписке в Шаг 1: Подписка.
Обратите внимание, что синий подписчик не уведомляется, потому что он не прослушивал события p0.
Шаг 3: Событие p1 запускает компонент для обработчика событий
![alt text]()
Событие p1 запускается другим компонентом
Как и раньше, только теперь синий подписчик получает событие через свой обратный вызов, а остальные два зеленых подписчика не получают событие.
Изображения leeand00, на Flickr
Я не могу найти его, но я предполагаю, что он просто называет его чем-то другим в Javascript/jquery
Также есть ли имя для этого шаблона? Поскольку это не просто основной издатель/подписчик, его нужно назвать чем-то другим, о котором я думаю.
Ответы
Ответ 1
Вам, вероятно, не нужен плагин для этого. Прежде всего, сам DOM полностью управляется событиями. Вы можете использовать делегирование событий для прослушивания всех событий в корневом каталоге node (метод, который использует jQuery live). Чтобы также обрабатывать настраиваемые события, которые не могут быть связаны с DOM, вы можете использовать простой старый объект JavaScript для выполнения задания. Я написал сообщение о создании центрального диспетчера событий в MooTools только с одной строкой кода.
var EventBus = new Class({Implements: Events});
Это так же легко сделать в jQuery. Используйте обычный JavaScript-объект, который действует как центральный брокер для всех событий. Любой объект клиента может публиковать и подписываться на события на этом объекте. См. Соответствующий question.
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, чтобы вы могли позже заменить ее, если это необходимо.
Это в основном Publish/Subscribe или шаблон наблюдателя, а некоторые хорошие примеры будут Cocoa NSNotificationCenter class, EventBus, популяризированный Рэем Райаном в сообществе GWT и несколькими другими.
Ответ 2
Хотя это не плагин jQuery, Twitter опубликовал фреймворк JavaScript под названием Flight, который позволяет создавать архитектуры на основе компонентов, которые обмениваются данными через события.
Flight - это легкая, основанная на компонентах JavaScript-инфраструктура от Twitter. В отличие от других фреймворков JavaScript, которые основаны на шаблоне MVC, поведение Flight maps напрямую связано с узлами DOM.
Полет не зависит от того, как маршрутизируются запросы или какой шаблонной библиотеки вы решите использовать. Полет обеспечивает строгое разделение проблем. Компоненты в полете не взаимодействуют друг с другом напрямую.
Они транслируют свои действия как события, а те компоненты, которые подписываются на эти события, могут принимать на них действия. Чтобы использовать Flight, вам понадобятся ES5-shim и jQuery вместе с загрузчиком AMD.
Flight - легкая, основанная на компонентах JavaScript-платформа из Twitter
Ответ 3
На самом деле их два:
Ответ 4
Может ли это послужить платформой для передачи сообщений с перевесом?
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");
отправит очереди
Ответ 5
Это можно легко выполнить с помощью фиктивного jQuery node в качестве диспетчера:
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();
})
Ответ 6
Недавняя разработка msgs.js "Программирование, ориентированное на сообщения для JavaScript. Вдохновленный Spring Интеграция". Он также поддерживает связь через WebSockets.
msgs.js применяет словарь и шаблоны, определенные в книге "Модели интеграции предприятия", в JavaScript, расширяя ориентированное на сообщения программирование в браузере и/или на стороне сервера JavaScript. Образцы сообщений, первоначально разработанные для интеграции свободно связанных разрозненных систем, применимы также к слабо связанным модулям в рамках одного процесса приложения.
[...]
Протестированные среды:
- Node.js(0,6, 0,8)
- Chrome (стабильный)
- Firefox (стабильный, ESR, должен работать в более ранних версиях)
- IE (6-10)
- Safari (5, 6, iOS 4-6, должен работать в более ранних версиях)
- Opera (11, 12, должна работать в более ранних версиях)
Ответ 7
Я использовал OpenAjax Hub для своих служб публикации/подписки. Это не плагин jQuery, а автономный модуль JavaScript. Вы можете скачать и использовать справочную реализацию от SourceForge. Мне нравится иерархическое обозначение тем и поддержка подписки на несколько тем с использованием условных обозначений.