JavaScript API Битрикс (BX) — шпаргалка по основным функциям

JavaScript-библиотека Битрикса ( BX ) содержит большое количество готовых методов для работы с DOM, AJAX, событиями, анимацией, cookie и другими задачами. Несмотря на популярность нативного JavaScript и сторонних библиотек, BX остается удобным инструментом при разработке проектов на 1С-Битрикс.

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

Инициализация BX.ready()

Практически любой код, использующий библиотеку BX, рекомендуется выполнять после полной загрузки DOM.

BX.ready(function () {

    // Ваш код

});

По своему назначению этот метод аналогичен событию DOMContentLoaded.

Поиск элементов DOM

Получение элемента по ID

let element = BX('my_id');

Поиск первого дочернего элемента

let child = BX.findChild(parent, {
    tag: 'div',
    className: 'item'
});

Поиск всех дочерних элементов

let items = BX.findChildren(
    parent,
    {
        tag: 'div',
        className: 'item'
    },
    true
);

Поиск родительского элемента

let parent = BX.findParent(element, {
    className: 'container'
});

Поиск соседних элементов

BX.findNextSibling(element);

BX.findPreviousSibling(element);

Работа с CSS-классами

BX.addClass(element, 'active');

BX.removeClass(element, 'active');

BX.toggleClass(element, 'active');

BX.hasClass(element, 'active');

Показать или скрыть элемент

BX.show(element);

BX.hide(element);

Либо изменить любой CSS-параметр:

BX.style(element, 'display', 'none');

Создание DOM-элементов

Для создания HTML-узлов используется метод BX.create().

let card = BX.create('DIV', {
    attrs: {
        className: 'card'
    },
    text: 'Привет!'
});

Можно сразу создавать более сложную структуру.

let table = BX.create('TABLE', {

    attrs: {
        className: 'table'
    },

    children: []

});

BX.append(table, document.body);

Добавление элементов в DOM

BX.append(node, parent);

BX.prepend(node, parent);

BX.insertAfter(node, target);

BX.insertBefore(node, target);

BX.remove(node);

Работа с событиями

Добавление обработчика

BX.bind(button, 'click', function(){

    console.log('Клик');

});

Удаление обработчика

BX.unbind(button, 'click', handler);

Делегирование событий

BX.delegate(handler, this);

AJAX-запрос

Минимальный пример AJAX-запроса средствами BX.

BX.ajax({

    url: '/ajax.php',

    method: 'POST',

    dataType: 'json',

    data: {

        id: 15

    },

    onsuccess: function(result){

        console.log(result);

    },

    onfailure: function(){

        console.log('Ошибка');

    }

});

BX.ajax.runComponentAction()

Если используется D7 и контроллеры компонентов, удобнее пользоваться методом runComponentAction().

BX.ajax.runComponentAction(
    'vendor:component',
    'save',
    {
        mode: 'class',
        data: {
            id: 10
        }
    }
).then(function(response){

    console.log(response.data);

});

Пользовательские события

BX.addCustomEvent('myEvent', function(data){

    console.log(data);

});

BX.onCustomEvent('myEvent', {

    id: 1

});

Работа с Cookie

BX.setCookie('city', 'Москва');

let city = BX.getCookie('city');

Работа с формами

BX.submit(form);

BX.focus(input);

Всплывающий индикатор загрузки

let loader = BX.showWait();

// ...

BX.closeWait(loader);

Очень удобно использовать при выполнении длительных AJAX-запросов.

Встроенные утилиты

BX.util.trim(text);

BX.util.htmlspecialchars(text);

BX.util.urlencode(text);

Локализация

Если используются языковые файлы Битрикса:

BX.message('HELLO_MESSAGE');

Полезные методы

BX.clone(object);

BX.proxy(handler, this);

BX.defer(handler);

BX.debounce(handler, 300);

Заключение

Даже если вы предпочитаете писать на чистом JavaScript, библиотека BX содержит большое количество готовых методов, которые позволяют быстрее решать типовые задачи без подключения дополнительных зависимостей. Особенно это актуально при разработке административной части и компонентов 1С-Битрикс.

Шпаргалка будет постепенно пополняться новыми примерами по мере появления интересных задач в реальных проектах.

JS API Битрикс (BX) шпаргалка по основным функциям