Как создать плагин для jQuery

Чаще всего мне приходится писать скрипты под jQuery, и иногда очень удобно реализовывать функциональность путем создания плагина. В этой статье я покажу как это можно сделать. Пример будет тривиальный, но надеюсь понятный. Фунцкиональнось учебного плагина аналогична hover эффекту – при наведении указателя мыши на элемент, его фон меняется, если убрать указатель, то фон меняется на первоначальный (этого можно достичь при помощи CSS, но не забывайте, что это всего-лишь пример).

В основе библиотеки jQuery лежит класс с аналогичным названием jQuery (у него есть псевдоним $). Подобно тому, как классы в JavaScript можно расширять, используя свойство prototype, точно также мы можем расширить функциональность класса jQuery. Именно таким образом и создаются плагины. Поскольку в jQuery для свойства prototype есть псевдоним fn, то он чаще всего и используется для этой цели.

Наш плагин начинаем следующим образом:

(function($){
    $.fn.backgroundHover = function(options) {
       return this.each(function () {
          // Код плагина
       });
    };
})(jQuery);

Первая и последняя строка этого блока представляют собой вызов анонимной функции, единственным аргументом которого будет объект jQuery. В результате, мы получим еще одну область определения переменных (scope), то есть, все переменные и функции, объявленные внутри этой анонимной функции будут недоступны извне (не распространяются на глобальную область видимости window). Поскольку плагин выполняет действия над некоторым множеством элементов DOM в одном вызове, то мы должны обрабатывать все эти элементы в одном цикле. Это делается при помощи функции each в строке 3.

Все плагины способны принимать некоторое количество параметров, выполним эту функциональность следующим образом:

$.fn.backgroundHover = function(options) {
      options = $.extend({
         background: 'red',
      }, options);

Все параметры хранятся в переменной options. Для инициализации этой переменной мы используем фунцию $.extend(), первым аргументом которой указываем объект, с параметрами по умолчанию, второй аргумент – параметры, указанные пользователем. В нашем случае, имеем всего лишь один параметр – цвет фона (background), по умолчанию он имеет значение red.

Ну и последний шаг – добавляем функциональность плагина внутрь функции each:

var self = $(this);
   self.mouseover(function() {
      self.oldBG = self.css('backgroundColor');
      self.css('backgroundColor',options.background);
   });

   self.mouseout(function() {
      self.css('backgroundColor',self.oldBG);
   });

В первой строке мы создаем переменную self, которая будет ссылаться на текущий элемент DOM. Для всех выбранных элементов будут добавлены два обработчика событий – mouseover и mouseout, которые будут менять цвет фона в соответсвии с параметром options.background.

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

$('.someNodes').backgroundHover({background: "#fce"});

Исходный код плагина можно посмотреть здесь: background.jquery.js.

Демо примерИсточник