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

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

(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);

如何在jQuery插件中提供公共功能？

4 个答案: