Плагин jQuery для архитектуры, управляемой событиями?

Question

Есть ли плагины jQuery, управляемые событиями?

Шаг 1: Подписавшись

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

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

---

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

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

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

---

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

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

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

Images by leeand00, on Flickr

Я не могу найти, но я думаю, что они просто называют это что-то еще в JavaScript/JQuery

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

Answer 1

Вы, наверное, не нужен плагин для этого. Прежде всего, сам DOM полностью управляется событиями. Вы можете использовать делегирование событий для прослушивания всех событий на корневом узле (метод, который использует jQuery live). Чтобы также обрабатывать настраиваемые события, которые не могут быть связаны с DOM, вы можете использовать простой старый объект JavaScript для выполнения задания. Я написал blog post о создании центрального диспетчера событий в 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 или Observer pattern, и некоторые хорошие примеры были бы NSNotificationCenter класса Какао, EventBus шаблона популяризировал Ray Райан в сообществе GWT, а также несколько других.

Answer 2

Есть на самом деле два из них:

• Слушайте (быстрее): http://plugins.jquery.com/project/Listen
• Intercept (более продвинутый): http://plugins.jquery.com/project/Intercept

Answer 3

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

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

направит очереди

Answer 5

Это легко может быть выполнена с использованием фиктивного узла 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(); 
}) 

Answer 6

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

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

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

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

Flight - A Lightweight, Component-Based JavaScript Framework From Twitter

Answer 7

Недавнее развитие msgs.js "Message-ориентированное программирование на JavaScript. Вдохновленный Spring интеграции".Он также поддерживает связь через WebSockets.

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

[...]

Тестируемые среды:

• Node.js (0.6, 0.8)
• Хром (стабильный)
• Firefox (стабильный, СОЭ, должны работать в более ранних версии)
• IE (6-10)
• Safari (5, 6, iOS 4-6, должен работать в более ранних версиях)
• Opera (11, 12, должны работать в более ранних версиях)