Создание плагина jQuery
Материал из JQuery
Создание файла с плагином и его подключение
Обычно, javascript-плагины располагаются в отдельных файлах. Для файлов с плагинами jQuery существует соглашение касательно их названия — оно должно удовлетворять формату jquery.plaginName.js. Таким образом, файл с нашим плагином нужно будет назвать jquery.responsiveBlock.js.
Чтобы наш плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а затем js-файл с нашим плагином плагина:
Основа для плагина
Чтобы добавить новый метод в объект jQuery, необходимо добавить функцию с его реализацией в объект jQuery.fn. В нашем плагине нужно организовать один метод — который будет добавлять элементам умение изменять цвет при наведении курсора. Назовем его так же как и сам плагин — responsiveBlock:
Чтобы избежать возможных конфликтов имен, обернем наш код в следующую конструкцию (подробности см. в описании jQuery.noConflict()):
Переменная this, в теле метода, всегда содержит текущий объект jQuery (тот, на котором и был вызван метод). Для того, чтобы обойти все выбранные элементы по отдельности, используем метод .each(). А для возможности продолжить цепочку методов наш метод должен будет возвратить текущий объект jQuery:
Добавление свойств плагину
В большинстве плагинов требуется наличие настроек. В нашем плагине например, будет очень полезна возможность указывать цвет элемента пока на него не наведен курсор и цвет после наведения. Существует один простой вариант организации настроек у плагина jQuery. Он позволят задавать список свойств, а так же их значения по умолчанию. Свои значения этих свойств, при этом, можно будет задавать в момент установки плагина на элемент, в первом параметре:
(Для лучшего понимания данного примера стоит ознакомиться с назначением функции $.extend).
Полученная выше заготовка, является наиболее распространенным вариантом шаблона для плагинов jQuery. Поэтому если вы решили написать свой плагин, то можете смело начинать именно с нее (естественно со своим именем плагина и своим списком настроек).
Дальнейшая реализация
Далее, добавим окончательную реализацию нашему плагину и применим ее на конкретном примере:
Генерация событий
Библиотека jQuery позволяет организовывать собственные события на элементах, и в дальнейшем устанавливать их обработчики (как на события onClick или onMousemove). Чтобы генерировать собственные события на выбранных элементах необходимо воспользоваться методом .trigger(), а устанавливать их обработчики можно с помощью .on(). Таким образом, плагины могут предоставлять не только новую функциональность но и связанную с ней систему событий, которой сможет воспользоваться любой пользователь вашего плагина.
Чтобы имена событий вашего плагина не пересекались с чужими именами событий, используйте пространства имен. Для этого удобнее всего использовать имя самого плагина.
В нашем плагине можно организовать событие stateChange, которое будет происходить при смене состояния элемента (наведен курсор или нет):
Примечания
При необходимости делать более продвинутые плагины с возможностями ООП, можно воспользоваться фабрикой виджетов UI.
От автора jquery.page2page.ru
Мини-игра про поход за продуктами во время карантина.
Твой уникальный шанс напинать короновирусу буквально.
Источник статьи: http://jquery.page2page.ru/index.php5/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%B0_jQuery
jQuery плагин – 12 советов по написанию
Maiores consequatur ipsa nisi. Rerum provident eveniet necessitatibus laborum. Nostrum distinctio molestiae ab nihil ipsam nesciunt assumenda.
Ea excepturi sit delectus repellat. Laborum voluptatem quidem omnis expedita omnis qui.
Earum esse dolor quasi dolorem fugiat sed. Sed culpa voluptatibus dolores. Dicta doloribus voluptatibus porro sit rerum. Molestiae dolorem minus excepturi hic officiis veritatis sed. At veritatis qui cupiditate. Quaerat qui eum consequatur ut accusamus. Praesentium nulla quam deserunt aut dolore corporis. Rerum eum sunt alias laborum. Maxime magnam rerum accusantium eum occaecati dolor.
Et ad sit perferendis quis ut rerum sit. Eum culpa eius eius. Illum placeat alias quia corrupti.
Enim sit ut alias inventore iusto. Neque at dolorem sunt quia eius dolorem cumque. Dignissimos nostrum in blanditiis fuga et deserunt. Commodi amet magni ut rerum aperiam qui recusandae ut. Est aut voluptatem molestiae quia ratione. Nemo eum ex quia accusamus voluptate sint deserunt perspiciatis. Perspiciatis voluptatum dignissimos nulla voluptas tempore inventore. Quas culpa adipisci ab distinctio velit aliquid. Earum vero et eaque.
Несмотря на столь большое количество документации о написании jQuery плагинов, практических советов мало. Нет ни одного примера документа, где описано, какими качествами должен обладать хороший jQuery плагин. В статье рассмтариваются 12 советов, которые помогут написать плагин jQuery своими руками.
В этой статье мы меньше будем фокусироваться на самом Java Script коде, больше будем уделять внимания практическим советам.
1 – Пишите плагин по правильному шаблону
Существуют некоторые шаблоны, которые в той или иной степени, соответствуют «правильному способу» написания плагинов. Если вы не будете следовать этим шаблонам, ваш плагин может работать не правильно. Вот один из наиболее известных шаблонов:
Для начала, мы создаем анонимную функцию, которая защитит нас от использования глобальных переменных. По умолчанию передаются три аргумента: $, window, и undefined. Они потребуются ядру jQuery.
Далее мы напишем шаблон jQuery плагина, $.fn.PluginName. Таким образом, мы регистрируем плагин, чтобы можно его было использовать в формате $(selector).method(). Если вы хотите вместо написания плагина использующего функции, сделать его напрямую, пишите следующим образом:
Такой тип плагина не может иметь цепочку функций, он будет состоять из одной прямой функции. Для примера:
В этом коде, мы возвращаем массив строк. Для большей ясности, еще один пример:
В этом случае, пользователь получает jQuery объект, фильтр, которые берется из jQuery коллекции. Плагины могут возвращать, как массивы, так и строки, цифры, функции, и другие типы данных.
2 – Документируйте свой код (корректно)
Наиболее важная вещь которую вы можете сделать, когда публикуете свой код – документирование. Это значит, что вам нужно объяснить разработчикам, что ваш код делает или может делать. Никому из пользователей не хочется догадываться, на что способен ваш код.
Документация, это практика, которая не потребует особых правил для ее реализации. Хотя, и так понятно, что чем удобнее и подробнее расписана, тем лучше.
Нужно документировать как внутри кода (комментированием), так и снаружи – отдельным документом, расписать каждый класс, метод, опцию, их случаи использования и так далее.
3 – Сделайте ваш плагин гибким в настройках
Наиболее популярные плагины предрасполагают возможность доступа к переменным, чтобы пользователи могли контролировать некую функциональность плагина. Также, хорошей вещью является возможность вносить свои настройки. Для примера, при создании плагина слайдера, уместными настройками будут – скорость перелистывания, тип слайд шоу, и расширение блока слайдера.
Также хорошей практикой, является возможность доступа к именам классов и ID, с помощью которых мы выбираем DOM элемент. Наряду с этим, они также должны иметь возможность иметь доступ к callback функции, во время каждого ее вызова. Или, когда слайдер делает цикл и возвращается на первый элемент (картинку).
Думать об удобстве использования(юзабилити) и потребностях пользователей — задача разработчика
Давайте рассмотрим еще один пример: плагин делает запрос к API, он должен иметь возможность доступа к возвращенному объекту. Вот пример этой концепции:
Такой код, позволяет нам иметь доступ к данным с помощью следующей строки:
Иной способ доступа к данным, использование хуков (крючков), как опций. В jQuery версии 1.7.1 и выше, мы можем использовать .on(eventName, function()<>) после вызова нашего плагина, чтобы использовать поведение плагина в собственных функциях пользователей. Для примера, плагин ниже, хороший пример, как это реализовать:
Это дает нам возможность вызывать getFlickr плагин, плюс к этому, прицеплять некоторые «пожелания».
Вы даже не подозреваете, насколько важно снабжать свой jQuery плагин гибкостью и возможностью настройки. Чем более сложный ваш плагин – тем более настроек должен содержать.
4 – Не используйте слишком много конфигураций
Не смотря, на предыдущие слова, большой ошибкой является использования слишком большого числа настроек. Для примера, очень удобно при разработке UI использовать плагины, которые имеют все аргументы по умолчанию.
В целом, иногда это не реально, так как пользователя хотят иметь возможность настроить функциональность. В этом случае, вы должны предоставить возможность как «по умолчанию», так и возможность настроить плагин. Но, старайтесь использовать только необходимые параметры, как показано в этом примере получения твитов (плагин использует только один параметр «имя пользователя»).
Такие плагины очень популярны среди разработчиков… он получает твиты, и обвертывает их в тег параграфа, при этом нужно ввести только имя пользователя.
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 плагин, держите на виду эти советы. Может быть, я что-то пропустил. Если знаете, какими еще положительными качествами должен обладать хороший плагин, дайте знать в комментариях. Творческих вам успехов!
Источник статьи: http://contentim.ru/12-coding-plugin-jquery
jQuery для начинающих. Часть 7. Пишем плагины // JavaScript
Если вы читали предыдущие статьи из этой серии, то вы наверное уже пробовали разрабатывать свой плагин, если нет, то можем начать вместе…
Материалы данной статьи включены в учебник «jQuery для начинающих». Учебник распространяется бесплатно, и сопровождается интерактивными примерами.
Для начала вспомним, для чего нам нужны плагины? Мой ответ — создание повторно используемого кода, и да — с удобным интерфейсом. Давайте напишем такой код, вот простая задачка: «По клику на параграф, текст должен измениться на красный»
Javascript и даже не jQuery
Данный код не является кроссбраузерным, и написан с целью лишний раз подчеркнуть удобство использования фреймворка
jQuery, но еще не плагин
Теперь можно этот код упростить, подключаем jQuery и получаем следующий вариант:
Таки jQuery плагин
С поставленной задачей мы справились, но где тут повторное использование кода? Или если нам надо не в красный, а в зеленый перекрасить? Вот тут начинается самое интересное, чтобы написать простой плагин достаточно расширить объект $.fn:
Если же писать более грамотно, то нам необходимо ограничить переменную $ только нашим плагином, а так же возвращать this, чтобы можно было использовать цепочки вызовов (т.н. chaining) , делается это следующим образом:
Внесу небольшое пояснение о происходящем, код (function($)<…>)(jQuery) создает анонимную функцию, и тут же вызывает ее, передавая в качестве параметра объект jQuery, таким образом внутри анонимной функции мы можем использовать алиас $ не боясь за конфликты с другими библиотеками — так как теперь $ находится лишь в области видимости нашей функции, и мы имеем полный контроль над ней
Добавим опцию по выбору цвета и получим рабочий плагин:
В результате работы данного плагина, каждый клик будет изменять цвет параграфа на красный, т.к. мы используем глобальную переменную для хранения настроек, то второй вызов плагина изменят значение для всех элементов. Можно внести небольшие изменения, и разделить настройки для каждого вызова (пример):
Работаем с коллекциями объектов
Тут все просто, достаточно запомнить — this содержит jQuery объект с коллекцией всех элементов, т.е. :
Если мы хотим обрабатывать каждый элемент то соорудим следующую конструкцию:
Опять же напомню, если ваш плагин не должен что-то возвращать по вашей задумке — возвращайте this — цепочки вызовов в jQuery это часть магии, не стоит её ломать
Публичные методы
Так, у нас написан крутой плагин, надо бы ему еще докрутить функционала, пусть цвет регулируется несколькими кнопками на сайте. Для этого нам понадобится некий метод «color», который и будет в ответе за всё. Сейчас приведу пример кода готового плагина — будем курить вместе:
Теперь еще небольшой пример использование данных методов:
Для понимания данного кусочка кода, вы должны разобраться лишь с переменной arguments, и с методом apply (тут им целые статьи посвятили — дерзайте)
О обработчиках событий
Если ваш плагин вешает какой-либо обработчик, то лучше всего (читай всегда) данный обработчик повесить в своём собственном namespace:
Данный финт позволит в любой момент убрать все ваши обработчики, или вызвать только ваш, что очень удобно:
Использование data
Если по какой-то причине вы еще не знакомы с data — то советую прочитать и усвоить незамедлительно. Если же в двух словах — это реестр данных, и все данные привязанные к какому-либо элементу лучше хранить в нем, это же правило касается и плагинов. Если вам надо сохранить состояние плагина — используйте data, если необходим кеш — используйте data, если вам необходимо сохранить … ну думаю понятно. Приведу еще примерчик связанный с инициализацией:
Источник статьи: http://anton.shevchuk.name/javascript/jquery-for-beginners-write-plugins/