где подключаются скрипты bitrix
Где подключаются скрипты bitrix
Битрикс. Правильное подключение файлов js и css в шаблоне
В данной статье мы рассмотрим как правильно подключать дополнительные файлы стилей и скрипты в шаблон сайта, чтобы корректно работа настройка сжатия файлов js и css.
Прямое подключение дополнительных файлов не рекомендуется
С появлением ядра D7 можно подключать так
Записи равнозначные, можно использовать и запись без обращения к ядру D7 и с обращением.
Подключение js и css а шаблоне компонента
Для правильного подключения дополнительных файлов, подключаем их из шаблона компонента, а не прописывает в шаблон сайта.
В шаблоне компонента прописываем
Данные файлы тогда правильно объединятся с остальными.
Заполните форму
Продолжая использовать этот сайт, Вы принимаете условия политики конфиденциальности и даёте согласие на обработку пользовательских данных. Подробнее
Продолжая использовать этот сайт, Вы принимаете условия политики конфиденциальности и даёте согласие на обработку пользовательских данных (файлов cookie), в том числе с использованием систем аналитики «Яндекс. Метрика» и «Google Analytics», (IP-адрес; версия ОС; версия веб-браузера; сведения об устройстве (тип, производитель, модель); разрешение экрана и количество цветов экрана; наличие программного обеспечения для блокирования рекламы; наличие Cookies; наличие JavaScript; язык ОС и Браузера; время, проведенное на сайте; глубина просмотра; действия пользователя на сайте; географические данные) в целях определения посещаемости сайта. Отказаться от обработки пользовательских данных и использования «cookie» можно, выбрав соответствующие настройки в браузере. Однако это может повлиять на работу некоторых функций сайта. Скрыть
Где подключаются скрипты bitrix
Цитатник веб-разработчиков В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.
Чтобы научиться программировать в Bitrix Framework, нет необходимости изучать всю линейку курсов. Но есть моменты, которые необходимо знать разработчикам о системе, они раскрыты в начальных курсах:
Как построен курс
Общепринятая градация квалификации разработчиков в рамках курса обозначает что:
Начальные требования к подготовке
Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):
У нас часто спрашивают, сколько нужно заплатить
Но у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Тесты
После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче последовательности тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.
Комментарии к статьям
Что дальше?
Одновременно с изучением курса Разработчик Bitrix Framework вам придётся обращаться к информации о других технологиях Bitrix Framework. Эта информация размещена в следующих курсах:
Для преподавания оффлайн
Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).
Если нет интернета
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
iOS
Marvin for iOS
ShortBook
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса.
Где храните css, js и прочую статику шаблона?
Летом проходил курсы веб-разработчиков битрикс (для начинающих), во всех примерах CSS, JS и прочее хранилось в /templates/папка_шаблона/.
+ в компонентах часто необходимо визуально оформить вывод информации с скриптами и стилями соответственно, которые в итоге лежат в папке компонента и подключается при необходимости.
| Цитата |
|---|
| вынеси все стили за пределы папки bitrix/ которая является системной |
| Цитата |
|---|
| 1. потому как на папку /bitrix вполне верятно настроить исключительные права, которые не дадут доступа для низжелащих папок 2. папку в корне /static/ можно вынести в CDN для оптимизации 3. простота обновления 4. нельзя пользователю показывать реальные пути до системных папок |
Собственно я хочу узнать мнение участников сообщества по поводу таких аргументов и что вы вообще думаете на эту тему.
Про CDN меня потому что тоже поразило, т.к. я полез в настройки этого модуля и там нет указания каких либо директорий, а только указывается адрес сайта с которого собирается статика, я так понял это все происходит в автоматическом режиме.
Я хочу просто разобраться и сделать определенные выводы для себя.
Мне тоже интересно мнение участников, пока напишу свое.
| Цитата |
|---|
| senty пишет: Летом проходил курсы веб-разработчиков битрикс (для начинающих), во всех примерах CSS, JS и прочее хранилось в /templates/папка_шаблона/. |
Олично, как тебе обучение?
| Цитата |
|---|
| 1. потому как на папку /bitrix вполне верятно настроить исключительные права, которые не дадут доступа для низжелащих папок |
| Цитата |
|---|
| senty пишет: 2. папку в корне /static/ можно вынести в CDN для оптимизации |
Совсем не понятно. Если речь об удобстве редактирования в одном файле, то можно все стили компонентов сложить в один файл в шаблоне. Иногда так действительно удобно. О скриптах так не скажу.
| Цитата |
|---|
| senty пишет: 4. нельзя пользователю показывать реальные пути до системных папок |
| Цитата |
|---|
| Иван Малышин пишет: Привет! |
Мне тоже интересно мнение участников, пока напишу свое.
| Цитата |
|---|
| senty пишет: Летом проходил курсы веб-разработчиков битрикс (для начинающих), во всех примерах CSS, JS и прочее хранилось в /templates/папка_шаблона/. |
Мне все понравилось, жду следующие курсы. Не успел все лекции пройти из второй части, но и эту проблему вы решили.
Собственное только один ваш ответ разъясняет все аргументы предоставленные коллегой по поводу размещения стилей и скриптов в корне.
Еще один важный момент вспомнил.
| Цитата |
|---|
| возьмем случай с компонентом, когда нам необходимо добавить какой-либо функционал за рамками проекта, где еще требуется визуальное оформление с использованием css и js, мы все это дело размещаем в папке bitrix/components/папка компонента |
| Цитата |
|---|
| вообще считается моветоном, потому как увеличивает время загрузки страницы (причем значительно) и ее общую семантику, про это я уже говорил |
3 CSS (или JS), но на этот случай в Битрикс есть стандартный функционал, который объединяет CSS и JS.
| Цитата |
|---|
| Цитата возьмем случай с компонентом, когда нам необходимо добавить какой-либо функционал за рамками проекта, где еще требуется визуальное оформление с использованием css и js, мы все это дело размещаем в папке bitrix/components/папка компонента |
Как я писал выше, стили компонентов можно размещать и в общем файле стилей, если в проекте так удобнее, все зависит от задач. Ну и механизм объединения файлов стилей упрощает работу, если удобнее хранить стили в шаблоне компонента.
Где подключаются скрипты bitrix
Цитатник веб-разработчиков В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.
Чтобы научиться программировать в Bitrix Framework, нет необходимости изучать всю линейку курсов. Но есть моменты, которые необходимо знать разработчикам о системе, они раскрыты в начальных курсах:
Как построен курс
Общепринятая градация квалификации разработчиков в рамках курса обозначает что:
Начальные требования к подготовке
Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):
У нас часто спрашивают, сколько нужно заплатить
Но у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Тесты
После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче последовательности тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.
Комментарии к статьям
Что дальше?
Одновременно с изучением курса Разработчик Bitrix Framework вам придётся обращаться к информации о других технологиях Bitrix Framework. Эта информация размещена в следующих курсах:
Для преподавания оффлайн
Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).
Если нет интернета
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
iOS
Marvin for iOS
ShortBook
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса.
Как правильно подключить 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 в настройках модуля или компонента, а вот в решениях других разработчиков, к сожалению, такое встретить не всегда удается.