Используете ли вы компоненты Bootstrap JavaScript? Вам нравится ванильный JavaScript ? Тогда вас может заинтересовать проект Native JavaScript for Bootstrap (Bootstrap Native), целью которого является удаление зависимости jQuery, требуемой компонентами, путем переноса их на простой JavaScript.
Зачем использовать Bootstrap Native?
Мотивы такого порта в основном связаны с производительностью.
Одним из преимуществ является потенциальный выигрыш в производительности, который может дать превосходящая скорость выполнения простого JavaScript по сравнению с jQuery, о чем сообщалось во многих тестах .
Еще одно преимущество в производительности — уменьшенный вес страницы. Давайте сделаем быстрое сравнение. Все числа ниже относятся к сжатым сжатым файлам и выражены в килобайтах. bootstrap.js ссылается на оригинальные сценарии Bootstrap, bsn.js на собственные сценарии Bootstrap, а jq на jQuery. Здесь мы рассмотрим связанные файлы, которые объединяют все компоненты, но следует отметить, что обе библиотеки имеют модульную структуру, которая позволяет загружать только необходимые компоненты и их зависимости.
Bootstrap.js:
- jQuery 3.3.1 + Bootstrap.js = 30,0 + 12,9 = 42,9
- jQuery 3.1.0 slim + bootstrap.js = 23,6 + 12,9 = 36,5
- jQuery 2.2.4 + bootstrap.js = 34,3 + 11,2 = 45,5
- jQuery 1.12.4 + bootstrap.js = 38,8 + 11,2 = 50,0
Самозагрузка родной JavaScript :
- minifill + bsn.js = 2,4 + 7,8 = 10,2
- polyfill.io (на chrome 54) + bsn.js = 1,1 + 7,8 = 8,9
- polyfill.io (в IE 8) + bsn.js = 12,1 + 7,8 = 19,9
( Размер polyfill.io для IE8 взят здесь . Эти полифилы обсуждаются в следующих разделах .)
Таким образом, с компонентами Bootstrap размер варьируется в диапазоне от 36,5 до 50,0 КБ, тогда как с помощью Bootstrap Native этот диапазон уменьшается до 8,9–19,9 КБ.
Поддержка родного браузера Bootstrap
Что касается поддержки браузера, то она сравнима с оригинальным скриптом Bootstrap на основе jQuery . То есть он поддерживает новейшие браузеры на основных мобильных и настольных платформах и IE8 + . Это достигается с помощью двух стратегий заполнения.
Первый вращается вокруг использования сервиса Polyfill.io . Все, что вам нужно сделать, это вставить относительный тег script в документ, чтобы получить набор полизаполнений, адаптированных для каждого браузера:
<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>
Служба может быть настроена так, чтобы настраивать свой ответ на основе функций, реально используемых на сайте. Подробности смотрите в документации Pollyfill.io .
В качестве альтернативы можно использовать minifill , потенциально более легкий пользовательский polyfill, предоставленный самим автором проекта.
Bootstrap Native Usage
Использование аналогично исходным сценариям Bootstrap, за исключением того, что мы удалим jQuery, заменим сценарии Bootstrap на сценарии, предоставленные проектом Bootstrap Native, и, при необходимости, добавим полифилы.
Итак, перед </body> end </body> мы включаем скрипт для компонентов Bootstrap Native:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-native-v4.min.js"></script>
Другие URL CDN доступны и перечислены на странице документации Bootstrap Native . Кроме того, файл может быть загружен и обслуживается локально.
Если нужны полифилы, они должны быть включены в <head> :
<script src="text/javascript" src="https://cdn.jsdelivr.net/gh/thednp/[email protected]/dist/minifill.min.js"> </script> <!--[if IE]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <![endif]-->
В этом фрагменте используется minifill с minifill заливкой.
См. Страницу документации проекта Bootstrap Native для более подробных инструкций по использованию.
Порт?
Чтобы быть точным, это не буквальный порт, который копирует все функции оригинальных скриптов. Автор Bootstrap Native сознательно предпочел исключить некоторые незначительные функциональные возможности, в особенности менее используемые функции, в основном из соображений производительности и для упрощения разработки.
Давайте посмотрим на некоторые из этих проблем.
Пользовательские события
Это события, запускаемые многими компонентами Bootstrap в течение их жизненного цикла. Например, Модал запускает два события — одно, когда оно открыто, а другое, когда оно закрыто. (На самом деле, два события запускаются в каждом случае, одно до ( 'show' ), а другое ( 'shown' ) после действия.)
Подобные события используются вкладкой, чтобы уведомить своих наблюдателей, когда есть переключатель вкладок: событие скрытия отправляется для текущей вкладки и событие показа для вкладки, которая должна быть показана.
Bootstrap Native, напротив, предоставляет эти события только для карусели и кнопки. Оригинальная Карусель вызывает пару пользовательских событий, когда есть переход между двумя слайдами. Первое событие, 'slide' , запускается непосредственно перед началом перехода, а другое, 'slide' , запускается после завершения перехода. Объект события, передаваемый в обработчики, имеет два свойства, которые предоставляют информацию о переходе, direction и relatedTarget .
Следующий фрагмент jQuery иллюстрирует:
$carousel .on('slide.bs.carousel', function(e) { var caption = $(e.relatedTarget).find('.carousel-caption').text(); console.log('About to slide to the ' + e.direction + ' to slide ' + caption); }) .on('slid.bs.carousel', function(e) { var caption = $(e.relatedTarget).find('.carousel-caption').text(); console.log('Slid to the ' + e.direction + ' to slide ' + caption); });
Bootstrap Native поддерживает оба события, но объект события не имеет свойств direction и relatedTarget . Мы можем перевести предыдущий фрагмент в ванильный JS следующим образом:
carousel.addEventListener('slide.bs.carousel', function(e) { console.log('About to slide'); }); carousel.addEventListener('slid.bs.carousel', function(e) { console.log('Slid'); });
А что если нам понадобятся пользовательские события для какого-то другого компонента? Это не так уж сложно реализовать самим. Мы можем сослаться на код родной карусели Bootstrap и использовать API CustomEvent .
Сначала создайте объекты событий:
if (('CustomEvent' in window) && window.dispatchEvent) { slid = new CustomEvent("slid.bs.carousel"); slide = new CustomEvent("slide.bs.carousel"); }
Когда начинается слайд-переход, происходит событие 'slide' :
if (slide) { this.carousel.dispatchEvent(slide); }
И, наконец, когда переход завершен, запускается событие «slid»:
if (slid) { self.carousel.dispatchEvent(slid); }
На основе этой модели аналогичный код может быть легко добавлен к другим компонентам.
CustomEvent API доступен не во всех браузерах , но вышеупомянутые полифилы охватывают его.
Программный API
Это компоненты API Bootstrap, позволяющие их инициализацию и управление с помощью JavaScript. Например, для модального элемента можно вызвать три метода для контроля его видимости:
$('#mymodal').modal('show') $('#mymodal').modal('hide') $('#mymodal').modal('toggle')
Bootstrap Native, напротив, часто не обеспечивает этот тип программного управления. Вышеуказанные методы недоступны для модального режима, а также для выпадающего меню, вкладки, оповещения или карусели.
Другие различия
Если мы выполним параллельное сравнение компонентов, станет ясно, что Bootstrap Native не является буквальным портом и в некоторых случаях удаляет функциональность, а в других добавляет что-то новое.
Например, во всплывающей подсказке с Bootstrap мы должны явно инициировать их, потому что по причинам производительности относительный data-api не включен . В Bootstrap Native, если атрибуты API DATA установлены правильно, инициализация происходит автоматически. Кроме того, родная версия может автоматически размещать всплывающую подсказку, без каких-либо дополнительных опций. Но это не распространяется на систему шаблонов, подобную той, которая предоставляется Bootstrap.
Раскрывающийся список предоставляет другой пример небольшого различия относительно относительного компонента Bootstrap из-за преднамеренного выбора реализации . Раскрывающееся меню jQuery закрывается после нажатия на элемент меню, в то время как основное меню остается открытым.
Обработка ввода с клавиатуры также неполная. Навигация по вкладкам работает, но другие операции выполнены частично .
Что касается карусели, компонент jQuery по умолчанию реагирует на ввод с клавиатуры, в то время как в версии vanilla это поведение должно быть включено с помощью атрибута data-keyboard :
<div id="carousel" class="carousel slide" ... data-keyboard="true">
Другое отличие этого компонента заключается в том, как можно настроить параметр продолжительности. Это значение используется для определения продолжительности интервала времени перехода между существующим слайдом и входящим слайдом. Обе библиотеки определяют одно и то же значение по умолчанию, равное 600ms , что является приемлемым значением, которое должно подходить для большинства случаев использования.
Если мы хотим изменить это значение, учитывая, что в обеих библиотеках анимация выполняется с помощью CSS, сначала мы должны добавить некоторые правила CSS, чтобы переопределить значение продолжительности по умолчанию.
В Bootstrap нам нужно использовать некоторый код jQuery для изменения значения, жестко закодированного в JavaScript:
$carousel.data()['bs.carousel'].constructor.TRANSITION_DURATION = 2000;
Bootstrap Native, с другой стороны, предоставляет атрибут data-duration корневого элемента компонента, что облегчает процесс:
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false" data-duration="2000">
Аналогичная опция доступна для других компонентов (например, модальных и всплывающих подсказок) для изменения продолжительности перехода.
Другие проблемы перечислены и объяснены на странице документации и на трекере проблем проекта.
Вывод
На мой взгляд, проект очень интересный, но я бы не стал так быстро выбрасывать оригинальную версию jQuery. Фактически, как и в других сравнениях «jQuery Vs Vanilla JS», победитель часто зависит от конкретного варианта использования.
Проблемы, рассмотренные в предыдущем разделе, не должны быть серьезными препятствиями, поэтому, если вы не ищете идеальное буквальное преобразование компонентов Bootstrap JavaScript и готовы справиться с некоторыми небольшими различиями, это может быть правильным решением.
Также следует отметить, что проект находится в стадии активной разработки, и обеспечивается быстрая обратная связь с проблемами, открытыми на трекере GitHub .
Итак, вы собираетесь попробовать его в следующем проекте Bootstrap? Не стесняйтесь делиться своими мыслями в комментариях.
Эта статья была рецензирована Джоан Инь . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Если у вас есть основы Bootstrap за поясом, но вы не знаете, как поднять свои навыки Bootstrap на следующий уровень, ознакомьтесь с нашим курсом «Создайте свой первый сайт с Bootstrap 4», чтобы быстро и весело познакомиться с мощью Bootstrap.