JavaScript для 1С-Битрикс: лучшие практики и советы разработчиков

Кастомные события — мощный инструмент для создания слабосвязанных, поддерживаемых фронтенд-архитектур в 1С-Битрикс. С помощью BX.addCustomEvent и BX.onCustomEvent вы можете создавать сложные взаимодействия между компонентами, синхронизировать виджеты и строить событийные шины без лишних завис...

Кастомные события — один из самых простых и удобных способов «склеивать» независимые куски фронтенда в 1С-Битрикс. Вы подписываетесь на событие где-то в одном месте, генерируете его в другом — и код остаётся слабо связанным.

В этой статье разберём BX.removeCustomEvent: когда её вызывать,...

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

Кратко: BX.cleanNode() — это инструмент для удаления потомков (и самого узла при необходимости) из DOM-дерева прямо из коробки 1С-Битрикс. Функция незаменима, когда нужно быстро «обнулить» контейнер перед повторным выводом данных, освободить память, избавиться от привязанных слушателей событи...

Кратко: BX.remove() — это “скальпель” для фронтенд-разработчика на 1С-Битрикс. С его помощью можно грамотно очищать DOM от временных элементов, всплывающих подсказок, динамически созданных форм или модальных окон, не оставляя «мёртвых» ссылок и обработчиков событий.

JavaScript-ядро Bitrix Framework содержит компактный, но чрезвычайно полезный метод BX.style(). Он упрощает работу со стилями элементов и позволяет как читать, так и изменять CSS-свойства без прямой работы с style и getComputedStyle.

Работа с классами HTML-элементов — одна из повседневных задач фронтенд-разработчика, и платформа 1С-Битрикс предоставляет для этого удобный набор методов пространства имён BX. В этой статье мы разберём «под микроскопом» функцию BX.hasClass, узнаем, как она работает изнутри, рассмотрим частые ...

В JavaScript-ядре Bitrix Framework есть пара лаконичных, но невероятно полезных методов — BX.denyEvent() и BX.allowEvent(). С их помощью можно временно отключать и снова включать обработчики конкретного события на конкретном DOM-элементе. Это особенно удобно, когда нужно предотвратить «дребез...

Кратко: BX.proxy и BX.delegate — это «фабрики» функций-делегатов, которые помогают корректно передавать контекст (this) в обработчики событий, колбэки AJAX и другие асинхронные вызовы во фронтенде 1С-Битрикс.

Работая с фронтендом на 1С-Битрикс, почти каждый проект сталкивается с задачей динамического изменения размеров элементов: подгоняем высоту карточек под самый высокий блок, анимируем раскрытие аккордеона, вычисляем ширину колонки до и после перестроения сетки.

В ядре JavaScript 1С-Битрикс вся работа с событиями унифицирована через пространство имён BX. Помимо привычных BX.bind и BX.unbind, существует метод BX.unbindAll, который снимает все обработчики, ранее зарегистрированные через BX-ядро, либо только с указанного элемента, если он передан как па...

BX.toggleClass() — одна из самых «лёгких», но при этом крайне полезных функций ядра Bitrix JS-framework. Она избавляет от рутинных проверок наличия CSS-класса у узла и позволяет за один вызов добавить, удалить или «прокрутить» набор классов. Ниже — подробное руководство и подборка практических пр...

Функции ядра 1С-Битрикс позволяют мгновенно запретить или разрешить выделение текста на любом DOM-узле. Это полезно, когда вы создаёте drag-and-drop-интерфейсы, интерактивные меню или карточки, где случайная подсветка портит UX. Ниже — полное руководство с актуальными, проверенн...

BX.fireEvent() — маленькая, но крайне полезная функция ядра Bitrix. Она берёт на себя всю кросс-браузерную «грязь» и позволяет вызвать любое DOM-событие так, будто пользователь действительно кликнул мышью или нажал клавишу. Ниже — подробное руководство с рабочими примерами без внешних ссылок ...

Метод BX.bindDelegate ― один из самых эффективных способов «поймать» событие на динамически изменяющихся страницах Битрикс. Он устраняет проблему, когда элементы создаются JavaScript-ом уже после подключения обработчиков, и вам приходится заново «привязывать» события. Ниже разберём синтаксис, под...

В современной веб-разработке управление визуальными элементами играет ключевую роль в создании интерактивных и привлекательных пользовательских интерфейсов. В этой статье мы рассмотрим, как использовать метод BX.setOpacity в 1С-Битрикс для управления прозрачностью элементов DOM. Это позволит вам ...

В статье разбираем, зачем и как правильно «отвязывать» события, работая с ядром JavaScript-библиотеки 1С-Битрикс, — от простых кликов до тонких сценариев с динамическим DOM.

Кому пригодится: разработчикам компонентов, административных форм и модулей, где требуется динамически изменять выпадающие списки без перезагрузки страницы.

Плавная прокрутка к нужному элементу ― классический приём для улучшения UX. В ядре 1С-Битрикс уже есть готовый метод BX.scrollToNode, который избавляет от ручного расчёта координат и кросс-браузерных хаков. В статье разберём сигнатуру функции, приведём типовые и нетиповые кейсы, подскажем...

В библиотеке ядра Bitrix Framework часто приходится динамически показывать и скрывать элементы: от валидации форм до реактивных SPA-разметок.
Метод BX.isNodeHidden(node) возвращает true, если переданный DOM-узел скрыт, и false, если отображается. Под «скрыт» понимается любой из вариантов:

BX.focus(node) — это «битриксовая» обёртка над нативным element.focus(), которая бережно кросс-браузерно ставит курсор в нужное поле, автоматически прокручивает страницу до элемента и защищает вас от ошибок, если нода ещё не попала в DOM. Ниже - всё, что нужно знать о приёмах работы с фок...

Встроенная JS-библиотека ядра 1С-Битрикс содержит удобные «джейквери-подобные» методы для работы с CSS-классами. BX.addClass и BX.removeClass позволяют безопасно добавлять или удалять класс у одного или группы узлов, возвращая сам узел для дальнейших операций. Это основной строительный ...

BX.ready — это «универсальный DOMContentLoaded» из библиотеки Bitrix Framework.
Функция гарантирует, что ваш JavaScript-код запустится только тогда, когда DOM-дерево уже построено и элементы доступны для чтения/записи. Это особенно важно для компонентов и шаблонов, которые добавляются ди...

Метод BX.adjust() относится к ядру JavaScript-библиотеки Bitrix и предназначен для быстрого и безопасного изменения существующих DOM-узлов. По сути это «швейцарский нож» для манипуляций с атрибутами, стилями, событиями и содержимым, который избавляет от рутинного element.style, addEventListener, ...

В стандартном JavaScript вы, вероятно, привыкли к addEventListener.

В «1С-Битрикс» та же задача решается «платформенным» способом — через BX.bind. Это даёт единый API, совместимый со старыми браузерами, интегрированный с остальными утилитами ядра Bitrix и удобный для отладки. Функция под...

В ядре JavaScript-библиотеки 1С-Битрикс у функции BX.create особая роль — это универсальный конструктор DOM-узлов, который за один вызов позволяет:

В веб-разработке часто возникает необходимость выделять элементы интерфейса при взаимодействии с пользователем. Один из способов сделать это — затемнение остальных элементов при наведении курсора на один из них. В данной статье мы рассмотрим, как это можно реализовать с помощью HTML, CSS и Ja...

Anime.js (/ˈæn.ə.meɪ/) - это достаточно легкая библиотека анимации JavaScript с простым, но мощным API.
Она работает со свойствами CSS, SVG, атрибутами DOM и объектами JavaScript.