Как я могу предоставить публичную функцию в плагине 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

Просто сделайте функцию свойством 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.Вы можете хранить дополнительные вещи в $(this).data('PLUGINNAME') внутри функции PLUGINNAME, если вам нужно прикрепить внутренние данные к вашим отдельным объектам.

Answer 3

Я не парень jQuery, и мю слишком короткий ответ кажется правильным. Но я думаю, вы могли бы сделать так, как написано в собственных документах jQuery и использовать метод .data() для хранения значений min / max.

Другими словами, заставьте ваш код искать существующие данные об элементах, поэтому при первом вызове $('#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);