Создание jQuery плагина слайд шоу с нуля

От автора: Многие вещи касательно того, как мы подходим к разработке фронт энда, значительно изменились за последние пару лет. У всех нас есть любимые плагины, которые мы используем при необходимости, многие из них были созданы во времена фиксированных сеток, но, возможно, они уже не являются наилучшими инструментами для работы. Что делать нам, когда это происходит? Искать новые инструменты или создавать свои собственные?

Предисловие

Что касается изменений в нашей работе, самым очевидным является подход к каждому проекту как «резиновому», отзывчивому, созданному с нуля. К счастью, у нас есть отличные инструменты, входящие в саму спецификацию CSS, такие как проценты и медиа-запросы, чтобы помочь нам. Но многие из наших любимых плагинов для таких вещей как слайд шоу, карусели, модальные окна, имеют один фатальный недостаток, когда дело доходит до отзывчивой разметки – встроенные стили, добавляемые JavaScript’ом и множество их. Когда мы пытаемся использовать эти плагины в «новом поколении» отзывчивых сайтов, это заканчивается тем, что мы постоянно боремся с этими стилями с хакерскими переопределениями или чем-то похуже, появляется еще больше JavaScript кода, чтобы контролировать поведение и вытеснить старый код.

Что же нам нужно контролировать с помощью JavaScript?

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

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

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

Как оказалось, это не так сложно, как кажется, и возможно даже быстрее и (куда более увлекательно), чем пытаться перерабатывать уже существующий плагин, так чтобы он послужил вашим целям. С тех пор я написал множество плагинов для фронт энда и работаю над многими последующими. Быть ответственным за каждую строчку кода в вашем проекте – это замечательная вещь, и я подумал, что стоит написать эту статью, чтобы вдохновить больше разработчиков на написание собственных инструментов и дать им понять, что разработка плагинов – это не темное мистическое искусство, доступное единицам.

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

Быть ответственным за каждую строчку кода в вашем проекте – это замечательная вещь

Фаза 1: Концептуализация

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

Функционал

Свойства

Фаза 2: Создание (Быстрое и с погрешностями)

Как упоминалось ранее, наилучшей практикой для создания отзывчивых плагинов – это оставить как можно больше стилизации для таблицы стилей, и использовать встроенные стили, добавляемые JavaScript’ом только там, где это точно необходимо. Имея вышесказанное ввиду, давайте начнем с написания HTML и CSS.

Я представляю, что на самом базовом уровне, разметка нашего слайд шоу будет выглядеть как-то так. Как упоминалось ранее, сами слайды не должны быть ограничены только изображениями, поэтому я добавил несколько div тэгов. Таким образом, наш плагин должен идентифицировать их как слайды благодаря классу “slide”, а не по тэгам или позиции в DOM.

Наш контейнер в идеале должен содержать и класс и идентификатор. Мы будем использовать класс для определения стилей слайд шоу, что позволит нам иметь несколько слайд шоу на одной странице, и мы будем использовать ID, чтобы обращаться к каждому слайд шоу с помощью jQuery уникально.

Давайте перейдем к CSS. Для меня, это то место, где наш код может быть действительно элегантным, снова объявив только то, что необходимо, и используя как можно меньше значений. Следующие стили предполагают, что мы используем глобальный сброс стилей (такой как замечательный Reset CSS) в самом начале таблицы стилей.

Вместо того, чтобы задавать высоту нашему контейнеру, я предпочел задать значение свойству padding-top. Этот прием позволяет масштабировать высоту элемента на основе его ширины, а не на основе высоты родительского контейнера. Для слайд шоу с фиксированным отношением ширины к высоте, это будет неотъемлемой частью отзывчивого поведения. Я выбрал отношение 5 : 3 или, другими словами, высота составляет 60% ширины.

Задавая всем нашим слайдам z-index равный 1, мы сжимаем естественный порядок слайдов в рамках одинакового значения z-index, будучи уверенными, что они не будут препятствовать 2м верхним сменяющимся слайдам, которые имеют z-index 2 и 3 (смотрите набросок). Задавая всем слайдам непрозрачность равную 0, мы будем контролировать то, какой слайд появится первым, когда нам нужно и избежим так называемой «вспышки нестилизованного контента».

Последний стиль просто переназначает 100% высоту значением “height: auto” если элемент слайда является изображением. Это удостоверяет, что если изображение имеет отношение ширины к высоте, отличное от 5:3, то оно не будет искажаться из-за высоты в 100%.

Теперь когда HTML и CSS в порядке, давайте перейдем к занимательным вещам – jQuery!

Что такое плагин jQuery помимо того, что он является набором переменных и функций? Это то, с чего мне нравится начинать написание плагина.

Что такое плагин jQuery помимо того, что он является набором переменных и функций?

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

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

Теперь время объявить нашу самую главную функцию. Я решил назвать ее easyFader, таким же будет и название нашего плагина.

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

Вот как выглядит объявленная функция вместе с заданными «аргументами»:

Запомните: символ $ помогает нам помнить о том, что эта переменная является объектом jQuery.

Таким образом, когда мы вызываем функцию для инициализации слайд шоу, она будет выглядеть так:

Это вызовет плагин на элементе с идентификатором Fader, с длительностью показа слайдов равной 7 секундам, и периодом обесцвечивания в 800 миллисекунд.

Возможно, вы заметили, что синтаксис выглядит как обычная функция JavaScript, а не плагин jQuery, и вы будете абсолютно правы. Я думаю, что во время первого «скорого» прототипирования, лучшим путем является придерживаться того, с чем мы наилучшим образом знакомы, чтобы сохранить время и избежать недопонимания. Мы доберемся до модных приемов плагина позднее.

Я думаю, что во время первого «скорого» прототипирования, лучшим путем является придерживаться того, с чем мы наилучшим образом знакомы, чтобы сохранить время и избежать недопонимания.

Первым шагом в следующем коде является создание пустого объекта под названием faderConfig и добавление его как свойства к сырому объекту DOM нашего контейнера. Чтобы иметь доступ к этому объекту jQuery мы просто размещаем [0] сразу после объекта jQuery, что равнозначно window.getElementByID(‘Fader’) на чистом JavaScript. Именно там мы будем хранить все четыре общедоступные настройки конфигурации, и привязывая его к DOM, наши данные не будут замкнуты внутри нашей функции, и могут быть доступны и редактируемы извне в любое время, за пределами функции слайд шоу.

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

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

Инициализация

По умолчанию, последний слайд в DOM будет иметь самое высокое значение z-index и таким образом будет показываться первым, даже если все наши слайды приобретут opacity:1. Однако, мы хотим, чтоб первый слайд показывался первым:

Так как вы видите, после таймаута равного настройке slideDur, мы собираемся вызвать новую функцию, названную changeSlides(). Мы передаем ей единственный аргумент со значением next, означающим, что мы переходим к новому слайду в DOM. Наш аргумент changeSlides должен принимать три разных значения: next, prev а также порядковый номер слайда на случай, если мы захотим перейти к определенному слайду (вне порядка). Давайте перейдем к написанию этой функции.

Смена слайдов

Теперь мы вызвали третью функцию под названием animateSlides(), которую мы будем использовать для того, чтобы управлять анимацией обесцвечивания. Функция animateSlides будет принимать два аргумента – порядковый номер текущего активного слайда, а также порядковый номер нового будущего слайда. Эти номера относятся к позиции слайда в DOM относительно своих собратьев и не должны быть приняты за z-index, который определяет вертикальный порядок следования.

Запомните: Мне нравится оборачивать код в его собственную функцию тогда, когда мне кажется, что его можно отделить как модуль, который можно использовать множество раз или вызывать во многих местах. Разбивание кода на модульные функции сделает его легче для чтения и поддержки. Так как эти второстепенные функции вложены в нашу родительскую функцию easyFader(), они будут иметь доступ к нашим настройкам конфигурации, а также приватным переменным.

Анимация обесцвечивания

Обратите внимание на то, что анимация определяет свою длительность согласно настройке конфигурации fadeDur. Последний кусочек головоломки – это функция waitForNext(). Если вы помните, мы объявили приватную переменную” slideTimer” в самом начале. Теперь этой переменной мы зададим функцию setTimeout() для того, чтобы она автоматически вызывала следующий слайд по истечению 7 секунд.

Таймер

Поздравляю, если вы дочитали до сих пор – мы только что создали прототип нашего первого плагина! Вот весь код без комментариев с несколькими незначительными оптимизациями касательно порядка объявления переменных.

Полное собрание кода

Достаточно легкий, не правда ли? Если вы удивляетесь почему он настолько мал в сравнении с большинством плагинов для слайд шоу, которые весят 30+Kb, то значит мы движемся в верном направлении.

Посмотреть рабочий прототип на Codepen

Фаза 3: Оптимизация, оттачивание и расширение

Первый шаг в оптимизации – это определить какие участки код повторяются без надобности. Так как наш плагин слишком мал на данном этапе, их будет немного, но один я уже вижу. Функция setTimeout(), которая вызывается при инициализации содержит тот же код, что и функция waitForNext(). Так что давайте будет вызывать эту функцию при инициализации. Кроме того, все выглядит достаточно хорошо на данный момент, и мы минимизируем код в дальнейшем.

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

Кнопки и элементы управления

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

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

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

Для кнопок управления, достаточно будет чего-то такого:

Мы просто привяжем обработчики клика к чему угодно внутри контейнера, что имеет класс page. Я также создал пустой элемент ul с классом pager_list, который будет содержать кнопки пагинации. Класс fader_controls там находится только для стилизации. Снова пришло время JavaScript.

В первую очередь, давайте построим список кнопок. Это произойдет при инициализации и будет выглядеть как-то так:

Мы также зададим первого элементу li в списке класс active при инициализации, чтобы мы стилизовать его таким образом, чтобы пользователь видел, что первый слайд активен.

Теперь я собираюсь создать наши обработчики событий. Этот кусок кода привяжет обработчики событий к нашим кнопками и элементам управления, и также будет вызываться при инициализации:

Таким образом, всегда когда нажатие мыши происходит на любом элементе с классом page, вызывается функция changeSlides() с аргументом, который является значение атрибута data-target текущего элемента. Снова три возможных значения – next, prev или число.

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

Аналогично, мы хотим убедиться в том, что если у нас на данный момент сменяются слайд, то пользователь не должен иметь возможность нажимать на кнопки и прервать анимацию, вызывая множественные анимации одновременно. Чтобы добиться этого, мы создадим новую приватную переменную с именем fading, которая будет иметь значение false по умолчанию. Когда анимация начинается, эта переменная будет принимать значение true и обратно false, когда она заканчивается. Если поступает вызов функции animateSlides() во время анимации, мы его заблокируем, возвращая значение false, вот так:

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

Когда мы действительно сменяем слайды, мы также хотим, чтобы активный элемент управления изменялся визуально. Следующий код будет находиться внутри функции animateSlides():

Переходы CSS3

Переходы CSS3 работают очень похожим способом, как и метод jQuery .animate() – плавно анимируют любое числовое свойство CSS3 от одного значения к другому. Большая разница состоит в том, чтобы отображение переходов CSS3 производится браузером без помощи JavaScript, и часто получит ускорение GPU, таким образом значительно уменьшая нагрузку на процессор и увеличивая частоту кадров. Это особенно полезно для портативных устройств, таких как планшеты и телефоны с очень плохой поддержкой JavaScript. Теперь, когда практически все браузеры поддерживают переходы CSS3, имеет смысл использовать их по умолчанию как способ анимации, используя jQuery .animate() тогда, когда нам нужно поддерживать IE9 (потому что IE8 даже не поддерживает opacity, поэтому в этой статье мы о нем забудем).

Для нашего плагина, мы в первую очередь убедимся, что переходы CSS3 доступны, а затем условно выберем наш метод анимации внутри функции animateSlides().

Вот отличный код я использовал для MixItUp, чтобы протестировать поддержку переходов CSS3 и если необходимо добавить префиксы производителей. Мы могли бы использовать библиотеку для определения поддержки браузером как Modernizr, но цель этого упражнения в том, чтобы создать экстра легкий самостоятельный плагин, который не будет иметь зависимостей кроме самой jQuery.

Мы просто передадим любой сырой элемент DOM ему, и он или возвратит необходимый префикс для браузера или значение false, если поддержки нет. Если поддержка не требует префикса (что вскоре станет нормой), она возвратит пустую строку. Мы вызовем ее следующим образом:

Если переменная prefix имеет значение false, значит, поддержки нет. Иначе мы дополняем строку, чтобы она добавлял необходимый код CSS.

Теперь, когда обнаружение переходов CSS3 установлено, снова обратимся к нашей функции animateSlides().

Мы также могли бы просто объявить переход непрозрачности множество раз со всеми необходимыми префиксами используя метод .css(), но этот метод значительно чище, так как он направлен только на тот браузер, который используется. Вы могли заметить, что есть пространство для оптимизации здесь, когда код исполняется после того, как анимация закончится, повторяется для обоих методов. Давайте вынесем его в отдельную функцию и назовем ее cleanup(), которая будет находиться внутри animateSlides():

Вот и все! Вот версия № 2:

Полная агрегированная версия № 2 (или Премиум)

Фаза 4: Превращение в настоящий jQuery плагин

Последним шагом будет превращение этого:

В это:

Делая это, мы превращаем функцию в метод jQuery, который мы можем вызвать на нашем объекте jQuery $(‘#Fader’). Чтобы добиться этого, нам нужно инкапсулировать весь наш код во что-то такое:

С помощью этого кода мы создаем приватную функцию с зависимостью JQuery, и в ней мы объявляем имя плагина jQuery «easyFader», и его доступные методы. Сейчас нам нужно только инициализации метод «init», но эта структура позволит нам добавить дополнительные методы позже, если мы захотим.

Установив по умолчанию значения для slideDur и fadeDur (7000 мс и 800 мс), мы гарантируем, что пользователь может запустить плагин прямо из коробки, без необходимости указывать эти два значения. Если пользователь решит указать их определенно, значения по умолчанию будут перезаписаны теми значениями, которые определит пользователь.

Запомните: в идеальном варианте, мы могли бы конвертировать большинство наших функций (например, changeSlides () и animateSlides ()) в свои методы. В этой статье, однако, мы оставим их в виде функций, чтобы избежать необходимости иметь дело с более передовыми концепциями, как конструктора функций и прототипов.

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

Не мудрствуя лукаво, я представляю jQuery EasyFader!

Как и все подобные вещи, нет абсолютного «правильно» и «неправильно». Может быть, вы заметили, что вы сделали бы по-другому или могли бы улучшить — и в этом вся прелесть и стимул – в желании написать свои собственные инструменты. Я надеюсь, что вы нашли эту информацию полезной.

Это, конечно, не конец для EasyFader, так как я намерен добавить кучу дополнительных функций, таких как функции обратного вызова и еще много настраиваемых параметров, в надежде, что он может стать новым слайд-шоу плагином «номер один» для всех моих проектов. Но на сегодняшний день, не забудьте проверить и скопировать готовую версию на GitHub. Каких-то 1.2KB в сжатом виде!

Автор: Scratch

Источник: //www.barrelny.com/blog/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (4)