wtw24
7/24/2018 - 8:04 AM

паттерн плагина на основе «моста» фабрики виджетов jQuery UI

паттерн плагина на основе «моста» фабрики виджетов jQuery UI

/*!
 * паттерн плагина на основе «моста» фабрики виджетов jQuery UI 
 * автор: @erichynds
 * дополнения: @addyosmani
 * лицензия MIT
 */

// конструктор объекта "widgetName"
// обязательны следующие аргументы
// options: объект опций плагина
// element: DOM элемент плагина
var widgetName = function( options, element ){
  this.name = "myWidgetName";
  this.options = options;
  this.element = element;
  this._init();
}

// прототипируем "widgetName"
widgetName.prototype = {

    // метод _create автоматически выполняется при первом 
    // вызове виджета
    _create: function(){
        // код создания плагина
    },

    // метод _init является обязательным методом фабрики
    // Он вызывается после создания 
    // и каждый раз, при каждой повторной его инициализации
    _init: function(){
        // код инициализации плагина
    },

    // метод 'option' также обязательный
    // в нем реализуется механизм работы с параметрами плагина
    option: function( key, value ){

        // ниже приведен пример изменения и получения параметров
        // сигнатура: $('#foo').bar({ cool:false });
        if( $.isPlainObject( key ) ){
            this.options = $.extend( true, this.options, key );

        // сигнатура: $('#foo').option('cool'); - геттер
        } else if ( key && typeof value === "undefined" ){
            return this.options[ key ];

        // сигнатура: $('#foo').bar('option', 'baz', false);
        } else {
            this.options[ key ] = value;
        }

        // обязательным условием метода «option»  
        // является возвращение текущего экземпляра.
        // при повторной инициализации плагина,
	// вызывается «option», и передается в метод _init
        return this;
    },

    // общие методы определяются без нижнего подчеркивания
    publicFunction: function(){
        console.log('public function');
    },

    // нижнее подчеркивание определяет приватные методы
    _privateFunction: function(){
        console.log('private function');
    }
};

// пример использования:

// соединяем нашу модель к API jQuery в пространство "foo"
// $.widget.bridge("foo", widgetName);

// создаем экземпляр виджета
// var instance = $("#elem").foo({
//     baz: true
// });

// экземпляр всегда доступен через кеш элемента
// instance.data("foo").element; // => #elem element

// мост позволяет вызывать общие методы...
// instance.foo("publicFunction"); // => "public method"

// но не даст вам вызвать приватные
// instance.foo("_privateFunction"); // => #elem element