jQuery plugins, data() and namespace

Question

I am trying to better understand how to create jQuery plugins, and am basing my understanding off http://docs.jquery.com/Plugins/Authoring. I am at the very end, and am confused on namespacing and data.

First (see QUESTION 1 in the below code): the tutorial shows that the target ($this) and the tooltip is both stored in the object literal.

What is the benefit of storing these specific variables?
If there was default values and custom options, would this be a good place to save the resulting settings object?

Also, is there a reason they did $(this).data('tooltip',{target:$this,tooltip:tooltip});, instead of $this.data('tooltip',{target:$this,tooltip:tooltip});?

Second (see QUESTION 2 in the below code): the tutorial shows how to destroy the plugin. I get $this.removeData('tooltip');, but what is the point of doing data.tooltip.remove();?

SOURCE: http://docs.jquery.com/Plugins/Authoring#Data

(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
           */

           //QUESTION 1
           $(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');

         QUESTION 2
         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 );

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

What is the benefit of storing these specific variables?

Variables stored in the data object become available to other methods when they are called.

target : I have used this plugin pattern and never found it necessary to store target:$this. However, in some cases it may be convenient to pass $(this).data around inside a complex plugin method. data.target gives you the freedom to do this while still allowing you to get back to what was originally $(this). There may be other reasons but I'm not aware of them.
tooltip : Will undoubtedly need to be used by other methods, see eg. the destroy method.

If there was default values and custom options, would this be a good place to save the resulting settings object?

Yes, settings can be stored in the data object and it is often convenient to do so if other methods need access to the settings whether or not they have been extended by options.

Also, is there a reason they did $(this).data('tooltip',{target:$this, tooltip:tooltip});, instead of $this.data('tooltip',{target:$this,tooltip:tooltip});?

No, there's no reason. $this is clearly in scope and it would be more efficient to use it in preference to re-wrapping this.

Second (see QUESTION 2 in the below code): the tutorial shows how to destroy the plugin. I get $this.removeData('tooltip');, but what is the point of doing data.tooltip.remove();?

data.tooltip.remove(); removes the dynamically generated <div /> element from the DOM. If it wasn't removed, then the tooltip would not be completely destroyed.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 26, 2012 at 2:16

Beetroot-Beetroot

18.1k3 gold badges39 silver badges44 bronze badges

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

1 Comment

user1032531 Over a year ago

Thank you Beetroot-Beetrot, You understood each of my questions perfected, and gave great answers.

Collectives™ on Stack Overflow

jQuery plugins, data() and namespace

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related