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

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