jQuery — одна из самых популярных библиотек JavaScript среди веб-разработчиков и дизайнеров. И много новых плагинов с удивительными эффектами создаются каждый день. Разработчики и пользователи обычно выбирают плагины jQuery, когда это возможно. Если вы все еще не знаете о jQuery, эта статья поможет вам понять, почему они так популярны.
Плагин — это независимый модуль, который добавляет пользовательские функции в приложение. Включение или отключение плагина не влияет на основную систему или другие плагины. Как разработчики, мы склонны искать быстрые исправления, а не фокусироваться на поддерживаемых решениях. С опытом мы меняем наш подход, чтобы учесть ремонтопригодность и будущие улучшения. Чтобы понять, почему плагины являются таким привлекательным вариантом, мы должны сначала понять, какой была бы жизнь без них.
Разработка без плагинов
Предположим, что нам была дана задача преобразовать меню, состоящее из неупорядоченных списков, в поле выбора. Это будет очень удобная функция в нашем адаптивном наборе инструментов веб-дизайна. Итак, мы собираемся использовать его в качестве базового примера для понимания, почему мы разрабатываем плагины jQuery. Давайте посмотрим на базовую реализацию jQuery.
<script> $(document).ready(function(){ var select = $('<select>'); $('#menu li').each(function() { var link = $(this).find('> a'); var level = $(this).parents('li').length; var indent = ''; for(i=0;i<level;i++){ indent += '-'; } var option = $('<option>').text(indent + ' ' + link.text()) .val(link.attr('href')) .appendTo(select); }); $('#menu').replaceWith(select); }); </script> Приведенный выше фрагмент кода преобразует элементы неупорядоченного списка в параметры внутри поля выбора. Вы можете видеть, что идентификатор неупорядоченного списка жестко запрограммирован. Если бы мы хотели преобразовать другой список в поле выбора, нам пришлось бы дублировать существующий код, который может быть подвержен ошибкам. Вместо этого мы преобразуем код в функцию, чтобы сделать его многократно используемым. Код должен быть похож на следующее:
<script> function convertMenusToSelect(menu){ // Previous code with dynamic item instead of hard coding #menu } </script>
Теперь у нас есть общая функция, которую мы можем использовать снова и снова. Но неожиданно появляется новое требование клиента со следующими двумя задачами.
- Выбранные пункты меню должны быть выделены заданным цветом.
- Знак отступа, используемый для подменю, должен быть динамическим.
Непосредственным решением было бы добавить еще два параметра в функцию convertMenusToSelect () для обработки как цвета, так и знака отступа. Тем не менее, по мере появления новых требований нам придется добавлять дополнительные параметры, что усложняет их обслуживание. Вместо этого мы можем рассмотреть передачу параметров как объекта, как показано ниже.
<script> function convertMenusToSelect(params){ } var params={menuID: '#menu', color:'#EEE', indentMark : '#' }; convertMenusToSelect(params); </script>
Внутри объекта могут быть как обязательные, так и необязательные параметры, поэтому нам нужно проверять параметры вручную, чтобы извлечь правильные значения. По мере появления новых требований наше решение становится все труднее поддерживать. Итак, давайте посмотрим на решение с использованием плагина jQuery и посмотрим, как оно обрабатывает меняющиеся требования.
Разработка с помощью плагинов jQuery
Мы запустили конвертер списка со списком для выбора с простым кодом jQuery и в процессе преобразовали его в функцию многократного использования. Теперь давайте посмотрим на реализацию плагина jQuery, используя следующий код.
<script> (function($){ $.fn.extend({ selectConvert: function(options) { var defaults = { color: '#EEE', indentMark: '-', } var options = $.extend(defaults, options); this.each(function() { var o = options; var currentItem = $(this); var select = $('<select>'); $(currentItem).find('li').each(function() { var link = $(this).find('> a'); var level = $(this).parents('li').length; var indent = ''; for(i=0;i<level;i++){ indent += o.indentMark; } var option = $('<option>').text(indent + ' ' + link.text()) .val(link.attr('href')).css('background',o.color) .appendTo(select); }); $(currentItem).replaceWith(select); return select; }); } }); })(jQuery); </script>
В приведенном выше коде selectConvert будет именем нашего плагина и будет отдельным пространством имен внутри объекта jQuery.fn. Каждый из методов плагина будет помещен в selectConvert() . Функция плагина использует переменную с именем options для обработки данных, передаваемых при инициализации. Переменная defaults содержит все разрешенные переменные и их значения по умолчанию. Мы также можем назначить функции разделу по defaults .
Затем мы сравниваем defaults по defaults с параметрами, передаваемыми плагину, используя функцию jQuery extend() . Окончательный вывод будет содержать переданные значения параметров и значения по умолчанию, которые не указаны при инициализации. Следовательно, добавление новых параметров не является такой сложной задачей с плагинами jQuery. Наконец, мы выполняем код преобразования с предоставленными параметрами и возвращаем преобразованный элемент.
Важность плагинов jQuery
Мы приняли решение реализовать плагин из-за проблем, которые у нас были с простой реализацией jQuery. Теперь давайте посмотрим, почему мы предпочитаем jQuery-плагины чистым реализациям JavaScript.
- Предотвращает функциональные конфликты
Мы создаем все связанные с плагином функции в уникальном пространстве имен. Таким образом, возможность конфликтов имен уменьшается с помощью плагинов.
- Продолжаемость
Плагины jQuery автоматизируют процесс расширения параметров и функций внутри плагина. Мы можем определить параметры и функции по умолчанию внутри плагина и переопределить их во время выполнения, используя расширенные значения и функции. Это уменьшает работу обработки обязательных и дополнительных параметров.
- Chainability
Я бы предположил, что цепочка является самым мощным фактором в плагинах jQuery. В чистом JavaScript мы должны вызывать функции, присваивать результаты переменным и передавать их следующей функции. С помощью jQuery мы можем вызвать другую функцию или плагин с теми же возвращенными результатами в одной строке кода. Рассмотрим следующий код, который сочетает в себе плагин jQuery для автозаполнения и наш дизайн. Вы можете связать воедино любое количество функций или плагинов в одном наборе результатов, что упрощает динамическое добавление и удаление функций.
<script> $(document).ready(function() { $('#menu').selectConvert().combobox(); }); </script> - Повторное использование
Плагины jQuery позволяют нам использовать одну и ту же функциональность для нескольких элементов без дублирования кода. Мы использовали одно меню в нашем коде инициализации, как показано ниже.
<script> $(document).ready(function() { $('#menu').selectConvert(); }); </script>Как правило, нам нужно использовать две строки для преобразования двух меню. Но jQuery позволяет повторно использовать одну и ту же строку кода инициализации для обоих меню, как показано в следующем коде.
<script> $(document).ready(function() { $('#menu,#menu2').selectConvert(); }); <script> - Инкапсуляция
Мы можем определить как публичные, так и приватные функции внутри плагина jQuery. Следовательно, мы можем инкапсулировать логику внутри плагина и решить, какие компоненты являются общедоступными, а какие — частными для плагина. Таким образом, разработчики и пользователи плагинов смогут только открывать доступ к функциям.
- Юзабилити
Большинство людей, использующих плагины jQuery, не имеют большого опыта работы с JavaScript или jQuery. Как разработчики, мы должны максимально упростить использование плагинов. Плагины jQuery предоставляют общий метод инициализации, при котором вы можете вызывать функцию инициализации плагина для любого совместимого элемента. Поэтому пользователи могут просто скопировать код инициализации, и все будет работать.
Вывод
В этом уроке мы использовали один из самых простых шаблонов плагинов jQuery. Есть также несколько продвинутых шаблонов, которые еще больше облегчают написание кода, который можно легко обслуживать и расширять. Как разработчик, вы можете быть удивлены, почему мы не можем сделать то же самое с простым JavaScript. jQuery построен с использованием JavaScript, поэтому JavaScript способен обеспечить все, что предоставляет jQuery. Однако мы предпочитаем использовать jQuery, поскольку он абстрагирует многие общие задачи и позволяет нам сосредоточиться на логике приложения.
Пришло время поделиться своим мнением о плагинах jQuery и реализации чистого JavaScript. Вы предпочитаете разработку и использование плагинов jQuery? Дайте нам знать. Вы также можете загрузить код, использованный в этой статье, со страницы JSPro GitHub .