Skip to content

Instantly share code, notes, and snippets.

@cowboy
Last active March 15, 2023 11:56
Embed
What would you like to do?
jQuery Tiny Pub/Sub: A really, really, REALLY tiny pub/sub implementation for jQuery.
/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
* http://benalman.com/
* Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
(function($) {
var o = $({});
$.subscribe = function() {
o.on.apply(o, arguments);
};
$.unsubscribe = function() {
o.off.apply(o, arguments);
};
$.publish = function() {
o.trigger.apply(o, arguments);
};
}(jQuery));
/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
* http://benalman.com/
* Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
(function(a){var b=a({});a.subscribe=function(){b.on.apply(b,arguments)},a.unsubscribe=function(){b.off.apply(b,arguments)},a.publish=function(){b.trigger.apply(b,arguments)}})(jQuery)
@stsvilik
Copy link

I have only one concern/suggestion to this relatively simple PubSub - it doesn't take into account published events that have already happened (in the past). Why is this important? Assume for a second that I want to subscribe to an event that had already happened, or I dont know that it happened, but still want my new subscriber to be triggered with the last-published values? My suggestion is to add something like this:

(function($) {

var o = $({}), pastEvents = {};

$.subscribe = function() {
var type = arguments.slice(0, 1)[0],
handler = arguments.slice(-1)[0];
//Fire your subscribe handler if event has already happened
if(type in pastEvents) {
pastEvents[type].done(function() {
handler.apply(o, arguments);
});
}
//Subscribe to future events as well
o.on.apply(o, arguments);
};

$.unsubscribe = function() {
o.off.apply(o, arguments);
};

$.publish = function() {
var type = arguments.slice(0, 1)[0],
data = arguments.slice(1)[0];
//Preserve data for future subscribers to this event
pastEvents[type] = $.Deferred().resolve(data).promise();
o.trigger.apply(o, arguments);
};

}(jQuery));

@chrisclarke1977
Copy link

Even smaller just for sillyness

var o=$({}),s='subscribe';
$.each({on:s,off:'un'+s,trigger:'publish'},function(k,v){$[v]=function(){o[k].apply(o,arguments)};});

@zaus
Copy link

zaus commented Feb 11, 2013

If we're talking about relative sizes, why use "publish/subscribe" nomenclature? Just stick with "on/off/trigger" (or my preferred "on/off/do").

UPDATE I just found out why the "pros" stick to trigger instead of do (boo <IE9).

Example: https://gist.github.com/zaus/4756518

/* jQuery Tinier Pub/Sub - v0.9b - "on/off/do version" - 2013-02-11
 * original by http://benalman.com/ 10/27/2011
 * Original Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */

(function($) {

  // "topic" holder
  var o = $({});

  // attach each alias method
  $.each({on:0,off:0,"go":'trigger'}, function(alias,method) {
    $[alias] = function(topic, callbackOrArgs) {
        o[method || alias].apply(o, arguments);
    }
  });

}(jQuery));

@connected
Copy link

Is there a way i can e.preventDefault() on passed event? I ve tried it, but it doesn't work...

@zaus
Copy link

zaus commented Feb 19, 2013

@connected - what's the default event you're trying to prevent? isn't this limited to the arbitrary hidden topic var o? just curious.

@aghouseh
Copy link

@kodi thanks for the requirejs module implementation!

@mediafreakch
Copy link

How would you add support for wildcards in the topic name? Does it even make sense as jQuery doesn't support wildcards for event names? Or is using a standalone pub/sub library the better approach?

@gmanish
Copy link

gmanish commented Dec 4, 2015

I know some javascript and little of jQuery (been playing with Ember, just for fun). I understand the on off methods, but I do not understand what var o = $({}); does. Can anyone please explain?

As always, google doesn't consider these braces and the $ in its search results.

@shshaw
Copy link

shshaw commented Apr 14, 2016

@gmanish var o = $({}) simply creates a jQuery collection with an empty object {} that becomes the recipient of all the event triggers. As other comments show, the recipient could be anything like $('<b />').

@Kiodaddy
Copy link

I am telling you this is working really good.

@ahmed-musallam
Copy link

@lanikane
Copy link

Your article is very helpful for me. I am very impressed with your article. It gives me a lot of interesting information about quordle moviedle . Thank you very much.

@Rosendamans
Copy link

I suppose I should pose that issue on a Zepto forum, but I thought someone might have a workaround here. awnings near me Toms River NJ

@joanadavidson
Copy link

Zepto only makes use of the DOM-based event system so there's no way to get a real empty element to work as the global pub/sub-object. We might as well use ("").

Joana | peeling wallpaper

@biano22
Copy link

biano22 commented Sep 29, 2022

Thank you very much for your sharing, it has helped me in my great work, I have reduced my working time a lot because of you. I have coded some games like quordle , temple run .. if you are interested please connect with me.

@andrewmcmason
Copy link

Very elegant and clean code! Good job Ben! I've been using it personally at both my fun projects over at Taylordle and also Quordle game

@andrewmcmason
Copy link

I strongly believe that react is the way to go, especially when you are planning on having 1M+ visitors per day. A clear example is Wordle.gg which is a wordle game site and they are built using React

@AmoeScott
Copy link

I will try that code. Thank you. https://cincinnati-seo.com/

@andrewmcmason
Copy link

Can someone help please with a TypeScript version? I'm trying to implement it on nyt crossword answers

@leeannpor89
Copy link

The coding was complicated but thank you for sharing it with us. I would even share this with my friend working at Snow Removal Kamloops.

@joanadavidson
Copy link

I still receive notifications about this thread even when i'm in El Paso. Any update?

@SEO11SEO
Copy link

code is perfect i hope to see more kleinanzeigen

@michsullivan015
Copy link

I had a difficult time understanding the code. I'm having an headache. If interested, please visit our website.

@montans
Copy link

montans commented Mar 15, 2023

It allows different aspects of your application, usually called modules, to both subscribe to events other modules might publish, & publish ...
balenaetcher website & krnl download.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment