Плагин на jQuery 


Плагин на jQuery

Опубликовано

В статье рассмотрены основные правила, которыми должен руководствоваться веб-разработчик при написании плагина на jQuery.

Файл

Файл, в котором будет размещаться плагин, желательно назвать, используя следующий шаблон jquery.[имя_плагина].js;

К документу плагин подключается следующим образом:

<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 с параметрами

 

Пример плагина

В качестве примера можете ознакомиться с плагином для голосования.

Источник