調用公共方法的jquery插件

Question

我試過了一個jQuery Plugin Boilerplate從這個網站：jQuery_boilerplate，但我不能調用公共方法fooBar。 我implemantion樣子：

/** 
* jQuery lightweight plugin boilerplate 
* Original author: @ajpiano 
* Further changes, English comments: @addyosmani 
* More further changes, German translation: @klarstil 
* Licensed under the MIT license 
*/ 
;(function ($, window, document, undefined) { 
    "use strict"; 

    var pluginName = 'defaultPluginName', 
     defaults = { 
      propertyName: "value" 
     };  

    var privateMethod = function() { 
    }; 

    function Plugin(element, options) { 

     this.element = element; 
     this.options = $.extend({}, defaults, options) ; 

     this._defaults = defaults; 
     this._name = pluginName; 

     this.init(); 

    } 

    Plugin.prototype.init = function() { 
    }; 

    Plugin.prototype.fooBar = function(someValue) { 
     var fooBarModifier = 3; 

     function privateFooBar(someValue) { 
      return someValue * fooBarModifier; 
     } 

     someValue = privateFooBar(someValue); 
     return someValue; 
    }; 

    $.fn[pluginName] = function (options) { 
     return this.each(function() { 
      if (!$.data(this, 'plugin_' + pluginName)) { 
       $.data(this, 'plugin_' + pluginName, 
       new Plugin(this, options)); 
      } 
     }); 
    } 
})(jQuery, window, document); 

比如我使用的插件是這樣的：

$('#wrapper').defaultPluginName(); 

和我嘗試調用這樣的方法：

$('#wrapper').fooBar(); 

但我的控制檯爲我bck一個這個錯誤：

TypeError: $(...).fooBar is not a function $('#wrapper').fooBar();

如何在此選擇上調用方法？

Answer 1

這是因爲$('#wrapper')沒有返回插件的實例，它返回一個jQuery包裝器，用於沒有fooBar方法的匹配DOM元素集。

如果你想調用插件的公共方法，嘗試：

$('#wrapper').data('plugin_defaultPluginName').fooBar(); 

插件實例作爲數據存儲的元素與名'plugin_' + pluginName，所以：

1. $('#wrapper').data('plugin_defaultPluginName')將返回實例插件名稱爲defaultPluginName
2. .fooBar();在插件實例中調用方法fooBar