jQuery - Создание плагина

Как вы уже знаете, одним из главных качеств библиотеки jQuery является очень удобный поиск элементов и возможность дальнейших манипуляций с ними. Так вот, список этих манипуляций можно расширять, организуя новые методы для объекта jQuery. Вынесенные в отдельный файл, такие расширения образуют плагины для библиотеки jQuery.

Далее, описывая правила создания собственных плагинов мы будем реализовывать отдельный полноценный плагин в качестве примера. Его функциональность будет состоять в добавлении нового поведения для выбранных элементов — изменение цвета при наведении курсора. Назовем плагин responsiveBlock (отзывчивый блочный элемент).

Подключение

Обычно, javascript-плагины располагаются в отдельных файлах. Для файлов с плагинами jQuery существует соглашение касательно их названия — оно должно удовлетворять формату jquery.plaginName.js. Таким образом, файл с нашим плагином нужно будет назвать jquery.responsiveBlock.js.

Чтобы наш плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а затем js-файл с нашим плагином плагина:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" language="javascript"></script>
<script src="jquery.responsiveBlock.js" type="text/javascript" language="javascript"></script>

jquery.responsiveBlock.js

Чтобы добавить новый метод в объект jQuery, необходимо добавить функцию с его реализацией в объект jQuery.fn. В нашем плагине нужно организовать один метод — который будет добавлять элементам умение изменять цвет при наведении курсора. Назовем его так же как и сам плагин responsiveBlock:

jQuery.fn.responsiveBlock = function(){
  // здесь будет реализация метода
}; // точка с запятой в конце реализации очень важны! Без нее плагин не заработает.

Чтобы избежать возможных конфликтов имен, обернем наш код в конструкцию jQuery.noConflict():

```javascript
(function($){
  jQuery.fn.responsiveBlock = function(){
    // здесь будет реализация метода
  };
})(jQuery);
```

Переменная this, в теле метода, всегда содержит текущий объект jQuery (тот, на котором и был вызван метод). Для того, чтобы обойти все выбранные элементы по отдельности, используем метод .each(). А для возможности продолжить цепочку методов наш метод должен будет возвратить текущий объект jQuery:

(function($){
  jQuery.fn.responsiveBlock = function(){
    var make = function(){
      // реализация работы метода с отдельным элементом страницы
    };
 
    return this.each(make); 
    // в итоге, метод responsiveBlock вернет текущий объект jQuery обратно
  };
})(jQuery);

Свойства

В большинстве плагинов требуется наличие настроек. В нашем плагине например, будет очень полезна возможность указывать цвет элемента пока на него не наведен курсор и цвет после наведения. Существует один простой вариант организации настроек у плагина jQuery. Он позволят задавать список свойств, а так же их значения по умолчанию. Свои значения этих свойств, при этом, можно будет задавать в момент установки плагина на элемент, в первом параметре:

(function($){
  jQuery.fn.responsiveBlock = function(options){
    // Зададим список свойств и укажем для них значения по умолчанию.
    // Если при вызове метода будут указаны пользовательские
    // варианты некоторых из них, то они автоматически перепишут
    // соответствующие значения по умолчанию
    options = $.extend({
      defColor:"white", //цвет элемента над которым нет курсора
      hoverColor:"red" //цвет элемента на который наведен курсор
    }, options};
 
    var make = function(){
      // реализация работы метода с отдельным элементом страницы
    };
 
    return this.each(make); 
    // в итоге, метод responsiveBlock вернет текущий объект jQuery обратно
  };
})(jQuery);

// теперь можно задавать плагин с настройками по умолчанию:
$('div:first').responsiveBlock();
 
// или указать свои значения некоторых или всех настроек
$('div:last').responsiveBlock({defColor:"#bbbbbb"});
$('ul').responsiveBlock({defColor:"#aaaaaa", hoverColor:"green"});

Для лучшего понимания данного примера стоит ознакомиться с назначением функции $.extend

Полученная выше заготовка, является наиболее распространенным вариантом шаблона для плагинов jQuery. Поэтому если вы решили написать свой плагин, то можете смело начинать именно с нее (естественно со своим именем плагина и своим списком настроек).

Реализация

jsfiddle.net

<script async src="https://jsfiddle.net/moalex/xtLpb7g0/embed/js,result/?bodyColor=fff"></script>

События

Библиотека jQuery позволяет организовывать собственные события на элементах, и в дальнейшем устанавливать их обработчики (как на события onClick или onMousemove). Чтобы генерировать собственные события на выбранных элементах необходимо воспользоваться методом .trigger(), а устанавливать их обработчики можно с помощью .on(). Таким образом, плагины могут предоставлять не только новую функциональность но и связанную с ней систему событий, которой сможет воспользоваться любой пользователь вашего плагина.

Чтобы имена событий вашего плагина не пересекались с чужими именами событий, используйте пространства имен. Для этого удобнее всего использовать имя самого плагина.

В нашем плагине можно организовать событие stateChange, которое будет происходить при смене состояния элемента (наведен курсор или нет):

(function($){
  jQuery.fn.responsiveBlock = function(options){
    options = $.extend({
      defColor: "white", // цвет элемента над которым нет курсора
      hoverColor: "red"
    }, options);

    var make = function(){
      // здесь переменная this будет содержать отдельный DOM-элемент, к которому и нужно будет применить воздействия плагина
      $(this).css({ background: options.defColor })
             .mouseenter( function(){
                 $(this).css({
                   background: options.hoverColor
                 });
             })
             .mouseleave( function(){
                 $(this).css({
                   background: options.defColor
                 });
             });
    };
     
    return this.each(make);
  };
})(jQuery);

// теперь к элементам страницы можно будет привязывать обработчики события stateChange:
$('div').on('responsiveBlock.stateChange', handler);

Создавать более продвинутые плагины с возможностями ООП, можно воспользоваться фабрикой виджетов jQuery UI.