jQuery / javascript argument handling question

Question

First of all I don't know how to phrase the question "title", sorry if I am confusing everyone with the title here.

Anyway, I saw this code at jQuery http://docs.jquery.com/Plugins/Authoring

(function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){

         var $this = $(this),
             data = $this.data('tooltip'),
             tooltip = $('<div />', {
               text : $this.attr('title')
             });

         // If the plugin hasn't been initialized yet
         if ( ! data ) {

           /*
             Do more setup stuff here
           */

           $(this).data('tooltip', {
               target : $this,
               tooltip : tooltip
           });

         }
       });
     },
     destroy : function( ) {

       return this.each(function(){

         var $this = $(this),
             data = $this.data('tooltip');

         // Namespacing FTW
         $(window).unbind('.tooltip');
         data.tooltip.remove();
         $this.removeData('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 );

My question being is that I cannot understand why do we need this if statement?

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

Or in other words, in what scenario that we will pass in argument like "methods[method]" base on the example?

Thanks!

Thanks everyone! All the answers are helpful in a way, I appreciate the prompt replies from everyone ^^ — forestclown
– forestclown, Commented Mar 7, 2011 at 8:34

moe · Accepted Answer · 2011-03-07 08:22:18Z

4

That if statement will check if you are trying to call one of the methods available to the plugin. In the case of you example you have these methods:

init, destroy, reposition, show, hide, and update

So you can do a call like :

$.tooltip('init', { arg1: true, arg2: 'a value' });

Then your code knows where to send the arguments because this if statement will be true:

if(methods['init'])

answered Mar 7, 2011 at 8:22

moe

30k4 gold badges21 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Kling · Accepted Answer · 2011-03-07 08:21:51Z

You see at the beginning that the code defines an object methods.

The function $.fn.tooltip = function( method ) accepts an argument with name method (no s at the end).

The function will execute one of the methods defined in methods, but it can only do it, if this method is also available. Hence the if(methods[method]).

The expression will be true if method is e.g. show, hide, update, etc, i.e. if the methods object has a property with the name contained in method.

Therefore the expression will be false for foo or bar. If the if statement would not be there, the code would try to call method['foo'], which does not exist and you would get an error:

TypeError: object is not a function

Is this what you wanted to know?

JeSuisse · Accepted Answer · 2011-03-07 08:24:24Z

1

Your code snippet isn't complete and it doesn't contain a demo to show how it's called, so it's hard to give a definite answer.

However, here's what I think from what the code looks like:

The if statement is necessary because the tooltip function will be called with arguments such as init, destroy, show, hide, update, which refer to the functions defined in the methods hash. You probably call tooltip with init to initialize the tooltip, hide to hide it, show to show it etc. If you don't pass an argument at all, it defaults to the init method and initializes the tooltip (second branch of the if).

answered Mar 7, 2011 at 8:24

JeSuisse

3591 silver badge6 bronze badges

Comments

krtek · Accepted Answer · 2011-03-07 08:25:38Z

1

First of all, the piece of code declares an hashmap named methods which contains some functions.

Then, the second part declares a function named tooltip which takes a parameter named method. This parameter is the name of the function we want to call, this name is the index of this function in the methods array.

So, when you do $('#whatever').tooltip('destroy'); it will look in the methods array for the function referenced with the destroy key.

answered Mar 7, 2011 at 8:25

krtek

26.7k5 gold badges60 silver badges84 bronze badges

Collectives™ on Stack Overflow

jQuery / javascript argument handling question

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related