Structuring a new plugin

Structuring a new plugin

Hey,

I'm in the process of developing a new plugin but the way I have structured the codes doesn't seem quite right to me so I'm hoping someone might be able to offer a better way to do it.

The plugin itself has different behaviour if called on different types of elements (images, divs etc) with a range of shared functions used across all element types.

This is the basic structure I have so far:

(function ($) {
   $.fn.editable = function (options) {
      var defaults = {
         // default value declarations
      }
      
      var opts = $.extend(defaults, options);
      
      return this.each(function () {
         var $this = $(this); // Cache a jQuery version of this
         var tag   = $this.get(0).tagName;

         switch(tag) {
            case 'DIV': initDiv();        break;
            case 'IMG': initImage();      break;
         }
         
         function initDiv () {
            // initialise the plugin to work with divs
         }
         
         function initImage () {
            // initialise the plugin to work with images
         }
         
         // functions used by divs only
         function divFunction () {
            // body...
         }
         
         // functions used by images only
         function imageFunction () {
            // body...
         }
         
         // functions used by divs and images
         function sharedFunction () {
            // body...
         }
         
      });
   }
})(jQuery);


The reason it does seem right to me is because any instance of the plugin called on a div will also contain all the code that is used if it was an image even though the code won't be used.

Can any offer something better?