Эта статья была рецензирована Марком Брауном и Джулианом Моц . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Возможно, вы уже работали над интерактивными компонентами, такими как слайдеры, галереи или интерактивные формы. Хотя вы можете создавать их на индивидуальной основе, одна из отличных возможностей сэкономить время — создать свою функциональность в виде плагина jQuery для ускорения разработки.
Плагины jQuery позволяют вам определить свою функциональность один раз, а затем добавить ее в свои проекты по мере необходимости, чтобы вы быстрее начали работать.
Мы рассмотрим, как создать свой собственный плагин jQuery. Мы рассмотрим все области, которые вам нужно знать, чтобы быстро приступить к созданию плагинов.
Мы будем использовать созданный мной плагин fancytoggle для демонстрации различных частей плагина. Это простой плагин для переключения видимости вложенных элементов, таких как элементы списка, для создания виджетов в стиле аккордеона для таких вещей, как часто задаваемые вопросы. Общая идея о концепции плагинов, но этот пример должен помочь вам увидеть, как все это работает на практике.
Плагин Подход: Преимущества
Основная идея здесь заключается в создании чего-то расширяемого, что вы можете добавить в свои проекты, чтобы обеспечить вам быструю функциональность. Функциональность плагина jQuery упрощает процесс создания повторно используемого кода.
Одной из сильных сторон этих плагинов является то, что они позволяют разработчику определять несколько параметров, которые можно использовать для настройки функциональности. Вы можете создать несколько опций, которые полностью изменят работу вашего плагина, или вы можете просто определить несколько, чтобы дать пользователю немного больше контроля над стилем или макетом. С плагинами этот выбор будет за вами.
Разработка плагинов jQuery
Давайте пройдемся по шагам, необходимым для регистрации нового плагина jQuery. Мы будем использовать наш примерный плагин, fancyToggle , чтобы вы могли увидеть, как все это собрано .
Создание нашей функции с $ .fn
Плагины jQuery работают, регистрируя функцию с именем, которое вы хотите вызвать, для запуска вашего плагина (например, вы вызываете встроенные .width() jQuery .width() или .height() когда хотите вернуть ширину / высоту)
Мы присоединяем нашу функцию к объекту $.fn jQuery, чтобы сделать его доступным глобальному объекту $ . Это регистрирует нашу функцию и позволяет вызывать ее для объектов или выборок.
//registering our function $.fn.fancytoggle = function(){ // ... };
Это все, что нужно сделать! Теперь у вас есть новый метод, который вы можете вызвать из объекта $ jQuery. Прямо сейчас он ничего не сделает, но вы можете вызывать этот метод где угодно, например, в селекторе:
//Call fancytoggle on this element $('.my-element').fancytoggle();
Вы можете зарегистрировать $.fn количество функций с помощью $.fn , однако рекомендуется избегать регистрации более чем одной функции, если плагин не выполняет явно разные задачи.
Несколько коллекций и циклы
Важно понимать, что когда ваш плагин вызывается, он может применять себя либо к одному элементу, либо к нескольким. Например, с нашим плагином, если мы применяем fancytoggle() к нескольким различным элементам, у нас будет коллекция для обработки в нашей функции.
Для обработки каждого элемента нам просто нужно $.each коллекцию с помощью функции $.each jQuery:
$.fn.fancytoggle = function(options) { // `this` refers to the jQuery elements your plugin is called on this.each(function(index, value){ // the rest of your plugins functionality here }); return this; };
Мы перебираем каждый элемент коллекции и настраиваем их. Возможно, мы выполняем вычисления, добавляем прослушиватели событий или играем с нашими элементами. Здесь $.each гарантирует, что мы $.each на правильный элемент.
Возврат объектов / цепочка
Большую часть времени ваши плагины будут работать, вызываясь непосредственно на объекте или на селекторе. Это выполняет функцию вашего плагина против этого элемента.
Одной из особенностей jQuery является концепция chaining , где вы можете вызывать несколько методов подряд для одного элемента, и каждый будет выполняться по порядку:
// Chaining several jQuery methods on a selector $('.my-element') .addClass('active') .slideToggle('fast');
Это выбирает элемент, добавляет активный класс и затем перемещает его вверх или вниз. Каждый метод возвращает объект, для которого затем вызывается следующий метод.
Чтобы наш плагин работал таким образом, все, что нужно, это вернуть элемент в конце функции вашего плагина. Хотя это технически не требуется, это настоятельно рекомендуется.
// defining our plugin function and returning it $.fn.fancytoggle = function() { // ... return this; };
Создание опций и конфигураций
Плагинам можно передать ряд опций, чтобы изменить способ их работы. Эти параметры передаются вашей функции в виде последовательности пар ключ / значение (объект JavaScript):
// apply fancyToggle to this element (and customize our values) $('.my-element').fancytoggle({ openSpeed: 300, closeSpeed: 600, });
Чтобы дать нашему плагину возможность обрабатывать параметры, нам нужно определить используемые по умолчанию настройки. Затем мы можем использовать метод $.extend jQuery, чтобы объединить наши параметры по умолчанию с параметрами, передаваемыми при вызове нашего плагина:
$.fn.fancytoggle = function(options) { // default arguments options = $.extend({ openSpeed: 400, closeSpeed: 400, easing: 'linear', // all your options here }, options); // ... return this; }
Вы можете определить столько параметров, сколько хотите для своего плагина, $.extend создаст один объект путем слияния и сбора значений. Возможно, вы захотите включить некоторые основные настройки или другие элементы, которые помогут вашему плагину настроить себя.
Для нашего плагина мы включаем несколько опций, чтобы определить, как плагин будет работать. Например, мы хотим, чтобы пользователь мог открывать столько областей, сколько он хочет. Однако у нас есть возможность позволить им переключаться только по одному разделу за раз (закрывая остальные). Во время нашей функции переключения мы проверяем, должны ли мы закрывать другие элементы на основе этого параметра.
options = $.extend({ singleItemOpen: false, }, options); // later on in our toggle function if (options.singleItemOpen === true) { var $activePanel = $item.siblings('.active'); animate($activePanel, 'data-min-height', 'data-close-speed'); }
Слушатели событий
Слушатели событий — это функции, которые будут вызываться в определенный момент жизненного цикла плагинов. Эти обратные вызовы позволят другим (или вам) подключиться к ключевым частям вашего плагина и активировать дополнительные функции.
Многие плагины jQuery, ориентированные на разработчиков, имеют обратные вызовы, к которым вы можете подключиться, например, при нажатии на слайд-шоу или закрытии модального окна.
Вы определяете эти обратные вызовы как элементы в опциях по умолчанию. Начните с добавления этих имен событий и установки их значений в пустые функции:
options = $.extend({ // ..., onItemClick: function(){}, onItemOpen: function(){}, onItemClose: function(){} }, options);
Вместо того чтобы использовать все эти пустые функции, jQuery предоставляет функцию $.noop . Это делает то же самое, но позволяет избежать накладных расходов на создание нескольких анонимных функций.
options = $.extend({ onItemClick: $.noop, onItemOpen: $.noop, onItemClose: $.noop }, options);
После того, как вы настроили свои настройки, вы можете создать свою функциональность там, где происходят обратные вызовы.
Обратные вызовы работают, вызывая ваши параметры, когда они запускаются. Например, в нашем плагине у нас есть onItemClick вызов onItemClick который мы хотели бы запускать каждый раз, когда кто-то нажимает на элемент переключения. Мы используем метод .call для запуска прослушивателя событий (если он был установлен).
Давайте посмотрим, как это выглядит:
// called when we click on any of our toggle items function toggle($item, event){ // trigger the event listener options.onItemClick.call(null, $item, event); });
Что это делает, когда мы переключаем наш элемент, мы передаем три параметра. Первый параметр — null : мы делаем это так, чтобы позже, когда мы расширили наш обратный вызов, нам не нужно было беспокоиться о значении this .
Наш второй параметр — это $item (переключаемый элемент): это важно, поскольку он предоставляет функции обратного вызова доступ к самому элементу.
Наконец, наш третий параметр — это наше event (само событие).
Слушатель событий будет иметь доступ как к $item и к event и сможет настроить вашу функциональность. Например, если мы хотим удалить элемент при нажатии:
$('.my-element').fancytoggle({ // on click, remove item and log it onItemClick: function($item, event){ $item.remove(); console.log('Removed this item!'); } });
Это одна из причин того, что события настолько разнообразны. Они могут предоставить разработчику доступ к вашему плагину в критические моменты, чтобы они могли расширить или изменить его в соответствии со своими потребностями.
Прогрессивное улучшение
Стоит задуматься о том, что происходит, когда JS отключен. Без этого наши плагины не будут работать, и мы останемся с любым HTML-контентом, с которого начали.
Для нашего примера мы создаем переключаемые разделы с заголовком и телом контента (щелкаем по заголовку, чтобы переключать тело вверх и вниз). Если бы у нас не был включен JS, наш контент все равно работал бы отлично.
Всегда важно учитывать эти случаи.
Куда пойти отсюда?
Расширяя свои знания
С основами, которые мы рассмотрели, вы можете применить эти концепции к существующему коду, превратив его в легко настраиваемые и расширяемые плагины, которые вы можете добавить в свой следующий проект. Существует огромное количество знаний о разработке плагинов. На самом сайте jQuery есть несколько разделов по разработке плагинов , которые стоит прочитать.
Копаем глубже в плагин
Лучший способ расширить свои знания — это просмотреть код существующих плагинов jQuery или попробовать создать свой собственный. Только после того, как вы поиграете, вы увидите, как воспользоваться этими плагинами, чтобы сэкономить время.
Наш обсуждаемый сегодня плагин fancytoggle можно найти в нашей учетной записи CodePen. Не стесняйтесь раскошелиться и поиграть с различными конфигурациями. Вы можете попробовать следующее:
- Добавить новые параметры в аргументы по умолчанию (и переопределить их)
- Добавьте дополнительные события к плагину, например, когда область переключателя изменяется или после того, как плагин инициализирован.
- Используйте существующие события, чтобы расширить функциональность плагина, например, запускать анимацию постепенного появления при открытии раздела, а затем исчезать при закрытии.
Подводя итоги: чему вы должны были научиться
Теперь вы должны четко понимать, что такое плагины jQuery и как вы можете использовать их для ускорения и упрощения разработки. Вот разбивка того, что мы рассмотрели:
- Добавление плагина в пространство имен jQuery с помощью
$.fn - Обработка нескольких коллекций с помощью цикла
.each - Как создать цепочечные методы (и правильно вернуть их для согласованности)
- Как создать параметры по умолчанию и объединить их с переданными в пользовательских значениях
- Как обратные вызовы событий предоставляют разработчикам легкий доступ к важным частям функциональности плагина
- Кратко коснулся прогрессивного улучшения (соображения, когда JS недоступен)
Вы уже создали свои собственные плагины? У вас есть несколько советов по разработке плагинов, которыми вы хотели бы поделиться? Дай мне знать в комментариях!