jQuery插件，數據（）和命名空間

Question

我想更好地瞭解如何創建jQuery插件，並基於我的理解http://docs.jquery.com/Plugins/Authoring。我處於最後，對命名空間和數據感到困惑。

首先（見下面的代碼問題1）：教程顯示靶（$this）和工具提示都存儲在對象文字。

1. 存儲這些特定變量的好處是什麼？
2. 如果有默認值和自定義選項，這是否是保存結果設置對象的好地方？

另外，有沒有一個原因，他們沒有$(this).data('tooltip',{target:$this,tooltip:tooltip});，而不是$this.data('tooltip',{target:$this,tooltip:tooltip});？

第二個（參見下面的代碼中的問題2）：本教程展示瞭如何銷燬插件。我得到$this.removeData('tooltip');，但是做什麼data.tooltip.remove();？

來源：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); 

Answer 1

什麼是存儲這些特定變量的好處？

存儲在data對象中的變量在調用時可用於其他方法。

• 目標：我已經使用這個插件模式，從來沒有發現它需要存儲target:$this。但是，在某些情況下，在複雜的插件方法中傳遞$(this).data可能會很方便。 data.target可以讓您自由地做到這一點，同時仍然允許您回到最初的$(this)。可能還有其他原因，但我不知道它們。

• tooltip：無疑需要被其他方法使用，方法destroy。

  如果有默認值和自定義選項，這會是一個保存結果設置對象的好地方嗎？

是，settings可以存儲在data對象，這是很方便的做，如果其他方法都需要訪問他們是否已被擴展選項的設置。

另外，是否有他們做的原因$(this).data('tooltip',{target:$this, tooltip:tooltip});，而不是$this.data('tooltip',{target:$this,tooltip:tooltip});？

不，沒有理由。 $this顯然在範圍內，並且使用它以優先重新包裝this會更有效。

其次（參見下面的代碼中的問題2）：本教程展示瞭如何銷燬插件。我得到了$this.removeData('tooltip');，但是做data.tooltip.remove（）是什麼意思？

data.tooltip.remove();從DOM中刪除動態生成的<div />元素。如果它沒有被刪除，那麼工具提示不會被完全銷燬。