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 don't understand is how parameters that are extended by default for the plugin are sent to individual methods.

I am sure that any initial parameters are sent to the method here:

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

So how can you extend these default arguments? The example does not determine 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 sample plugin development 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

It looks like my previous answer was closer to the sign than I thought before.

Yes, this line passes 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 set of arguments instead of separate ones. It is convenient if you do not know how the arguments should be passed.

So you can break the above line as follows:

  // reference the arguments passed to the plugin var args = arguments; // eliminate the first one, since we know that 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 is called like this:

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

The "destroy" method will be found in the code, the "destroy" slice is turned off for the Arguments object, and "destroy" is called, passing through the array of remaining arguments.

Answer 2

you are using $.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 or save data, you can use the data method

therefore, if you are in the plugin, "this" is an element of the jquery element, now you can save the data in it.

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

and remove it

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