My first jQuery plugin, where do functions and global variables go?

Question

I'm writing my first jQuery plugin and I have a few questions about where I should put things. I tried searching around but it seems like there are different ways to structure plugins so I got lost. I got this far by following the Authoring Plugins docs on jQuerys site but wasn't sure where to go next.

1. Where do I put a common function? Take hello() for example. Say I plan on using that function throughout the plugin, where should it live? Right now I put it at the top, which seems to work, but I'm not sure it's the right thing to do.

2. Where do I put a global variable? Take my variable "imgs" array for example. Should I declare this where I have it now or in my init method or somewhere else?

   (function($){
   
   function hello(){
       alert("hello world");
   }
   var imgs = new Array(); 
   
   var methods = {
       init: function(options){
           if(options){
               $.extend({
                   width: 200,
                   height: 200,                        
                   selectedColor: '#123456'
               }, options);    
   
               // for every image do something
               this.find('img').each(function(){   
                   var $this = $(this);
   
                   var width = $this.width();
                   var height = $this.height();
   
                   console.log("width: " + width + " height: " + height);
   
                   selection = function() {
                       console.log($this.attr('src'));                         
                       hello();                
                   };
   
                   $this.bind('click', selection);                     
               });                 
           }               
           return this;        
       },
       test : function( string ) {
           console.log("Test: " + string);                 
           //return "here";
       }
   };
   
   
   $.fn.Thumbnails = function(method) {      
       // Method calling logic
       if ( methods[method] ) {
         return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
       } else if ( typeof method === 'object' || ! method ) {
         return methods.init.apply( this, arguments );
       } else {
         $.error( 'Method ' +  method + ' does not exist on jQuery.Thumbnails' );
       }             
   
   };
   
   })(jQuery);
   
   $thumbnails = $('#imagescontainer').Thumbnails({
           height: 150,
   });
   

Thanks for the help!

Answer 1

1. Place them outside of your jQuery function, but inside the self executing function. This will ensure they only exist to your jQuery function. For example, you can see the utility function findText() is outside of the jQuery function in my plugin bumpyText.

2. It depends on its required lifetime. If you need it per call to your function, place it inside your function. If it should retain its state per plugin call (unlikely), place it outside your jQuery function.