Javascript Plugin Framework is implemented to add extra functionality in the existing Web based application without actually changing the application code. This framework is also helpful when some functionality need to control for different user profiles.

For example, to add one extra button in a menu we can write the plugin directly, by defining what that button is going to do on click, what all events should it handle, in one javascript file rather than making changes in the application code for the same.

The Plugin Framework

The Plugin Class

// Definition of a plugin.
Plugin  = function () {
	this.id = "";
	this.customData = {};
}

Plugin.prototype = {
	/**
	 * Initialize method.
	 */
	init : function () {
		
	},
	/**
	 * Handle event method.
	 * @param eventId
	 * @param payload
	 */
	handleEvent: function (eventId, payload) {
		
	}
}

Plugin Registry

Plugin registry manage all the plugins and propagating event to the respective plugin.

/**
 * Plugins.js
 * 
 * It stores the plugins. This file defines a plugin and expose an API to register the plugin.
 */

Plugins = {
	/**
	 * Plugins array ordered for every event.
	 */
	pluginsData: [],
	/**
	 * Map of Event id and Index in plugin array. 
	 */
	mapEventIndexes: {},
	
	/**
	 *  Register plugin
	 *  @param {Plugin Object} - object of plugin.
	 *  @param {String} eventIds  - comma separated events ids. 
	 */
	registerPlugin: function(plugin, eventIds){
		var eventIdArr = eventIds.split(",");
		for ( var i = 0; i < eventIdArr.length; i++) {
			var eventId = eventIdArr[i];
			var eventIndex =  this.mapEventIndexes[eventId];
			//check if event is already registered.
			if(eventIndex || eventIndex == 0){
				var pluginArr = this.pluginsData[eventIndex];
				pluginArr[pluginArr.length] = plugin;
			} else {
				//Add new entry.
				 eventIndex = this.pluginsData.length;
				 var value  =  "{" + eventId +" : " + eventIndex + "}";
				 value = eval('(' +value+ ')');
				 jQuery.extend(this.mapEventIndexes, value);
				 this.pluginsData[eventIndex] = [plugin];
			}
		}
	},
	
	/**
	 *  Call handle event of all plugins who has registered for the event.
	 *  @param {String} eventId  - event identifier. 
	 *  @param {Object} payload - event payload
	 */
	handleEvent : function (eventId, payload){
		var eventIndex =  this.mapEventIndexes[eventId];
		var pluginArr =  this.pluginsData[eventIndex];
		if(pluginArr){
			jQuery.each( pluginArr, function (index, plugin){
				 plugin.handleEvent(eventId, payload);
			});
		}
	}
};

Extending the existing website

Lets extend the existing website using the plugin framework

• Define a plugin.

  image_rotation.js

  /**
   * Plugin for image rotation functionality.
   */
  var imageRotationPlugin = new Plugin();
  imageRotationPlugin.id = "Image_Rotation_Plugin";
  

• Define which all events the plugin would handle

  /**
   * Override Plugin.handleEvent
   * @See Plugins.js
   */
  imageRotationPlugin.handleEvent = function(eventId, payload){
      if(eventId == "rotate_image") {
          rotateImage(payload.id) // call method to rotate a image on given id
      }
  };
  

• Initialise the Plugin, where do you want to add this button/functionality.

   /**
    * Override Plugin.init
    * @See Plugins.js
    */
   imageRotationPlugin.init = function(){
  
       //Draw the button.
       var toolset =  jQuery('#menu');
       toolset.prepend("<li class='imagerotate'><a id='src_img' class='tooltip' title='Rotate the selected image'></a></li>");
  
  
       var imageRoateLink = jQuery('#menu li.imagerotate a');  
  
       //Add event handler to download the image map.
       imageRoateLink.click(function(){
           Plugins.handleEvent('rotate_image', {id:"image_source"});
       });
   }
  

• And, finally register the plugin

  jQuery(document).ready(function(){
      Plugins.registerPlugin(imageDownloadPlugin, "update_viewer_to_initial_state");
      imageRotationPlugin.init();
  });
  

This plugin will add a menu in existing website, which making changes in the main website code, we can manage the Plugins folder and keep extending the functionality.

We can call the Plugins.handleEvent('rotate_image', {id:"image_source"}) from any place of the code, and it will be receive the event. We can register our plugin to register for multiple events, even for th events raised globally or broadcasted by other plugins.