Теперь, когда мы рассмотрели использование плагинов jQuery, совершенно необходимо понять, как их создавать. Мы уже вкратце коснулись того факта, что вы можете расширить собственный объект jQuery, если хотите. Как:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Но само по себе это не особенно полезно. Чтобы создать новый метод для jQuery, который вы можете вызывать для набора элементов, вам нужно сделать это следующим образом:
$.fn.myMethod = function() ( // I'm a new method ));Это в точности то же самое, что и использование .prototype в jQuery, и для любопытных вы можете прочитать об этом здесь. Это означает, что мы сможем использовать этот новый метод для набора элементов. Нравиться:
$("li").myMethod();Вы можете делать все, что захотите, в рамках этого метода, но чтобы стать хорошим специалистом по созданию плагинов jQuery, вы должны вернуть тот же набор элементов обратно из плагина.
$.fn.myMethod = function() ( // Do some stuff return this; ));Таким образом, он будет работать с цепочкой. Если вы этого не сделаете, и кто-то пробовал что-то вроде:
$ («Ли»). MyMethod (). Show ();
Это потерпит неудачу, потому .show()что по сути ничего не вызовет. Часто плагины jQuery создаются так, чтобы перебирать каждый элемент, чтобы у вас был прямой доступ к каждому отдельному элементу в наборе, чтобы делать то, что вам нужно.
Еще один добрый гражданин, который нужно сделать, - обернуть плагин в выражение с немедленным вызовом функции и передать ему jQuery в качестве параметра. Таким образом, вы можете более безопасно использовать $ внутри кода плагина. Это потому, что в некоторых случаях сокращение $ для jQuery недоступно (например, пользователь использовал jQuery в «режиме совместимости»).
С обоими из этих двух последних вещей структура плагина становится:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)В скринкасте мы создали простой плагин для добавления стрелки в конец любого элемента.
См. Перо Криса Койера (@chriscoyier) на CodePen
Конечно, это может усложниться по мере роста вашего стремления сделать больше.