Главная » Банки » Пишем плагин для jQuery

Пишем плагин для jQuery

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

Постановка задачи

Прежде чем продолжить, давайте разобьем нашу задачу на несколько этапов:

Когда пользователь скролит страницу вниз больше чем на одну высоту экрана, то у него внизу экрана должен плавно появиться блок с изображением стрелочки вверх
При клике на этот блок страница должна автоматически прокрутиться в начало страницы
Если пользователь будет скролить страницу вверх, то блок должен автоматически прятаться

Требования к плагину

Плагин должен иметь настройки:

для задания изображения, которое будет появляться в блоке
установка высоты прокрутки экрана, после которой будет появляться блок для скрола

Итак, с требованиями и задачами разобрались. Теперь можно смело переходить к реализации данного плагина на jQuery.

При создании плагина на jQuery необходимо код плагина поместить в отдельный файл, который бы имел название: jquery.название_плагина.js . Это такой стандарт. Так что лучше ему придерживаться.

Итак, наш плагин будет называться scroller , поэтому создадим пустой файлик с именем jquery.scroller.js

Для того чтобы создать плагин необходимо объекту jQuery.fn добавить новый метод, где имя метода — это название нашего плагина. Давайте взглянем на пример:

Как Вы успели заметить, вместо знака доллара $ мы используем слово jQuery . Это делается для того, чтобы наш плагин не конфликтовал с другими javascript библиотеками (например,Mootools, Prototype), которые также используют знак доллара $ . Если же Вам привычнее работать со знаком доллара $ , то тогда весь код плагина надо обвернуть в само вызывающееся замыкание:

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

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

(function($){ $.fn.scroller = function(options){ //Значения по умолчанию options = $.extend({ img_src: "images/scrollup.png", height: 1.5, }, options); }; }(jQuery);

Все параметры хранятся в переменной options . Для инициализации этой переменной мы используем фунцию $.extend() , первым аргументом которой указываем объект, с параметрами по умолчанию, второй аргумент - параметры, указанные пользователем. В нашем случае используется 2 параметра:

img_src — полный путь к картинке на сервере, которая будет выводится в блоке внизу страницы. По умолчанию равен - "images/scrollup.png"
height — высота прокрутки страницы, после которой будет появляться блок. По умолчанию равна — 1.5

Прежде чем продолжить, следует сказать несколько слов о контексте. Внутри плагина зарезервированное слово this это ссылка на объект jQuery , к которому вызывается плагин. Но когда, в коде плагина используются callback функции, то там this - это ссылка на нативный DOM элемент. Ошибки возникают тогда, когда разработчики лишний раз делают $(this) или наоборот забывают это делать. Ниже по тексту Вы все поймете.

Итак, движемся дальше. Так как наш плагин может быть вызван сразу к набору элементов ($(".class").scroller(); ), то нам надо этот момент учесть и обойти все элементы которые вошли в этот набор и к каждому применить наш плагин. Реализуется это очень просто. Используется функция each() . Давайте посмотрим на пример:

Как видите в данном случае this — это ссылка на объект jQuery, поэтому здесь не надо делать $(this) ! Кроме того наш плагин возвращает этот объект this , так как используется ключевое слово return . Это сделано для того, чтобы поддерживать цепочки вызовов jQuery. Ведь красота и лаконичность цепочек вызовов jQuery является одной из причин, почему jQuery так популярна. Поэтому для того, чтобы Ваш плагин поддерживал эти цепочки вызовов, Вы должны убедиться, что Ваш плагин возвращает этот this в своей главной функции

Теперь можно приступать к реализации самого функционала плагина. Давайте объявим несколько переменных для дальнейшей работы.

Для того чтобы не путаться в дальнейшем, я создал локальную переменную $this , которой присвоил объект jQuery. Также определили начальную высоту объекта, так как именно от неё будет зависеть, когда будет появляться блок внизу экрана. Кроме этого создали html разметку нашего блока и вставили его внутрь объекта, для которого вызывался плагин.

Теперь осталось повесить собыите scroll , для выбранного элемента и в зависимости от установок плагина и прокрутки страницы, выводить или прятать блок внизу экрана. А также при клике на этот блок прокручивать страницу в начало экрана.

Для того чтобы использовать данный плагин у себя на сайте необходимо между тегами подключить саму библиотеку jQuery и сам плагин.

Дополните библиотеку jQuery своим собственным кодом

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

Плагины jQuery позволяют пополнять библиотеку jQuery своим кодом; их можно использовать для любых повторяющихся функций. Например, имеется множество плагинов для демонстрации слайд-шоу и создания раскрывающегося списка или меню "аккордеон". Если поискать плагины jQuery, то можно найти множество примеров, которые можно использовать в собственных проектах (и посмотреть, как они построены).

Часто используемые сокращения

CSS: Cascading style sheet / Каскадная таблица стилей
HTML: Hypertext Markup Language

Эта статья учит, как быстро создать специальный плагин jQuery. На примере кода с пошаговыми инструкциями демонстрируется процесс создания jQuery-плагина accordion. Статья рассчитана на тех, кто знаком с jQuery и готов поднять свои навыки на следующий уровень.

Приступаем к работе

jQuery ― это библиотека, которая расширяет язык JavaScript. Создавая новый плагин, вы, по существу, расширяете библиотеку jQuery, которая, в свою очередь, расширяет JavaScript. Чтобы понять, как именно ваш плагин расширяет библиотеку jQuery, требуется понимание свойства JavaScript prototype . Это свойство используется не явно, а скрыто ― через свойство jQuery fn , которое представляет собой jQuery- псевдоним собственного свойства prototype JavaScript.

Чтобы создать новый jQuery-плагин, используя свойство fn , достаточно присвоить его имя свойству fn и указать ему на новую функцию, которая будет выступать в качестве функции-конструктора, как в обычном JavaScript. Код, приведенный в листинге 1, показывает, как определить новый jQuery-плагин с именем accordion с помощью объекта jQuery и свойства fn , а затем присвоить ему новую функцию конструктора.

Листинг 1. Определение нового jQuery-плагина с именем accordion jQuery.fn.accordion = function() { // Добавить здесь код плагина };

В листинге 1 показан один из способов создания jQuery-плагина; в этом примере нет ничего функционально неправильного. Однако рекомендуется сначала создать функцию-оболочку, которая позволит использовать знак доллара ($). По умолчанию знак доллара может вызвать конфликты с другими структурами JavaScript. Если же упаковать плагин в функцию, конфликтов не будет, и знак доллара можно использовать. Пример кода, приведенный в листинге 2, демонстрирует, как применить функцию-оболочку к определению jQuery-плагина.

Листинг 2. Упаковка нового jQuery-плагина с именем accordion в функцию-оболочку (function($) { $.fn.accordion = function() { // Добавить здесь код плагина }; })(jQuery);

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

Сохранение chainability

Преимуществом jQuery является возможность использовать любой тип селектора. Однако нужно иметь в виду, что ваш плагин может работать с несколькими различными типами элементов. Используя ключевое слово this , можно применять связанные функции, обращаясь к каждому элементу в цикле, независимо от типа этого элемента. Если ключевое слово return предшествует циклу each , то можно сохранить свойство chainability своего плагина. В листинге 3 показан цикл each , назначенный обработчику функции и скомбинированный с ключевым словом return .

Листинг 3. Использование ключевого слова return перед циклом each (function($) { $.fn.accordion = function() { return this.each(function() { // Использование return позволяет сохранить chainability }); }; })(jQuery);

Благодаря коду, приведенному в листинге 3, пример плагина accordion можно использовать в цепочке вызовов методов. Chainability — еще одна важная особенность jQuery — позволяет использовать плагин в цепочке вызовов методов. Например, следующий код показывает, как HTML-элемент постепенно гасится, а затем удаляется из объектной модели документов (DOM) в одной цепочке вызовов методов.

$("#my-div").fadeOut().remove(); Структурирование "аккордеона"

Типичная конструкция "аккордеон" включает в себя строки заголовков и смежные с ними области с некоторым содержимым. "Аккордеоны" отлично подходят для HTML-структуры определения списков; для заголовков используются элементы dt , а для областей содержимого ― элементы dd . Структура HTML из листинга 4 представляет собой определение списка с четырьмя заголовками и соответствующими областями содержимого.

Листинг 4. Одна цепочка вызовов методов Section 1 Section 2 Section 3 Section 4

В определении списка из листинга 4 также имеется класс CSS с присвоенным ему именем accordion . Без всяких CSS эта структура "аккордеон" соответствует неформатированной структуре с рисунка 1.

Рисунок 1. Структура "аккордеон" без CSS

Класс accordion используется для применения стилей к общему определению списка, заголовкам и области содержимого. В примере, приведенном в листинге 5, в самом классе accordion указаны ширина, границы, шрифт и размер шрифта. Любой из примеров применения CSS можно изменить, выбрав свои собственные стили, такие как цвет, шрифт, размеры и интервалы.

Листинг 5. Класс CSS accordion, используемый для задания стилей общего определения списка .accordion { width: 500px; border: 1px solid #ccc; border-bottom: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

Затем класс CSS accordion используется для определения стилей заголовков (dt) и содержимого dd . И заголовки, и содержимое содержат общие стили, которые определяют нижнюю границу и задают значение полей 0, что позволяет областям заголовков и содержимого располагаться впритык друг к другу, как показано в листинге 6.

Листинг 6. Общие стили заголовков и областей содержимого "аккордеон" .accordion dt, .accordion dd { border-bottom: 1px solid #ccc; margin: 0px; }

Чтобы элемент dt был больше похож на заголовок, зададим цвет фона и добавим указатель курсора, чтобы создать впечатление активного заголовка. В этом классе есть и другие стили, такие как отбивка или размер и плотность шрифта. Элемент dd добавляет отбивку, чтобы отделить описание от заголовка. Пример приведен в листинге 7.

Листинг 7. Стили CSS для заголовков и областей содержимого "аккордеон" .accordion dt { background: #eaeaea; cursor: pointer; padding: 8px 4px; font-size: 13px; font-weight: bold; } .accordion dd { padding: 12px 8px; }

Когда все классы CSS добавлены, визуальный результат больше напоминает аккордеон, как показано на рисунке 2.

Рисунок 2. Структура "аккордеон" с применением CSS

Программирование плагина

Чтобы сделать аккордеон функциональным, необходимо написать код функций jQuery-плагина, который мы начали создавать в предыдущем разделе. Плагин accordion начинается с циклического считывания всех определенных "клавиш аккордеона". Для определения "аккордеона" используется следующий вызов jQuery в пределах HTML-документа или во внешнем внедренном файле JavaScript.

$("dl#my-accordion").accordion();

Для каждой "клавиши" вызываются соответствующие определения с помощью метода jQuery children , который возвращает массив элементов dt . Применим событие click к элементам dt , а затем к каждому dt ― метод с именем reset . Метод reset позволяет свернуть все элементы dd при первой загрузке accordion. Событие click вызывает специальный метод с именем onClick при нажатии на элемент dt или заголовок. Метод onClick выполняет поиск всех элементов dt в "аккордеоне". Он вызывает специальный метод hide , который скрывает каждый соответствующий элемент dd с помощью метода next для поиска элемента dd , смежного с элементом dt , а затем сдвигает его вверх для анимации процесса закрытия.

Когда все элементы dd скрыты, элемент dd , связанный с нажатым элементом dt , становится видимым благодаря методу slideDown и создает анимацию расширения и сжатия, как показано в листинге 8. Последняя строка кода в методе onClick - это строка return false , которая гарантирует, что никакой нажатый заголовок не будет проявлять свое обычное поведение. Например, при использовании элемента anchor в качестве заголовка понадобится метод return false , чтобы пользователь не попал на другую страницу или в другую часть существующей страницы.

Листинг 8. Специальные функции accordion, используемые для создания jQuery-плагина (function($) { $.fn.accordion = function(options) { return this.each(function() { var dts = $(this).children("dt"); dts.click(onClick); dts.each(reset); }); function onClick() { $(this).siblings("dt").each(hide); $(this).next().slideDown("fast"); return false; } function hide() { $(this).next().slideUp("fast"); } function reset() { $(this).next().hide(); } } })(jQuery);

Если плагин accordion связан со структурой списка HTML-определений, как тот, что мы создали ранее, будет применяться функция accordion. В функциях accordion при нажатии на один заголовок или элемент dt открывается соответствующая область содержимого, а любые другие открытые области содержимого закрываются. Иными словами, в каждый момент времени может быть открыта только одна область содержимого.

Значения по умолчанию и параметры настройки

Плагин JQuery может содержать значения по умолчанию и параметры настройки. Параметры настройки ― это, по существу, те аргументы, которые передаются плагину. Вместо передачи нескольких аргументов с параметрами настройки можно передать один аргумент в качестве литерала объекта, что является стандартным приемом для jQuery. Если в плагине разрешены параметры, то следует указать для них значения по умолчанию с помощью объекта defaults . Как и параметры, значения по умолчанию представляют собой литерал объекта, который должен содержать свойства, передаваемые в плагин.

Например, если допускается свойство, которое можно использовать для открытия первой области содержимого "аккордеона" при его первой загрузке, то в плагине следует указать значение по умолчанию для этого свойства. Используйте значения по умолчанию для определения состояния функций по умолчанию, а параметры настройки ― для переопределения значений по умолчанию. Когда плагин получает параметры, для фактического переопределения можно использовать метод $.extend . Метод $.extend jQuery объединяет два или более объектов. Пример, приведенный в листинге 9, демонстрирует обычную практику использования метода $.extend для соединения определяемых пользователем параметров со значениями по умолчанию в плагине jQuery.

Листинг 9. Добавление параметров настройки и значений по умолчанию в плагин jQuery (function($) { $.fn.accordion = function(options) { var settings = $.extend({}, {open: false}, options); return this.each(function() { var dts = $(this).children("dt"); dts.click(onClick); dts.each(reset); if(settings.open) $(this).children("dt:first-child").next().show(); }); function onClick() { $(this).siblings("dt").each(hide); $(this).next().slideDown("fast"); return false; } function hide() { $(this).next().slideUp("fast"); } function reset() { $(this).next().hide(); } } })(jQuery);

Аргументами метода $.extend служат целевой объект и два или более объектов, подлежащих объединению. В этом примере целевым объектом является пустой литерал объекта, который служит контейнером для объединяемых объектов. Цель становится единым объектом, который содержит значения объединяемых объектов ― в данном случае переменной settings . Второй аргумент ― это литерал объекта, содержащий свойства плагина по умолчанию. Третий аргумент ― определяемые пользователем параметры настройки. Чтобы передать параметры настройки с помощью плагина accordion в HTML-элементе, нужно знать, какие свойства плагин исключает, чтобы их можно было передать в виде литерала объекта, как показано ниже.

$("dl#my-accordion").accordion({open:true});

В примере, приведенном в листинге 9, параметры, передаваемые плагину, переопределяют значения по умолчанию с помощью метода $.extend . Если никакие параметры не передаются, используются значения по умолчанию. В примере плагина свойство open используется для определения того, должна ли при его загрузке открываться первая область содержимого.

Возможность многократного использования

Пример плагина accordion можно многократно использовать в любом HTML-документе, в том числе в одном и том же. Используя новый созданный нами плагин accordion, можно включить несколько таких структур "аккордеон" и определить каждую из них отдельно как jQuery accordion. Чтобы добавить в HTML-документ несколько "аккордеонов", просто добавьте нужное количество структур accordion. Код, приведенный в листинге 10, включает две структуры accordion, разделенных знаком конца абзаца.

Листинг 10. Использование нескольких "аккордеонов" в пределах одного и того же документа HTML Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Section 2 Vestibulum a velit eu ante scelerisque vulputate. Section 3 Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Section 4 Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Section 2 Vestibulum a velit eu ante scelerisque vulputate.

Две структуры accordion в листинге 10 почти идентичны, не считая их содержания и, что еще важнее, значений их идентификаторов. Первая структура содержит значение идентификатора my-accordion . Вторая структура содержит значение идентификатора my-accordion2 . Теперь к этим структурам можно обращаться независимо друг от друга. Например, следующий сценарий jQuery определяет каждую структуру "аккордеон" с использованием нового созданного нами плагина.

$("dl#my-accordion").accordion({open:true}); $("dl#my-accordion2").accordion({open:true});

Обе структуры "аккордеон" определяются с открытой первой панелью по умолчанию. На рисунке 3 приведен пример использования нескольких плагинов accordion в одном и том же HTML-документе.

Рисунок 3. Несколько структур "аккордеон" в одном и том же HTML-документе

Собираем все вместе

Создав новый специальный jQuery-плагин accordion, написав CSS и разместив разметку HTML, можно собрать все это вместе на окончательной Web-странице. Чтобы jQuery-плагин accordion работал, необходимо внедрить библиотеку jQuery. Я предпочитаю использовать сеть доставки контента (CDN), которая доставляет библиотеки в зависимости от географического положения пользователя и поэтому обеспечивает максимально возможную скорость загрузки файла. Библиотека jQuery есть в CDN Google, и этот файл можно внедрить на Web-страницу, воспользовавшись URL https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js .

Имеются и другие версии библиотеки. См. ссылки в разделе на библиотеки на сайте Google для разработчиков. Единственные дополнительные файлы, которые нужно указать в HTML-документе, это файл CSS, который определяет стили "аккордеона", и jQuery-плагин accordion. После этого HTML-разметка фактических структур "аккордеон" изменится. Пример приведен в листинге 11.

Листинг 11. Определение двух структур "аккордеон" как jQuery-аккордеонов Creating a Custom jQuery Plugin $(document).ready(function() { $("dl#my-accordion").accordion({open:true}); $("dl#my-accordion2").accordion({open:true}); }); Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Section 2 Vestibulum a velit eu ante scelerisque vulputate. Section 3 Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Section 4 Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Section 2 Vestibulum a velit eu ante scelerisque vulputate. Заключение

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

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

В этой статье мы меньше будем фокусироваться на самом Java Script коде, больше будем уделять внимания практическим советам.

1 - Пишите плагин по правильному шаблону

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

Для начала, мы создаем анонимную функцию, которая защитит нас от использования глобальных переменных. По умолчанию передаются три аргумента $, window, и undefined. Они потребуются ядром jQuery.

Далее мы напишем шаблон jQuery плагина, $.fn.PluginName. Таким образом, мы регистрируем плагин, чтобы можно его было использовать в формате $(selector).method(). Если вы хотите вместо написания плагина использующего функции, сделать его напрямую, пишите следующим образом:

$.PluginName = function(options){ // опции и действия плагина }

Такой тип плагина не может иметь цепочку функций, он будет состоять из одной прямой функции. Для примера:

$.splitInHalf = function(stringToSplit){ var length = stringToSplit.length; var stringArray = stringToSplit.split(stringToSplit); return stringArray; }

В этом коде, мы возвращаем массив строк. Для большей ясности, еще один пример:

$.getOddEls = function(jQcollection){ // return jQcollection.filter(function(index){ var i = index+1; return (index % 2 != 0); }); }

В этом случае, пользователь получает jQuery объект, фильтр, которые берется из jQuery коллекции. Плагины могут возвращать, как массивы, так и строки, цифры, функции, и другие типы данных.

2 - Документируйте свой код (корректно)

Наиболее важная вещь которую вы можете сделать, когда публикуете свой код - документирование. Это значит, что вам нужно объяснить разработчикам, что ваш код делает или может делать. Никому из пользователей не хочется догадываться, на что способен ваш код.

Документация, это практика, которая не потребует особых правил для ее реализации. Хотя, и так понятно, что чем удобнее и подробнее расписана, тем лучше.

Нужно документировать как внутри кода (комментированием), так и снаружи - отдельным документом, расписать каждый класс, метод, опцию, их случаи использования и так далее.

3 - Сделайте ваш плагин гибким в настройках

Наиболее популярные плагины предрасполагают возможность доступа к переменным, чтобы пользователи могли контролировать некую функциональность плагина. Также, хорошей вещью является возможность вносить свои настройки. Для примера, при создании плагина слайдера, уместными настройками будут - скорость перелистывания, тип слайд шоу, и расширение блока слайдера.

Также хорошей практикой, является возможность доступа к именам классов и ID, с помощью которых мы выбираем DOM элемент. Наряду с этим, они также должны иметь возможность иметь доступ к callback функции, во время каждого ее вызова. Или, когда слайдер делает цикл и возвращается на первый элемент (картинку).

«Это ваша задача, думать об удобстве использования и потребностях пользователей»

Давайте рассмотрим еще один пример: плагин делает запрос к API, он должен иметь возможность доступа к возвращенному объекту. Вот пример этой концепции:

$.fn.getFlickr = function(opts) { return this.each(function(){ // jQuery chainability var defaults = { // опции по умолчанию cb: function(data){}, flickrUrl: // стандартные значения для вызова API } // расширяем опции пользовательскими var options = $.extend(defaults, opts || {}); // вызываем асинхронные функции потом callback // передаем в API объект, который возвратился $.ajax(flickrUrl, function(dataReturned){ options.cb.call(this, dataReturned); }); }); }

Такой код, позволяет нам иметь доступ к данным с помощью следующей строки:

$(selector).getFlickr(function(fdata){ // flickr данные в fdata объекте });

Иной способ доступа к данным, использование хуков (крючков), как опций. В jQuery версии 1.7.1 и выше, мы можем использовать.on(eventName, function(){}) после вызова нашего плагина, чтобы использовать поведение плагина в собственных функциях пользователей. Для примера, плагин ниже, хороший пример, как это реализовать:

$.fn.getFlickr = function(opts) { return this.each(function(i,el){ var $this = el; var defaults = { flickrUrl: "http://someurl.com" } var options = $.extend(defaults, opts || {}); $.ajax(flickrUrl, function(dataReturned){ $this.trigger("callback", dataReturned); }).error(function(){ $this.trigger("error", dataReturned); }); }); }

Это дает нам возможность вызывать getFlickr плагин, плюс к этому, прицеплять некоторые «пожелания».

$(selector).getFlickr(opts).on("callback", function(data){ // действие }).on("error", function(){ // обработка ошибки });

Вы даже не подозреваете, насколько важно снабжать свой jQuery плагин гибкостью и возможностью настройки. Чем более сложный ваш плагин - тем более настроек должен содержать.

4 - Не используйте слишком много конфигураций

Не смотря, на предыдущие слова, большой ошибкой является использования слишком большого числа настроек. Для примера, очень удобно при разработке UI использовать плагины, которые имеют все аргументы по умолчанию.

$(selector).myPlugin();

В целом, иногда это не реально, так как пользователя хотят иметь возможность настроить функциональность. В этом случае, вы должны предоставить возможность как «по умолчанию», так и возможность настроить плагин. Но, старайтесь использовать только необходимые параметры, как показано в этом примере получения твитов (плагин использует только один параметр «имя пользователя»).

$(selector).fetchTweets("jcutrell");

Такие плагины очень популярны среди разработчиков… он получает твиты, и обвертывает их в тег параграфа, при этом нужно ввести только имя пользователя.

5 - Выносите CSS указания в отдельный файл

Естественно, это касается только определенных плагинов… но, старайтесь все CSS указания выносить в отдельный файл. Так будет проще при создании UI.

Большинство плагинов содержат в комплекте картинки и CSS стили. Но не забывайте второй совет - документируйте CSS стили с картинками также. Разработчики, вряд ли желают просматривать код, чтобы найти то, что им нужно поменять.

Наиболее удобно использовать стилизацию основанную на class/ID доступе. Но классы и ID должны также быть доступными и описанными в документации, чтобы пользователю не приходилось определять, что там происходит.

6 - Предоставьте примеры использования вашего плагина

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

Это не сложно, ведь вы разработчик плагина. Не будьте ленивы. Вот хорошие идеи для примеров:

«Hello World» пример - всегда удобно использовать в плагинах, которые работают с HTML и CSS.
Расширенные примеры - предоставляют возможность увидеть все грани функциональности плагина. Примеры должны отображать максимальное количество опций и возможностей.
Примеры интеграций - если ваш плагин имеет возможность использовать другие плагины. Обязательно покажите, как интегрировать другой плагин в код вашего.

7 - Пишите плагин, сопоставим с большинством версий jQuery

jQuery, как и любая хорошая библиотека, растет и развивается. Некоторые старые методы больше не доступны, некоторые новые вводятся. Хорошим примером этому является.on() метод, который решением «все в одном» для делегации событий. Если вы пишите плагин используя этот метод, люди, которые используют версию jQuery 1.6 будут обделены. Я не имею в виду, что ваш код должен содержать устаревшие методы, но в документации обязательно укажите используемую версию jQuery.

8 - Ведите Changelog

Наряду с обновлением кода плагина под новую версию jQuery, также необходимо контролировать и документировать все обновления. Наилучше делать это с помощью всем известного сервиса GitHub. Это публичный репозиторий, на котором можно хранить все версии плагина, changelog и другое.

9 - Пишите востребованный плагин

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

Если вы все таки решили написать плагин для социальной сферы разработчиков, найдите причину, по которой стоит его писать. Как мы любим выражаться: «Зачем изобретать колесо вновь»? Само собой, иногда новые и лучшие способы тех же вещей приветствуются. Но для этого должны быть вязкие практические причины.

10 - Предоставьте сжатую версию кода

Такой маленький, но очень разумный совет! Сжатая версия делает ваш плагин более востребованным. Разработчикам также важно знать, сколько будет «весить» ваш продукт.

Когда сжимаете код, не забывайте предоставлять не сжатую версию.

11 - Ваш код слишком заумный

Когда вы пишите плагин для jQuery, предполагается, что он будет использоваться другими… не так ли? По этой причине, код вашего плагина должен быть как можно лучше читаем. Если вы лепите все в одну строку или не семантично называете переменные, это создает трудности при чтении кода. Хорошо отформатированный код, это неплохое дополнение к документации. А насчет длинных названий переменных не волнуйтесь, ведь можно просто сжать код.

Если называете переменные «a» или «x» - это неправильно!

Также, старайтесь уменьшить число строк в каждой из функции. Так проще для понимания и более логично.

12 - Тестируйте

Надеюсь, вы всегда тестируете свой код, правда? Если нет, как вы можете публиковать его, если не уверены в работоспособности. Ручное тестирование всегда важно, но если вы обновляете страницу в браузере чтобы тестировать работоспособность плагина - это не правильно. Советую пользоваться такими инструментами, как - Qunit, Jasmine, Mocha.

Заканчивая мысли

Если вы собрались писать jQuery плагин, держите на виду эти советы. Может быть, я что-то пропустил. Если знаете, какими еще положительными качествами должен обладать хороший плагин, дайте знать в комментариях. Творческих вам успехов!

С момента появления jQuery прошло почти 10 лет и на сегодняшний день это самая популярная JavaScript-библиотека. Десять лет назад доступ в интернет был возможен через ограниченное число браузеров, спроектированных таким образом, чтобы свести к минимуму возможность манипулирования HTML DOM (Document Object Model). JQuery оказался палочкой-выручалочкой для многих разработчиков, стремившихся к одинаковому отображению содержимого сайтов во всех существующих браузерах. Развивавшие jQuery энтузиасты стремились объединить возможности браузеров и таким образом создать общий для всех интерфейс, который будет работать независимо от типа и версии браузера. Основная заслуга разработчиков состоит в том, что они создали новые интерфейсы API, которые были лучше «родных» браузерных и реализовали функции, которые не поддерживались программным интерфейсом браузера. Однако некоторые разработчики не склоны переоценивать роль jQuery в решении проблем кроссбраузерности и настаивают на том, что библиотека стала столь популярной благодаря реализации querySelectors. Как обычно, истина где-то посередине.

На сегодняшний день браузерная экосистема является не такой сложной, как это было 10 лет назад. Несмотря на то, что некоторые браузеры не могут реализовать все, что предлагает HTML5 API, все же у разработчиков в наше время гораздо меньше проблем с кроссбраузерностью и реализацией различных функций. Если сегодня что-то отлично работает в Chrome, то, вероятно, это также будет работать в Firefox или Edge. Основные элементы JavaScript наряду с querySelectors хорошо задокументированы и поддерживаются всеми производителями браузеров. Поэтому на первый взгляд может показаться, что те проблемы, которые решает jQuery, более таковыми не являются. Чистый JavaScript всегда будет быстрее, чем решение с использованием библиотеки, так что возникает вопрос: а нужно ли сегодня использовать технологию, которая в какой-то мере уже устарела? Цикл CPU является товаром, а время нет. Будет ли экономия 30 кБ оправданной, если придется писать код, тестировать его, если уже есть готовое решение?

Все это вопрос выбора. Кто-то стремится к совершенному коду, кто-то использует фрагменты кода, созданные другими разработчиками. Библиотека jQuery насчитывает тысячи отлично работающих и хорошо задокументированных плагинов, которые повышают производительность и позволяют реализовывать самые смелые идеи. Многие из этих плагинов к тому же совершенно бесплатны. Предлагаем вашему вниманию 10 лучших jQuery-плагинов, которые активно поддерживаются и регулярно обновляются их создателями.

Firewall это очень интересный кроссбраузерный jQuery-плагин, предназначенный для работы с макетами на основе модульной сетки. Он позволяет создавать впечатляющие анимационные эффекты с использованием возможностей SCC3 и хорошо работает с call back events. Если нужно создавать гибкие макеты с множеством изображений типа Pinterest, то Firewall является наилучшим решением для создания динамических сеток. Freewall работает практически во всех современных браузерах и даже в древнем IE8, что делает этот плагин действительно универсальным инструментом.

Плагин multiscroll.js позволяет добавить на сайт разнонаправленную прокрутку основных элементов дизайна. Это облегчает создание мультипрокрутки для сайтов с двумя колонками или панелями. Основное назначение плагина заключается в привлечении внимания пользователя к главному контенту без ущерба для UX. Плагин отлично работает как на современных, так и на устаревших браузерах и, конечно, в мобильной среде.

RowGrid.js – это простенький плагин, которые позволяет расположить изображения на сайте ровными рядами, точно так же, как это сделано в поиске по изображениям Google. Это модно, красиво и не слишком навязчиво. RowGrid.js расставляет изображения в рядах, ориентируясь на размер родительского элемента: он подбирает картинки таким образом, чтобы они гармонично смотрелись в пределах установленных границ, при этом некоторые элементы подвергаются масштабированию. Однако при работе с этим плагином нужно помнить, что все изображения должны быть одинаковыми по высоте, иначе плагин не будет работать и красивой произвольной сетки не получится.

JQuery-плагин Slidebars, как понятно из названия, помогает добавить на сайт выезжающие элементы, такие как боковые панели или скрытые меню. Вторая версия плагина была полностью переписана с учетом всех прежних недоработок и позволяет использовать неограниченное число элементов, расположенных вне основного экрана.

Плагин pagePilings.js позволяет реализовать очень интересные эффекты прокрутки, которые особенно впечатляюще смотрятся на одностраничниках. Пользователь просматривает контент, которые перемещается вверх и вниз, а скрипт срезает верхние слои содержимого, тем самым реализуя слайдер. Использование плагина поможет создать незабываемый опыт пользователя. Направление и скорость прокрутки можно легко настроить – в этом плане плагин обладает очень большими возможностями. PagePilings.js полностью отзывчивый, он отлично работает на любом экране и хорошо отображается в большинстве современных браузеров.

Основное назначение jQuery-плагина - создание плавных переходов между страницами, что позволяет улучшить опыт пользователя. Этот небольшой плагин позволяет создавать плавные и красивые CSS-анимации, которые сопровождают смену страниц. Плагин имеет свыше 60 различных эффектов, включая такие распространенные, как затухание, проявление, поворот плоскости кадра, флип, зум и многое другое.

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

Rippleria является созданным на основе концепции Material Design плагином, который создает эффект волны при клики мышки по элементу. Эффект может применяться к различным объектам, например, к кнопкам, иконкам или изображениям. Плагин легко настраивается и хорошо работает во всех современных браузерах.

Плагин Flickity отличается очень подробной документацией. Весь функционал понятно описан и логически структурирован. Это один из самых «отшлифованных» jQuery-плагинов для реализации эффекта карусели. При помощи Flickity создание отзывчивых слайдеров превращается в легкую работу, так как в плагине есть все инструменты для реализации любой идеи. Плагин условно бесплатный, для использования в коммерческих проектах придется приобрести платную версию.

Если нужно быстро и без особых затей установить слайдер на свой сайт, то можно использовать jQuery-плагин Unslyder. Плагин небольшой, но достаточно гибкий, позволяющий разработчику менять сценарии с помощью разных параметров и опций, методов и событий обратного вызова.

Недавно, в процессе создания лендинга, столкнулся с проблемой - нужно было разместить «аккордион». Это даже не плагин, а просто набор функций jQuery. Постепенно код усложнялся и в какой-то момент я понял, что нужно его оформить отдельным плагином. Это упрощает его поддержку и можно дорабатывать по необходимости.

Я никогда не писал jQuery-плагины, поэтому пришлось немного погуглить и найти примеры и туториалы. По какой-то неведомой причине, практически все руководства содержат невероятное количество лишней информации, где уже на 2-минуте прочтения возникает путаница, поскольку подразумевают, что читающий прекрасно разбирается и в js, и тонкостях jQuery, что в корне неверно. :)

Поэтому я решил написать своё руководство, рассчитанное на неподготовленного читателя.

Начнём с постановки задачи. Пусть у нас есть некий jQuery-код, который нужно оформить в виде плагина. Не будем усложнять задачу, возьмём что-то совсем простое, например преключение класса элемента по клику (назовём это «первоначальным кодом»).

JS-код: $(".click").click(function(){ $(this).toggleClass("t-red") }); HTML-код:

К классу.click мы цепляем обработчик «click», который меняет его css-класс на t-red . Метод toggleClass включает/выключает класс по каждому клику.

После преобразования этого кода в плагин, вызывать его можно будет так:

$(".click").myClick();

Это уже типовой вызов jQuery-плагина. Его желательно будет снабдить опциями, чтобы можно было бы задавать произвольный css-класс. Пусть это будет параметр to:

$(".click").myClick({ to: "t-green" });

Ну и, кроме этого, было бы здорово задавать css-класс в html-атрибуте data- , что позволит указывать его прямо в html-разметке:

какой-то текст для переключения

Почти все jQuery-плагины сейчас строятся по единому шаблону-каркасу. Для сложных плагинов этот каркас дорабатывается для подключения методов и прочих «фишек», но в нашем случае всё очень просто - у нас одна основная функция.

Строчка $.fn.myClick задаёт то, как будет вызываться плагин извне (myClick). Желательно использовать такое имя, чтобы оно не конфликтовало с другими плагинами.

Опции задаются таким образом, чтобы в случае их отсутствия, им присвоилось какое-то значение по умолчанию.

Функция main() собственно и выполняет основную работу плагина. При вызове плагина, она автоматически будет выполнена в строчке this.each(function() { main($(this)); }); . Если вы решите поменять её имя, то не забудьте внести изменения и в этом коде.

Теперь рассмотрим main() . Её парамер e не что иное, как используемый элемент. Наш исходный код переместится в эту функцию в таком виде:

Function main(e) { e.click(function(){ $(this).toggleClass("t-red") }); }

Этот тот же самый «первоначальный» код, только мы использовали переменную e вместо $(".click") .

Теперь добавим опции. Тут всё очень просто:

Var config = $.extend({}, { to: "t-red" }, options);

У нас одна опция. Получить её в функции main() можно так: config.to . В данном случае переменная config содержит все опции, а config.to конкретно выбранную. CSS-класс по умолчанию вы можете задать произвольно. Функция main() теперь будет такой:

Function main(e) { e.click(function(){ $(this).toggleClass(config.to) }); }

Теперь можно задавать опции при вызове плагина, но нам нужно еще добавить возможность их менять/задавать через data-атрибуты. Мы будем использовать штатную возможность jQuery - функцию data() . Она возвращает значение указанного атрибута (без префикса «data-»).

Function main(e) { var to = e.data("to"); if (!to) { to = config.to } e.click(function(){ $(this).toggleClass(to) }); }

Вначале мы получаем data-атрибут «to» в одноименную переменную. Проверяем: если атрибута нет (он не задан), то переменной присваиваем значение из опции.

Получился вот такой плагин:

Подобные простые плагины удобно использовать там, где нужно менять параметры для нескольких блоков на странице.

Просмотров