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);
      });
    }
  }
};

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