How it is adopted by jQuery

Once again, the jQuery library provides us with a convenient way to take advantage of the Pub/Sub Pattern in our code. Instead of extending its API by adding new methods specifically named "publish" and "subscribe" and introducing new concepts, the developers decided to extend the jQuery.fn.on() and jQuery.fn.trigger() methods with the ability to handle and emit custom events. This way, jQuery can be used to implement a publisher/subscriber communication scheme using the already known convenient methods it provides.

Custom events in jQuery

Custom events allow us to use almost any user-defined string value as a common event that we can add listeners for, and also manually fire it on page elements. As an extra but a precious feature, custom events can also carry some extra data to be delivered to the listeners of the event.

The jQuery library added its own custom events implementation, before it was actually added to any web specification. This way, it was proved how useful they can be when used in web development. As we saw in the previous chapter, in jQuery, there is a specific part of the implementation that handles both the common element event and also custom events. The jQuery.event object holds all the internal implementations related to firing and listening to events. Also, the jQuery.Event class is a dedicated wrapper that jQuery uses for the needs of both the common element events and its custom events implementation.

Implementing a Pub/Sub scheme using custom events

In the previous chapter, we saw how the jQuery.fn.on() method can be used to add event listeners on elements. We also saw that its implementation is maintaining lists with the added handlers and notifying them when required. Moreover, the event name seems to have the same coordination purpose, just like the topic. This implementation semantics seem to match exactly with the Pub/Sub Pattern as well.

The jQuery.fn.trigger() method actually uses the internal jQuery.event.trigger() method that is used to fire events in jQuery. It iterates over the internal handlers list and executes them with the requested event along with any extra parameters that the custom event defines. Once again, this also matches the operation requirements of the Pub/Sub Pattern.

As a result, jQuery.fn.trigger() and jQuery.fn.on() seem to match the needs of the Pub/Sub Pattern and can be used instead of separate "publish" and "subscribe" methods, respectively. Since they are both available on the jQuery.fn object, we can use these methods on any jQuery object. This jQuery object will act as an intermediate entity between the publishers and the subscribers, in a way that perfectly aligns with the definition of the broker.

A good common practice, which is also used by a lot of jQuery plugins, is to use the outermost page element that holds the implementation of the application or the plugin as the broker. On the other hand, jQuery actually allows us to use any object as a broker, since all that it actually needs is a target to emit an observe for our custom events. As a result, we could even use an empty object as our broker such as $({}), in case using a page element seems too restricting or not clean enough according to the Pub/Sub Pattern. This is actually what the jQuery Tiny Pub/Sub library does, along with some method aliasing, so that we actually use methods named "publish" and "subscribe" instead of jQuery's "on" and "trigger". For more information on Tiny, you can visit its repository page at https://github.com/cowboy/jquery-tiny-pubsub.