Как использовать внешний интерфейс Bootstrap (3 и 4) без jQuery

В чем проблема с jQuery?

Пожалуйста, не ненавидите JQuery. Это не проблема, каждый веб-разработчик любил когда-то jQuery, потому что он делает некоторые болезненные задачи во внешнем интерфейсе довольно простыми и надежными. В настоящее время многие разработчики используют другие фреймворки, такие как Angular, React или просто пишут Vanilla JS. Причина в том, что большинству из них больше не требуется поддержка старых версий браузеров:

И можно обеспечить широкую совместимость с любым браузером, написав свой собственный код JS, так что в большинстве случаев вам больше не понадобится jQuery. Также довольно плохо включать jQuery, если вы используете его только на 10% (это делают многие разработчики). Последняя версия jQuery составляет около 71,68 Кбайт в сжатом виде, поэтому она очень важна для вашего приложения, если вы заботитесь об окончательном размере (с плагинами и прочим). Для этого размера вам нужно посчитать размер Bootstrap JavaScript тоже около 30 КБ.

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

Какое решение?

Если вы хотите использовать Boostrap Framework со всеми его функциями JavaScript, такими как Dropdowns, Tabs и т. Д. Без jQuery, вам нужно будет использовать библиотеку с открытым исходным кодом. Bootstrap Native. Bootstrap Native — это библиотека, разработанная с использованием Vanilla Javascript для Bootstrap 3 и Bootstrap 4, с превосходной производительностью по сравнению с оригинальными плагинами jQuery. Он совместим с RequireJS / CommonJS. Самым большим преимуществом использования Bootstrap Native будет размер вашего проекта, потому что он минимизирован только на 20 КБ, а сжатый — на 6,5 КБ.

Мы рекомендуем вам посетите официальный репозиторий библиотеки на Github чтобы получить больше информации об этом.

Как использовать Bootstrap Native

bootstrap.native совместим с UMD (универсальным определением модуля). Он будет работать правильно в средах CommonJS и AMD, но вернется к обычному экспорту в окно. теговая среда. Компоненты разработаны с чистым кодом, в основном для современных браузеров, которые изначально поддерживают HTML5. При использовании полифилов, IE8-IE10 будет вам благодарен. Библиотека поставляется с пользовательским полифилом, который вы можете использовать сразу. Как уже упоминалось, вы можете использовать библиотеку Boostrap Native с Boostrap 3.x или 4.x:

Boostrap 3.x

В следующем фрагменте показано, как использовать встроенный Bootstrap в версии 3 начальной загрузки:

Bootstrap 4.x

В следующем фрагменте показано, как использовать родной Bootstrap в версии 4 начальной загрузки: