Last active
January 17, 2020 06:46
-
-
Save wtw24/c31b42ee352cd24ab7a0d40d30d563a5 to your computer and use it in GitHub Desktop.
паттерн простого плагина jQuery
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
// предваряющие точка с запятой предотвращают ошибки соединений | |
// с предыдущими скриптами, которые, возможно | |
// не были верно «закрыты». | |
;(function ( $, window, document, undefined ) { | |
// т.к. undefined, по определению ECMAScript 3, не является константой | |
// здесь мы явно задаем неопределенную переменную | |
// убеждаясь в ее действительной неопределенности | |
// В стандарте ES5, undefined уже точно константа | |
// window и document передаются локально, вместо глобальных | |
// переменных, что немного ускоряет процесс определения | |
// и позволяет более эффективно минифицировать | |
// ваш код, если эти переменные часто используются | |
// в вашем плагине | |
// определяем необходимые параметры по умолчанию | |
var pluginName = 'defaultPluginName', | |
defaults = { | |
propertyName: "value" | |
}; | |
// конструктор плагина | |
function Plugin( element, options ) { | |
this.element = element; | |
// в jQuery есть метод extend, который | |
// объединяет несколько объектов в один, | |
// сохраняя результат в первый объект. | |
// зачастую первый объект является пустым, | |
// предотвращая затирание дифолтных значений | |
this.options = $.extend( {}, defaults, options) ; | |
this._defaults = defaults; | |
this._name = pluginName; | |
this.init(); | |
} | |
Plugin.prototype.init = function () { | |
// Тут пишем код самого плагина | |
// Здесь у нас уже есть доступ к DOM, и входным параметрам | |
// через объект, типа this.element и this.options | |
}; | |
// Простой декоратор конструктора, | |
// предотвращающий дублирование плагинов | |
$.fn[pluginName] = function ( options ) { | |
return this.each(function () { | |
if (!$.data(this, 'plugin_' + pluginName)) { | |
$.data(this, 'plugin_' + pluginName, | |
new Plugin( this, options )); | |
} | |
}); | |
} | |
})( jQuery, window, document ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment