Design Patterns : Publish / Subscribe Pattern

ajax.js

/**
 * @fileoverview The sample js file that are thought that publishes the coming data from an API endpoint
 * @author hwclass
 */
 
/** 
 * ajax.js
 * This file contains a publish command for productsFetchedEvent
 */
 
'use strict';
 
//-----------------------------------------------------------
// Public
//-----------------------------------------------------------

publish('productsFetchedEvent', {desc : 'This is the test data for products!'});

app.js

/**
 * @fileoverview The main methods are contained here to broadcast and catch event mechanism
 * @author hwclass
 */
 
/** 
 * app.js
 * This file contains subscription and publish methods to setup an event stream 
 */
 
'use strict';
 
//-----------------------------------------------------------
// Public
//-----------------------------------------------------------

var TOPICS = TOPICS || {};

/**
 * subscribe method
 * @param {String} topic
 * @param {Function} listener
 */
var subscribe = function (topic, listener) {
  if(!TOPICS[topic]) TOPICS[topic] = { queue: [] };
  var index = TOPICS[topic].queue.push(listener);
  return (function(index) {
    return {
      remove: function() {
        delete TOPICS[index];
      }
    }
  })(index);
}

/**
 * publish method
 * @param {String} topic
 * @param {Object} info
 */
var publish = function (topic, info) {
  if(!TOPICS[topic] || !TOPICS[topic].queue.length) return;
  var items = TOPICS[topic].queue;
  for(var x = 0; x < items.length; x++) {
    items[x](info || {});
  }
}

productList.js

/**
 * @fileoverview A principle file that is used to make some functional things over a list view
 * @author hwclass
 */
 
/** 
 * productList.js
 * This is an only a sample file to be initialized in a view that lists products 
 */
 
'use strict';
 
//-----------------------------------------------------------
// Public
//-----------------------------------------------------------

subscribe('productsFetchedEvent', function (data) {
  console.log('Published data : ' + data.desc);
});