Как правильно подключить jQuery 1C Битрикс

Содержание

Сжатый или несжатый jQuery
Версии jQuery
Загрузка jQuery
Подключение jQuery
Подключение jQuery в 1С Битрикс
Как убрать другие jQuery
Подключаем jQuery правильно!
Частые проблемы с jQuery на сайтах

Сжатый или несжатый jQuery

jQuery доступна для скачивания в двух вариантах:

Сжатый (Compressed) jquery-3.2.1.min.js
Несжатый (Uncompressed) jquery-3.2.1.js

Где 3.2.1 - это версия библиотеки.

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

Версии jQuery

На сегодняшний день существует три основные версии jQuery 1.x, 2.x, 3.x, а также урезанный вариант без аякса (ajax) и анимаций (effects) jQuery 3.x slim

Разница в версиях конечно же есть, последняя версия стала меньше размером, устаревшие функции удалены, с версии 2.x убрали и поддержку устаревших браузеров IE 6-8, сейчас jQuery поддерживает Internet Explorer 9+.

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

Загрузка jQuery

Скачивайте jQuery только с официального сайта, на странице скачивания будут только последние актуальные версии, в сжатом и несжатом виде, если вам нужна другая версия, тогда либо jQuery CDN, либо jQuery Core, либо Github.

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

Скачивать библиотеку на сайт и подключать ее локально
Не скачивать, а подключить просто ссылку на CDN-сервер

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

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

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

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

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

Подключение jQuery

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

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/assets/js/jquery-3.2.1_min.js"></script>
    <script src="/assets/js/plugins/table.js"></script>
    <script src="/assets/js/plugins/video.js"></script>
    <script src="/assets/js/fn.js"></script>
</head>
<body>
<!--HTML CONTENT-->
</body>
</html>

А вот отдельно какие-то JS-скрипты не зависящие от jQuery где подключать не важно, может и перед jQuery, может и после, без разницы, они от нее не зависят.

Подключение jQuery в 1С Битрикс

Как подключать jQuery и плагины в старом ядре я уже писал здесь, сегодня рассмотрим как правильно подключить jQuery в новом ядре 1С Битрикс.

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

<?
use Bitrix\Main\Page\Asset;
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true)
    die();
/**
 * @var CUser $USER
 * @var CMain $APPLICATION
 */
$asset = Asset::getInstance();
?><!DOCTYPE html>
<html lang="<?=LANGUAGE_ID?>">
<head>
    <meta charset="<?=SITE_CHARSET?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><? $APPLICATION->ShowTitle() ?></title>
    <?
    //Тут мета-теги
    $APPLICATION->ShowMeta("robots", false, false);
    $APPLICATION->ShowMeta("keywords", false, false);
    $APPLICATION->ShowMeta("description", false, false);
    ?>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <?
    //Тут канонический url
    $APPLICATION->ShowLink("canonical", null, false);
    //Тут стили шаблона сайта
    $asset->addCss(SITE_TEMPLATE_PATH . '/css/bootstrap.min.css');
    //Тут выводим стили
    $APPLICATION->ShowCSS(true, false);
    //Тут скрипты
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/jquery-3.2.1_min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/popper.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/bootstrap.min.js');
    $asset->addJs(SITE_TEMPLATE_PATH . '/js/fn.js');
    //Тут выводим скрипты
    $APPLICATION->ShowHeadStrings();
    $APPLICATION->ShowHeadScripts();
    ?>
</head>
<body>
<?$APPLICATION->ShowPanel() ?>
<!--HTML CONTENT-->
</body>
</html>

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

CJSCore::Init(array('jquery'));
CJSCore::Init(array('jquery2'));
$APPLICATION->AddHeadScript("/bitrix/js/api.core/jquery/jquery-1.12.4_min.js");
$APPLICATION->AddHeadScript("/bitrix/js/api.core/modal.js");
$asset->addJs("/bitrix/js/api.core/modal.js");

Проблема именно в этих методах, как бы вы не подключали свои скрипты в шаблоне, метод CJSCore::Init() все будет выводить выше хедера и ломать работу скриптов, а также подключать сторонние и две своих встроенные библиотеки jQuery столько раз, сколько встретит на странице, т.е. хоть сколько, хоть тысячу раз.

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

$asset->addString('<script>Hello asset1</script>', false, AssetLocation::AFTER_JS_KERNEL);
$asset->addString('<script>Hello asset2</script>', false, AssetLocation::AFTER_JS);

Вот обратите внимание

Как убрать другие jQuery

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

Подключаем jQuery правильно!

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

//Тут скрипты
//$asset->addJs(SITE_TEMPLATE_PATH . '/js/jquery-3.2.1_min.js');

1) Либо вот на эту, также как в старой статье я делал, тоже рабочий вариант с кэшированием

?><script type="text/javascript" src="<?=CUtil::GetAdditionalFileURL(SITE_TEMPLATE_PATH.'/js/jquery-3.2.1_min.js');?>"></script><?

2) Либо вот на эту, это из ядра Битрикса подключит jQuery

CJSCore::Init(array('jquery2'));

jquery - подключит jQuery 1.8.3
jquery2 - подключит jQuery 2.1.3

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

Помните, только одна jQuery должна подключаться, либо ваша в шаблоне (вариант 1), либо из ядра Битрикса (вариант 2), все jQuery из сторонних модулей нужно отключать, т.к. они могут вызываться только на одной странице.

Частые проблемы с jQuery на сайтах

1) jQuery не подключена вообще;
2) jQuery подключена раз 5-10, а должна быть подключена только 1 раз;
3) jQuery подключена после вызова jQuery-плагинов, а должна подключаться самой первой;
4) JS-ошибки на странице, после которых весь остальной JS-код и плагины не работают;
5) Версия jQuery не соответствует минимальной по требованию;
6) Подключена переписанная разработчиком jQuery, которая ведет себя не предсказуемо;
7) Подключена кастомная сборка jQuery, часть функций вырезано;

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

← Вернуться в список

Меню