Basic Javascript PubSub Pattern

pubsub.js

//events - a super-basic Javascript (publish subscribe) pattern

var events = {
  events: {},
  on: function (eventName, fn) {
    this.events[eventName] = this.events[eventName] || [];
    this.events[eventName].push(fn);
  },
  off: function(eventName, fn) {
    if (this.events[eventName]) {
      for (var i = 0; i < this.events[eventName].length; i++) {
        if (this.events[eventName][i] === fn) {
          this.events[eventName].splice(i, 1);
          break;
        }
      };
    }
  },
  emit: function (eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(function(fn) {
        fn(data);
      });
    }
  }
};

Hello, what does exactly this bit do?

this.events[eventName] = this.events[eventName] || [];

If what it's doing is to check if the event already exist, why are we then pushing the function? What if it already exists? Thanks

@alemur an event can have multiple listeners, and those listeners may run different functions when that event occurs. If the event already exists it's corresponding function will be added to the array of that list, otherwise it will create a new item in the events object. He is storing all of the functions to be run when that event occurs in an array. Then on emit when that event is triggered it will iterate though that array and run all of the functions belonging to that event.

This looks great! The only change I would make is removing the unnecessary semicolon at the end of the for loop (line 16).

es2015 'yfied

//events - a super-basic Javascript (publish subscribe) pattern

class Event{

    constructor(){
        this.events = {};
    }

    on(eventName, fn) {

        this.events[eventName] = this.events[eventName] || [];
        this.events[eventName].push(fn);
    }

    off(eventName, fn) {

        if (this.events[eventName]) {
            for (var i = 0; i < this.events[eventName].length; i++) {
                if (this.events[eventName][i] === fn) {
                    this.events[eventName].splice(i, 1);
                    break;
                }
            };
        }
    }

    trigger(eventName, data) {

        if (this.events[eventName]) {
            this.events[eventName].forEach(function(fn) {
                fn(data);
            });
        }
    }

}

var events = (function() {

    var events = {};

    function on(eventName, fn) {
        events[eventName] = events[eventName] || [];
        events[eventName].push(fn);
    }

    function off(eventName, fn) {
        if (events[eventName]) {
            for (var i = 0; i < events[eventName].length; i++) {
                if( events[eventName][i] === fn ) {
                    events[eventName].splice(i, 1);
                    break;
                }
            }
        }
    }

    function emit(eventName, data) {
        if (events[eventName]) {
            events[eventName].forEach(function(fn) {
                fn(data);
            });
        }
    }

    return {
        on: on,
        off: off,
        emit: emit
    };

})();

This fails if you have an event named 'toString' or 'hasOwnProperty' or 'valueOf' or other Object.prototype methods.

@akmur its kind of a shorter version to this

this.events[eventName] = (this.events[eventName] === undefined) ? [] : this.events[eventName]/* || []*/

Pub/sub is a great pattern, but we often have to create publishers/listeners in opposite directions as we may expect replies.
Starting from another implementation, i added bidirectionalilty with silent, temporary reverse pub/sub, to avoid useless hard-coding :
https://github.com/frufin/js-bidirectional-pubsub

This gist is exactly the same as event programming. What's the difference between publisher-subscriber and event programming?

It's not good to compare functions on javascript. My callbacks were not being unsubscribed
A more safe way is to pass the caller object. Code below:

var events = {
                events: {},
		subscribe: function (eventName, object, callback) {
			this.events[eventName] = this.events[eventName] || [];
			this.events[eventName].push({object: object, callback: callback});
		},
		unsubscribe: function(eventName, object, callback) {
			if (this.events[eventName]) {
				for (var i = 0; i < this.events[eventName].length; i++) {
					if (this.events[eventName][i].object === object) {
					  this.events[eventName].splice(i, 1);
					  break;
					}
				};
			}
		},
		publish: function (eventName, data) {
			if (this.events[eventName]) {
				this.events[eventName].forEach(function(instance) {
					instance.callback(data);
				});
			}
		}
};

Some time ago I was playing with pubsub, too. In the end, I used Set and Map from ES6 to avoid many pitfalls with objects and arrays.

For example, the code above allows multiple insertions of the same function but then only removes one instance. Set takes care of it, plus adding/removing is faster.

The problems with toString et al. can be avoided with Map.

Here is just the pubsub part (no named events):

// pubsub.js
module.exports = () => {
  const subscribers = new Set()

  const sub = (fn) => {
    subscribers.add(fn)

    return () => subscribers.delete(fn)
  }

  const pub = (data) => subscribers.forEach((fn) => fn(data))

  return Object.freeze({ pub, sub })
}

If you are interested, the code can be found here: https://github.com/robinpokorny/dead-simple

My take on the pubsub pattern

// PubSub Pattern

let pubSub = {
  subscribers: new Map(),
  subscribe(name, fn) {
    if(typeof fn !== "function") 
      throw new Error("Second parameter must be a function");
    if(typeof name !== "string") 
      throw new Error("First parameter must be a string");
    
    if (!this.subscribers.has(name)) {
      this.subscribers.set(name, new Map());
    }
    if(fn.name === '') {
      throw new Error('Function cannot be annonymous')
    } else {
      this.subscribers.get(name).set(fn.name, fn)
    }
  },
  unsubscribe(name, fnName) {
    if(this.subscribers.has(name)) {
      if(this.subscribers.get(name).get(fnName)) {
        this.subscribers.get(name).delete(fnName);
        this.subscribers.get(name).size === 0 ? this.subscribers.delete(name) : null;
      } else {
        throw new Error(`Subscriber "${fnName}" not found`);
      }
    } else {
      throw new Error(`Publisher "${name}" not found`)
    }
  },
  publish(name) {
    if(this.subscribers.has(name)) {
      this.subscribers.get(name).forEach(fn => fn());
    } else {
      throw new Error(`Publisher "${name}" not found`)
    }
  }
};

pubSub.subscribe('activate', sayHi = () => {console.log('hi')});
pubSub.subscribe('activate', sayWorld = () => {console.log('world')});
pubSub.subscribe('activate', sayHeizenberg = () => {console.log('Heizenberg')});

pubSub.publish('activate')

Skhmt try events: Object.create( null )

var events = (function() {

    var events = {};

    function on(eventName, fn) {
        events[eventName] = events[eventName] || [];
        events[eventName].push(fn);
    }

    function off(eventName, fn) {
        if (events[eventName]) {
            for (var i = 0; i < events[eventName].length; i++) {
                if( events[eventName][i] === fn ) {
                    events[eventName].splice(i, 1);
                    break;
                }
            }
        }
    }

    function emit(eventName, data) {
        if (events[eventName]) {
            events[eventName].forEach(function(fn) {
                fn(data);
            });
        }
    }

    return {
        on: on,
        off: off,
        emit: emit
    };

})();

That’s iife