Bitrix как подключить jquery

Подключение jquery из ядра битрикс и объединение своих скриптов в один файл

Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие галереи и прочее- то таких внешних скриптов может набежать по 10/20 на сайт. Имеет смысл объеденить их в один, для большей скорости загрузки сайта и в принципе для оптимизации. Это, конечно, можно проделать вручную но можно воспользоваться функционалом битрикс.

Данная возможность позволяет автоматически, без заморочек объеденить весь javascript в один файл

Пример на моем сайте

При верстке своего сайта я использовал 5 javascript файлов: фансибокс, табы, карусель контента. В исходной html верстке это выглядело так

Для того, что бы при интеграции с битрикс, автоматически, все эти файлы объеденились в один, сжались и вывелись в head шаблона достаточно подключить их вот так

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

PS: Точно так же, можно объединять подключаемые файлы стилей

Почему то все скрипты начинают срабатывать дважды

Цитата
Fred пишет:
Почему то все скрипты начинают срабатывать дважды

А если отключаете свой

Здравствуйте, Михаил!
У меня вопрос ни могу понять в чем дело, но битрикс не хочет подключать первый подключенный не стандартный шрифт у меня их 6 и причём если меняю местами первый на второй, а второй на первый происходит тоже самое тот что был вторым и стал первым перестаёт работать я уже голову сломал не могу понять.

На сайте также используются и и коночные шрифты font-awesome.css они работаю нормально всё остальные также работают но только если не первыми в очереди.

Не знаю уже что и думать может есть какое то ограничение на количество шрифтов.
Да и ещё пробовал и подключать обычным способом / не помогло тоже кешь сбрасывал и отключал ничего не помогает.

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

Михаил, вообщем я нашёл для себя единственное и по моему правильное решение это подключать эти шрифты отдельным файлом и объединить в один через SetAdditionalCSS это так работает и думаю что правильно но почему не работает когда эти шрифты находятся в template_styles.css непонятно причем я заметил если перед первым шрифтом поставить какой нибудь класс то тоже работает но подумал что это будет не правильно.

Всё большое спасибо ещё раз и жду ваших комментариев.

Источник

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

Содержание

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

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

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

Версии jQuery

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

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

Загрузка jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Только при таком способе вы избавитесь от проблем с подключением скриптов и плагинов из сторонних модулей, подключенная в вашем шаблоне сайта 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 в настройках модуля или компонента, а вот в решениях других разработчиков, к сожалению, такое встретить не всегда удается.

Источник

О том, как не нужно работать с JavaScript и jQuery

Микулич Евгений

Начать хочется, с казалось бы, элементарной вещи – концепции разделения представления логики того или иного скрипта(компонента) и его представления. Битрикс представляет возможность работать с шаблонами компонентов, не трогая их логичесую реализацию, и более того дает возможность «допилить» ее путем создания некоторых файлов типа «result_modifier.php». Казалось бы все элементарно, и большинство разработчиков пользуется этой замечательной вещью в отношении HTML и PHP. Бывают конечно исключения и в практике приходится встречать вызовы одного компонента в шаблоне другого, а в шаблоне второго вызов еще одного, а в шаблоне третьего еще двух компонентов, в шаблоне которых вызывается пятый но с разными входными параметрами (Типовое решение «Медицинских учреждений»). Согласитесь, если это не комплексный компонент, то работать с таким кодом, и дорабатывать его очень трудно и тяжело. Ситуация с JavaScript не настолько катастрофична, как в предыдущем примере, но на мой взгляд если уж разделять логику и представление – то быть последовательным до конца и включить в эту концепцию JavaScript в том числе.

От человеческой лени или незнания или каких-либо других причин приходится сталкиваться со следующим мнением «Я так всегда делал», «Это надежно», «Так делали мои деды и прадеды». В пору вспоминается анекдот: «В комнате муха долбиться в окно, желая вылететь наружу. С другой стороны к ней подлетает другая муха и говорит: «Ты чего долбишься? Вон же форточка открыта». На что первая ей отвечает: «Нет, мой отец бился, мой дед бился, мой прадед бился в это окно и я биться буду.».». Есть несколько причин не делать так, как ты делал когда-то, и в этой статье я постараюсь осветить некоторые из них.

Атрибуты oncklick, onchange, onmouseover и им подобные в HTML
Часто в чужом коде приходится встречаться с таким примером:

Теперь рассмотрим почему так делать не нужно:

Таким образом, если мы передадим любой параметр в фукцию, то затрем параметр по умолчанию, что не есть хорошо. Этого можно избежать если все свои данные, необходимые для обработки, вы передадите в атрибут класса, или добавите элементы в DOM документ которые будут содержать эти данные опять же в своих классах. Если вы используете HTML 5, то для этого теперь есть атрибут data-<название>=”значение”, при небольшом ухищрении этот тег будет работать и в старых IE. Вариантов передать данные в HTML масса. В последствии многие просто не хотят или ленятся эти данные получать и вытаскивать из структуры DOM. Что тоже никак не оправдывает такой подход. С одной стороны использование атрибутов событий в HTML дает нам небольшое преимущество в скорости и простоте, но это старый век, и так делать некрасиво, тем более что зачастую, сами того не подозревая, нам нужны возможности объекта MouseEvent.

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

Методы click(), bind(), live()

Если у нас на страничке очень много однотипных ссылок и нам нужно обработать их событие onclick, то так делать категорически не нужно:

Если же информация на страницу подгружается технологией ajax, то используя метод bind() новые тэги или группы тегов не будут откликаться по вашему обработчику, для этого используется метод live():

Теперь все элементы структуры DOM в том числе и вновь добавленные будут закреплены за данным обработчиком события.
Примечание: Будте аккуратны используя данные методы. В сарых IE они не работают при использовании jQuery версии ниже 1.4.2.
Самый надежный метод регестрирования события on() так как он не меняется в jQuery от версии к версии и на его основе создаются другие методы, он является как бы родителем:

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

При загрузке страницы jQuery находит все теги с классом «links». Далее ко всем этим ссылкам добаляется параметр ajax. Создается впечатление что пользователь нажмет на все эти ссылки разом. Пользователь всегда нажмет на одну ссылку, поэтому целесообразний использовать следующий код:

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

В переменную а всё кладется как положено, но в переменню b каждую итерацию кладутся одни и те же данные, но с огромными потерями производительности, то есть на каждый чих мы ищем в структуре документа теги с классом someClass. Имя возможность их сохранить мы все равно дергаем DOM (а если количество строк в документе 5000?). Необходимо выносить такие вещи из тела функции:

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

Источник

READ  Как правильно подключить по цветам интернет кабель
Поделиться с друзьями
Как подключить и установить...
Adblock
detector