В статье рассмотрены основные правила, которыми должен руководствоваться веб-разработчик при написании плагина на jQuery.
Файл
Файл, в котором будет размещаться плагин, желательно назвать, используя следующий шаблон
jquery.[имя_плагина].js;
К документу плагин подключается следующим образом:
view sourceprint?
<script src="jquery.[имя_плагина].js" type="text/javascript"></script>
Фундамент плагина
(function( $ ){
$.fn.myPlugin = function() {
// Код плагина
};
})(jQuery);
Важно, код плагина необходимо помещать в само вызывающееся замыкание (function($){})(jQuery); чтобы исключить конфликты с другими библиотеками, которые могут использовать знак доллара($).
Новые плагины присоединяются к объекту jQuery.fn object.
Зарезервированное слово this
При использовании зарезервированного слова this нужно помнить о двух нюансах
Внутри плагина, this это ссылка на объект;
Если в коде плагина используется callback функция (click(), hover() и т.д.), то внутри нее ссылаться на объект нужно с помощью $(this);
(function( $ ){
$.fn.myPlugin = function() {
/*
Внутри плагина используйте this для ссылки на объект, т.к. $(this) равнозначна $($("#element"))
*/
this.click(function(){
//Внутри функции используйте $(this) для ссылки на объект
$(this).css("color", "red");
});
};
})(jQuery);
Цепочки
Удобство jQuery заключается в возможности применять к элементам документа цепочки последовательно вызываемых методов. Поэтому в большинстве случаев плагин конструируется таким образом, чтобы изменить элемент или группу элементов, и передать их на обработку последующим методам. Если вы конструируете плагин по такому принципу, то обязательно возвращайте this главной функции.
(function( $ ){
$.fn.myPlugin= function() {
/*
Возврат this главной функции, чтобы после работы Вашего плагина, элемент документа могли обрабатывать последующие методы
*/
return this.click(function() {
//Код плагина
});
};
})( jQuery );
После работы плагина, к объекту можно применять произвольные методы, благодаря тому, что ссылка на объект, была возвращена.
$("div"). myPlugin().css("color", "red");
Итерация объектов
При написании плагина всегда используйте метод this.each() для итерации всех объектов. На примере указанном ниже, очень хорошо видно, что плагин применяется к элементу div, а точнее к набору div`ов документа. Использование this.each позволяет грамотно обработать весь набор указанных div элементов.
(function( $ ){
$.fn.myPlugin= function() {
//Воспользуйтесь методом each() для итерации всех объектов
return this.each(function() {
//Код плагина
});
};
})( jQuery );
$("div").myPlugin();
Опции плагина
Сложный плагин всегда имеет набор параметров. Рекомендуется создать параметры по умолчанию, которые можно изменить или дополнить (используя $.extend) при вызове плагина.
(function($){
$.fn.myPlugin=function(options){
/*
В объекте settings указаны параметры по умолчанию, однако они будут изменены или дополнены, если при вызове плагина myPlugin в нем будут указаны опции (options)
*/
var settings=$.extend({
"location":"top",
"background-color":"red"
},options);
return this.each(function(){
//Код плагина
});
};
})(jQuery);
В следующем примере плагин вызывается с параметром "location":"left". В результате настройки по умолчанию будут изменены, и параметр "location" сменит свое значение с "top" на "left".
$("div").myPlugin({
"location" : "left"
});
Если плагин вызвать без параметров, то все настройки останутся по умолчанию.
$("div").myPlugin();
Методы
Никогда не помещайте в замыкание более одного имени в объект jQuery.fn.
(function( $ ){
//Никогда не делайте так
$.fn. myPlugin = function( options ) };
$.fn. myPluginShow = function( ) { };
$.fn. myPluginHide = function( ) { };
$.fn. myPluginUpdate = function( options ) };
})( jQuery );
Лучше всего собрать все Ваши методы в один объект и поместить его в замыкание. При вызове плагина первый параметр будет отвечать за название метода, а остальные параметры за другие действия.
(function( $ ){
//Методы помещаются в объект и располагаются в замыкании
var methods = {
init : function( options ) {},
show : function( ) {},
hide : function( ) {},
update : function( content ) {}
};
$.fn.myPlugin = function( method ) {
// Вызов метода
if( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
}else if( typeof method === "object" || ! method ) {
return methods.init.apply( this, arguments );
}else{
$.error("Метода: " + method + " не существует в Query.myPlugin");
}
};
})( jQuery );
Вызов плагина с различными параметрами:
$("div").myPlugin(); //вызов метода init
$("div").myPlugin({ //вызов метода init с параметрами
"location" : "left"
});
$("div").myPlugin("hide"); //вызов метода hide
$("div").myPlugin("update","Нoвый контент!"); //вызов метода update с параметрами