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) it has a range of shared functions used
across all element types and some function specific to certain
elements.

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?

Reply via email to