jQuery-Как написать плагин?

Сегодня, из статьи «jQuery-Как написать плагин?» Вы узнаете как правильно писать плагины на JavaScript библиотеке jQuery для себя или для общественности. Я уверен, что почти у каждого веб-разработка, который активно занимается веб-программированием, есть части программного кода, написанные на языке jQuery, из которых можно сделать отдельные, подключаемые плагины.

Приступаем к написанию плагина в jQuery

Сначала создадим новую функцию-свойство для объекта jQuery, где именем будет служить имя нашего нового плагина.

jQuery.fn.myPlugin = function() {

  // Тут пишем программный код нашего jquery плагина

};

Но постойте, что-то в этом коде не так. Что именно? А где же привычный, всем нам, знак доллара «$»? Он все еще с нами, но чтобы он не конфликтовал с другими JavaScript библиотеками, которые тоже используют знак доллара, например Prototype. Рекомендую обернуть объект jQuery непосредственно в выполняемую функцию-выражение, которое связывает символ знак доллара «$» с объектом jQuery, чтобы он не был переопределен другой библиотекой дваскрипта во время выполнения.

(function( $ ) {
  $.fn.myPlugin = function() {
  
      // Тут пишем программный код нашего jquery плагина

  };
})(jQuery);

Второй вариант однозначно лучше первого, особенно, если Вы используете несколько библиотек дваваскрипт одновременно. Но не будем отвлекаться от темы «jQuery-Как написать плагин?«. Теперь, внутри этого замыкания, Вы можете, без проблем, использовать знак доллара, вместо объекта jQuery. Итак, продолжим…

Контекст

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

И тут многие программисты часто делают ошибку, думаю, что в другом вызове, где jQuery принимает функцию обратного вызова, элемент «this» указывает на какой-либо элемент DOM дерева. Что может привести к тому, что разработчики jquery плагинов дополнительно оборачивают «this» в функцию jQuery.

(function( $ ){

  $.fn.myPlugin = function() {
  
    // нет необходимости писать $(this), так как "this" - это уже объект jQuery
    // выражение $(this) будет эквивалентно $($('#element'));
      
    this.fadeIn('normal', function(){

      // тут "this" - это элемент дерева DOM

    });

  };
})( jQuery );

$('#element').myPlugin();

Продолжение следует, ждите продолжение статьи "jQuery-Как написать плагин?"...