如何在 jQuery 插件中提供公共函数？

Question

我写了一个小型 jQuery 插件，结构如下：

(function($) {
   // Private vars

   // Default settings
   $.PLUGINNAME = {
         id: 'PLUGINNAME',
         version: '1.0',
         defaults: {
              min: 0,
              max: 10
         }
   };

   // extend jQuery
   $.fn.extend({

       PLUGINNAME: function(_settings) {

           init = function() {

           }

           prepare = function() {

           }

           ...

           return this.each(function() {
                 _this = this;
                 init();
           });

       }

   });

})(jQuery);

我这样称呼它：

$("#update-panel").PLUGINNAME({
                min: 1,
                max: 20  
          });

我正在尝试提供一个额外的公共方法，其中函数内的一些数据可以在上述对插件的函数调用之后更新，但我不确定如何去做。我正在寻找的是这样的：

_PluginInstance = $("#update-panel").PLUGINNAME({
                    min: 1,
                    max: 20  
                   });
...
...
_PluginInstance.setMin(2); //should change the minimum to 2

setMin 可能会使用一些插件的内部变量，所以我不明白该怎么做。我知道我没有返回插件实例来执行上述操作，但有人可以告诉我如何通过保持相同的插件结构来执行此操作吗？

Answer 1

只需在PLUGINNAME 对象中将函数设为this 的属性即可：

(function($) {
   $.PLUGINNAME = {
     // Default settings
   };

   // extend jQuery
   $.fn.extend({
       PLUGINNAME: function(_settings) {

           // private methods
           var init = function() {};
           var prepare = function() {};

           // public methods
           this.setMin = function ( val ) {
             _settings.min = val;
           };
           this.getMin = function () {
             return _settings.min;
           };

           return this.each(function() {
             _this = this;
             init();
           });
       }
   });
})(jQuery);

那么你可以这样做：

_PluginInstance = $("#update-panel").PLUGINNAME({
                    min: 1,
                    max: 20  
                   });
_PluginInstance.getMin(); // 1
_PluginInstance.setMin(2);
_PluginInstance.getMin(); // 2

编辑：天哪，我简直不敢相信我忘记了 var 关键字，你们为什么不告诉我我的苍蝇掉下来了？

Answer 2

您可以使用 jQuery-UI 方法调用样式：

$("#update-panel").PLUGINNAME('method', arguments...);

然后在你的插件中：

PLUGINNAME: function(_settings, args) {
    if(!$.isPlainObject(_settings)) {
        // _settings (should) be the method name so
        // do what needs to be done to execute the method.
        return;
    }
    // Proceed as before.

您可能希望使用arguments 伪数组而不是额外的args 参数。如果您需要将内部数据附加到各个对象，您可以在 PLUGINNAME 函数中的 $(this).data('PLUGINNAME') 中存储额外的内容。

Answer 3

我自己不是 jQuery 人，mu 太短 的答案似乎是正确的。但我想你也可以像jQuery's own docs 上所说的那样，使用.data() 方法来存储最小值/最大值。

换句话说，让您的代码在元素上查找现有数据，所以当您第一次调用 $('#update_panel').plugin({min:1, max:20}) 时，它不会找到任何现有数据，因此会将这些最小值/最大值放在一个对象中并使用.data()“保存”它们。
然后，当您稍后调用 $('#update_panel').plugin({min:2}) 时，您的代码会找到现有数据并更新值。

只是一个想法

Answer 4

您可以像定义插件一样定义变量。

$.fn.PLUGINNAME.someVariable = 4;

或者，如果您愿意，只需在插件外部声明一个空变量，然后从插件内部添加到它

var someVariable;

(function($) {
   ... the plugin code
})(jQuery);