Правильная структура jQuery плагина, с публичными функциями

#jquery #javascript #плагин #функции

Для тренировки делаю плагин, открывающий/закрывающий всплывающие окна.
Соответственно в нем должны быть методы: открыть окно, закрыть окно и т.д.
Эти методы должны вызываться, как внутри плагина, при совершении определенных действий,
так и извне: $('#box').plugin.close() или $('#box').plugin('close');
Я перечитал все мануалы, возможные структуры плагинов.
Сейчас он реализован с помощью стандартной структуры, когда методы init, destroy
выделены в объект methods. Но я не понимаю, как правильно реализовать метод close. 
Я не понимаю, какие параметры ему нужно передавать, или как его вызывать, чтобы он
видел переменные определенные в теле функции плагина.
Вот примерная структура:
(function( $ ){

       var pop = function(element, options, callback1st, callback2nd)
       {
            var elem = $(element),
                obj = this,
                self = $(this);

            var settings = $.extend({
                openSpeed: '300',
                closeSpeed:'300',
                openAnim: 'default',
                closeAnim: 'default',
                method: 'default',
                checkboxShow: '3',
                callback1st: 'default',
                callback2nd: 'default'
            }, options || {} );

            var mpControl = elem.find(".mpcontrol"),
                mpContent = elem.find("div.mpcontent");
                             //логика работы
                }

        var methods = { 
          init:function() {},
          close:function() {}

        }

       $.fn.milkpop = function( method, callback1st, callback2nd ) { 
                   //вызываем метод или инициализируем плагин
    };
})( jQuery );

Мне нужно, чтобы переменные mpControl и mpContent для конкретного экземпляра были
доступны внутри метода Close()
Как правильно это реализовывать? Чтобы метод мог вызываться внутри и снаружи плагина
и взаимодействовал со всеми его перменными.

Апдейт
Из того, что придумал после написания поста.


Записать управляющие элементы в data, для элемента к которому применяется плагин.
Дальше внутри метода вытаскивать эти объекты и работать с ними (мне не очень нравится)


Записать управляющие объекты в массив settings. Передавать его в функцию Close(),
т.к. он там все равно нужен для выбора скорости и эффекта. Там считывать с него.
var settings = $.extend({
controlEl: elem.find(".mpcontrol"),
contentEl: elem.find("div.mpcontent")
}, options || {} );

methods.close.call(elem, settings);



Уже все работает, осталось получить уверенность в том, что это правильный подход :)    

Ответы

Ответ 1

Правильнее всего использовать jquery Widget Factory. Я тут сделал демонстрационный
пример, как создать плагин пользуясь данной методикой, это поможет вам обойти все подводные
камни:

http://codepen.io/lukas-pierce/pen/zNVgMK

(function($) {
  $.widget("custom.milkpop", {

    // параметры по умолчанию
    options: {
      bgColor: 'red', //цвет фона для ссылки открывающей модалку
      content: 'Hello world!',

      // Callbacks
      beforeShow: null,
      afterShow: null
    },

    // Конструктор
    _create: function() {
      //контекст уже содержит ссылку на jquery объект DOM-элемента
      this.element.css('background-color', this.options.bgColor);

      this._on(this.element, {
        click: "open"
      });
    },

    // public method (начинается без префикса _)
    open: function(e) {
      e.preventDefault && e.preventDefault();

      this._trigger("beforeShow");
      //заглушка, put your code for open modal here
      alert(this.options.content);
      this._trigger("afterShow");
    }

  });

})(jQuery);