Last active
January 17, 2020 07:35
-
-
Save wtw24/a565094a8c7cdd3306cd6aedcd64234c to your computer and use it in GitHub Desktop.
паттерн плагина на основе «моста» фабрики виджетов jQuery UI
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// конструктор объекта "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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment