如何在jQuery插件實例之間共享屬性和函數？

Question

我想分享一個jQuery插件實例（我創建一個）之間的屬性和方法 我會如何做到這一點？

Supose我有一個簡單的插件定義爲：

// add the plugin to the jQuery.fn object 
$.fn.clickableImage = function(options) { 

    this.set_not_clicked = function(){ 
     return this.each(function() { 
     $(this).addClass('not-clicked'); 
     }); 

    }; 

    // iterate through the DOM elements we are attaching the plugin to 
    return this.each(function() { 
     $(this).click(function(){ 
     parent.set_not_clicked() //how to get "parent" ??? 
     $(this).removeClass('not-clicked').addClass('clicked'); 
     }); 
    }); 
} 

而且，圖像實例化如下：

$(function(){ 
    $('#some-selector img').clickableImage(); 
}); 

如何使 「clickableImage」 知道他人的 「clickableImage」？

Answer 1

閉包是javascript中的常見模式，因爲它們可以防止全局名稱空間污染。

詳見該SO問題：What exactly does "closure" refer to in JavaScript?

A「閉合」是可以與結合這些變量的環境具有自由變量一起（即「封閉的」表達的表達（通常是功能） ）。

你的情況，這將是這樣的：

(function($){ 
    var instances = []; 
    function count(){ 
    alert(instances.length); 
    } 

    function hide_parent(){ 
    for(var i=0;i<instances.length;i++){ 
     $(instances[i]).parent().hide(); 
    } 
    } 

    $.fn.clickableImage = function(options) { 

    // Use a class to prevent double bindings.  
    this 
    .filter(':not(.clickImage)') 
    .addClass('clickImage') 
     // iterate through the DOM elements we are attaching the plugin to 
    .each(function() { 
     instances.push(this); 
     $(this).click(function(){ 
      // Alert the current image count: 
      count(); 
      // Hide all parents: 
      hide_parent(); 
     }) 
     }) 

    return this; 
    } 
}(jQuery)); 

alert(typeof instances);// will return undefined 

你也可以添加一個類，並在DOM中搜索類：

$.fn.clickableImage = function(options) { 
    // iterate through the DOM elements we are attaching the plugin to 
    return this 
     .addClass('clickImage') 
     .each(function() { 
     $(this).click(function(){ 
     $("img.clickImage").each(function(){ 
      $(this).parent().hide(); 
     }); 
     alert(instances_count); 
     }); 
    }); 
}