Trying to learn jQuery plugin development

Question

So I'm trying to learn how to implement method collection for a plugin based on this example: http://docs.jquery.com/Plugins/Authoring

What I cannot understand is how options that are extended with defaults for the plugin get sent to the individual methods.

I'm pretty sure any original options get sent to the method here:

return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));

So how can you extend these arguments with defaults? The example doesn't really define how to do this...

var methods = {
      init : function( options ) {

           return this.each(function(){
               $(window).bind('resize.tooltip', methods.reposition);
           });

       }
}

Also, here is the code from the example plugin authoring page:

    (function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){
         $(window).bind('resize.tooltip', methods.reposition);
       });

     },
     destroy : function( ) {

       return this.each(function(){
         $(window).unbind('.tooltip');
       })

     },
     reposition : function( ) { // ... },
     show : function( ) { // ... },
     hide : function( ) { // ... },
     update : function( content ) { // ...}
  };

  $.fn.tooltip = function( method ) {

    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.tooltip' );
    }    

  };

})( jQuery );

Answer 1

Looks like my previous answer was closer to the mark than I previously thought.

Yes, this line is passing on the arguments:

return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));

Using .apply() , you can call a method, change its context ( this value), and give it a collection of arguments instead of individual ones. Handy if you don't know how may arguments need to be passed on.

So you can break the above line down like this:

  // reference the arguments passed to the plugin
var args = arguments;

  // eliminate the first one, since we know that's just the name of the method
args = Array.prototype.slice.call( arguments, 1 )

  // call the method that was passed, 
  //    passing along the Array of the arguments (minus the first one),
return methods[method].apply( this, args);

// Note that it is being called from the context of "this" which is the jQuery object

So if the plugin was called like this:

$('.someElem').tooltip('destroy', 'someArg', 'anotherArg' );

The code will locate the "destroy" method, slice "destroy" off of the Arguments object, and call "destroy" passing along the Array of remaining arguments.

Answer 2

you use $.extend(existingObject || {} (new object), oneObject, secondObject, nthObject)

var mydefaults = { myDefaultArg : "foo" }
var inputOptions = { myDefaultArg : "Somethin else" }

var options = $.extend({}, mydefaults, inputOptions);

options.myDefaultArg == "Somethin else";

To access data, or to save them,you can use the data method

so if you are in the plugin, "this" is the jquery element element, you can now save data into it.

$(this).data("pluginname.somedataname", data);

and retriev it

var data = $(this).data("pluginname.somedataname");