如何在jQuery插件中提供一个公共函数?

How can I provide a public function in a jQuery plugin?

本文关键字：一个 函数 jQuery 插件      更新时间：2023-09-26

我写了一个小的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可能会使用一些插件的内部变量，所以我不明白如何做到这一点。我知道我没有返回一个插件的实例来做上面的事情，但是有人能告诉我如何通过保持相同的插件结构来做到这一点吗?

让这个函数成为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关键字，为什么你们都不告诉我我的苍蝇掉下来了?

你可以使用jQuery-UI方法调用style:

$("#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')中存储额外的内容。

我不是jQuery爱好者，而且mu太短了的答案似乎是正确的。但我认为你也可以像jQuery自己的文档中所说的那样，使用.data()方法来存储最小/最大值。

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

只是一个想法

你可以定义一个变量，就像你定义一个插件。

$.fn.PLUGINNAME.someVariable = 4;

或者，如果你喜欢，只是在插件外声明一个空变量，然后从插件内部添加到它

var someVariable;
(function($) {
   ... the plugin code
})(jQuery);
相关文章：