学习和扩展jQuery插件

Question

I am in process of learning more about javascript plugins and found one that is of interest to me. I am willing to get my feet dirty and see how this thing can be modified...

(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 ) {

     console.log('still working..'  );
       /*
         Do more setup stuff here
       */

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

     }
   });

},
show : function( ) {
  console.log('this is the show');
},
hide : function( ) { 
  // GOOD
},
update : function( content ) {
  console.log('this is the update');    
  // !!! 
    }
  };

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

  };
   })( jQuery );

ok I have 4 questions... 1.how do you initialize this plugin? i keep getting 'still working..' with my console log when i try to run a random div element, $('#mtest').tooltip();.

2 the init: is inside the var method, which is private, meaning I can't access init: from outside of this plugin? right? where would i put initializing logic at since it appears to be returning options...?

3. I am confused about this part of the code...

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

I know its returning all the methods, but...

3a. why write methods[method]// is looks like [method] is an array, and that looks confusing to me because I don't see an array, its a bunch of methods...

3b. what is the else checking for? or why would an error occur?

thanks for any advice on helping me fully understand this plugin!

Answer 1

I don't know what your getting at with the first question. But the other questions can be solved pretty easily.

First, lets go over 3.

The code you have, and what jQuery provides in their docs, is merely a sort of "getter" between you and your methods. Instead of clustering up a namespace with all of your methods, you put your methods into an object title methods (which is instantiated on the second line of your first block of code.

If you look at the jQuery provided code you are asking about, its not returning methods as you've thought. Its calling the method of the key in your methods object. The first if statement says that if you call your plugin (in your case, tooltip) with a string variable, it will look up that index in the methods object and Call the function.

The second else if block says that if you pass a object as a parameter OR no parameter, it will call your init method. This is sort of like a custom built getter/initializer for your plugin.

So now, to answer your second question, the init method can be accessed by either calling your tooltip plugin with..

1) no parameters

2) a object parameter (usually options such as {"someOption":true,"anotherOption":400} )

3) the string 'init' as in $('#id').tooltip('init')

This way you can also access your show and hide methods with...

$('#id).tooltip('hide') ... and so forth.

You can read up on this in the jQuery docs for much more detail. This is me merely putting it into layman's terms.