Полный цикл в digital

Библиотека Битрикс BX

1С-Битрикс разработал для платформы библиотеку под названием BX, которая примерно на 80% повторяет всеми любимый jQuery с рядом отличий, среди которых как достоинства, так и недостатки. До определенного момента разработчики под битрикс мало смотрели в сторону библиотеки, но появился order_ajax.js который перевернул всё.

Достоинства

Главным плюсом использования библиотеки в том, что она уже присутствует в проекте.

Битрикс избрал простой и стабильный путь, библиотека BX в первую очередь обеспечивает работу внутренних потребностей платформы, а уже потом потребности разработчиков под нее. Обновление библиотеки не вредит старому коду, так как существует обратная совместимость.

Библиотека BX имеет низкий уровень конфликтности с другими библиотеками или скриптами. В отличии от тех же плагинов jQuery, которые могут конфликтовать на уровне разных версий библиотеки.

Очень крутым плюсом на мой взгляд является надстройка с утилитами в библиотеке, которые позволяют повторить ряд функций PHP https://dev.1c-bitrix.ru/api_help/js_lib/kernel/utilits/bx_util.php. Значительно упрощает разработку.

Функции JS API

Базовые функции
Функция Битрикс Описание Аналог jquery
BX(function(){ });
Событие готовности DOM-структуры
$(function(){ });
BX.ready(function(){ });
Событие готовности DOM-структуры
$().ready(function(){ });
Утилиты PHP
Функция Битрикс Описание Аналог jquery
BX.util.array_values(array)
Аналоги функций php -
BX.util.array_keys(array)
Аналоги функций php -
BX.util.array_merge(array)
Аналоги функций php -
BX.util.array_unique(array)
Аналоги функций php -
BX.util.in_array(array)
Аналоги функций php -
BX.util.array_search(array)
Аналоги функций php -
BX.util.trim(array)
Аналоги функций php -
BX.util.htmlspecialchars(array)
Аналоги функций php -
BX.util.htmlspecialcharsback(array)
Аналоги функций php -
BX.utill.preg_quote(array)
Аналоги функций php -
BX.util.str_pad(array)
Аналоги функций php -
BX.util.strip_tags(array)
Аналоги функций php -
Функции поиска DOM
Функция Битрикс Описание Аналог jquery
let object = BX('my_id');
Поиск по идентификатору
let array = $('#my-id');
let array = 
BX.findChildren(obParent, 
{ tag: 'td', className: 'class-name' }, 
true);

let object = 
BX.findChild(obParent, 
{ tag: 'td', className: 'class-name' }, 
true, true);
Множественный рекурсивный поиск в DOM-структуре объекта
let array = arParent.find('td.class-
name');
let object = 
BX.findChild(obParent, 
{tag: 'div', className: 'class-name'}, 
true);
Немножественный рекурсивный поиск в DOM-структуре объекта
let array = 
arParent.find
('td.class-name:first');

let array = 
arParent.find
('td.class-name').first;
let object = 
BX.findChild(obParent, 
{tag: 'div', className: 'class-name'});
Немножественный нерекурсивный поиск в DOM-структуре объекта
let array = 
arParent.children
('td.class-name:first');
let object = 
BX.findChild(obParent, 
{tag: 'div', attribute: { data-id:'167' }});
Поиск по атрибутам (немножественный, нерекурсивный)
let array = 
arParent.children
('div[data-id=167]');
let object = 
BX.findChild(obParent, 
{tag: 'div', property: { data-id:'167' }});
Поиск по свойствам (немножественный, нерекурсивный)
let array = 
arParent.children
('div[data-id=167]');
let object = 
BX.findChild(obParent,function(el)
{ return !!el.tagName 
&& 
el.tagName.toUpperCase()==='DIV' 
&& 
el.hasAttribute('data-id'); });
Поиск со сложной логикой (немножественный, нерекурсивный)
let array = 
arParent.children
('div[data-id]');
let parent = 
BX.findParent(object,
{className : 'class-name'});
Поиск среди родительских элементов DOM-структуры объекта
let arParent = 
array.parents
('.class-name:first');
let ob = 
BX.findNextSibling(object, 
{className : 'class-name'});

let ob = 
BX.findPreviousSibling(object, 
{className : 'class-name'});
Поиск предыдущих/следующих элементов DOM-структуры
let ar = array.next();

let ar = array.prev();
Управление DOM-структурой
Функция Битрикс Описание Аналог jquery
let object = BX.create(
{
tag: 'div',
props: { name: 'val' },
attrs: { 'data-name': 'val' },
style: { name: 'val' },
events: {},
children: {},
text: '', // or
html: '', // or
});
Создает объект и устанавливает его параметры
$('<div>')
.prop(name,val)
.data('name','val')
.css(name,val)
.on(…)
.append(…)
.text('') // or
.html(''); // or
let object = BX.adjust(
{
node: object,
props: { name: 'val' },
style: { name: 'val' },
events: {},
children: {},
text: '', // or
html: '', // or
});
Устанавливает параметры объекта
$(object)
.prop(name,val)
.css(name,val)
.on(…)
.append(…)
.text('') // or
.html(''); // or
BX.append(object,parent);
Добавляет объект внутрь другого объекта
$(object).appendTo(parent);
BX.remove(object);
Удаляет объект из структуры
array.remove();
BX.cleanNode(object);
Очищает объект от всех вложенных элементов
array.empty();
Манипуляции с классами
Функция Битрикс Описание Аналог jquery
BX.addClass(object, 'class-name');
Добавляет класс к элементу
array.addClass('class-name');
BX.removeClass(object, 'class-name');
Удаляет класс у элемента
array.removeClass('class-name');
BX.toggleClass(object, 'class-name');
Переключает класс у элемента
array.toggleClass('class-name');
let bHasClass = BX.hasClass(object,
'class-name');
Проверяет наличие класса у элемента
let bHasClass = 
array.hasClass('class-name');
Data-атрибуты
Функция Битрикс Описание Аналог jquery
let value = BX.data(object,'name');
Получает значение Data-атрибута
let value = $(object).data('name');
BX.data(object,'name','value');
Устанавливает значение Data-атрибута
$(object).data('name','value');
Манипуляции со стилями
Функция Битрикс Описание Аналог jquery
BX.style(object,'name','value');
Устанавливает css свойство у элемента
$(object).css('name','value');
Функции обработки форм
Функция Битрикс Описание Аналог jquery
BX.submit(obForm);
Отправляет форму на сервер
arForm.submit();
BX.focus(object);
Устанавливает фокус на поле ввода
$(object).focus();
События
Функция Битрикс Описание Аналог jquery
BX.bind(object, 'click', function() {});
Устанавливает функцию обработки события для элемента
$(object).on('click',function(){});
Proxy-функции
Функция Битрикс Описание Аналог jquery
BX.proxy(function(params){ }, object)
Инициализирует функцию с кастомной переменной this
$.proxy(function(params){}, object)
BX.bindDelegate(object, 'click',
{tagName : 'a'}, BX.proxy(onClick,
this));
let onClick = function() {
let target = BX.proxy_context;
}
Пример получения исходного объекта в Proxy-функции
$(object).on('click',
$.proxy(onClick,this));
let onClick = function(event) {
let target = event.target;
}
Функции AJAX
Функция Битрикс Описание Аналог jquery
BX.ajax.post(url,{},function(res) {});
Отправляет POST запрос
$.post(url,{},function(res) {});
BX.ajax.loadJSON(url,{},function(res){});
Отправляет POST запрос и получает результат в виде объекта
$.getJSON(url,{},function(res) {});
BX.ajax.InsertToNode(url,object);
Отправляет запрос и вставляет результат в объект (можно указать id) -
Система кастомных событий
Функция Битрикс Описание Аналог jquery
BX.addCustomEvent
(window, 'onEvent', function_name);
Инициализирует глобальный обработчик события
$(document).bind(
'my.onEvent', function_name);
BX.removeCustomEvent(window,
'onEvent', function_name);
Отключает глобальный обработчик события
$(document).unbind('my.onEvent',
function_name);
BX.onCustomEvent(window,
'onEvent',[arg1,arg2,arg3]);
Выполняет глобальный обработчики события
$.event.trigger('my.onEvent',
[arg1,arg2,arg3]);
BX.addCustomEvent(object,
'onEvent', function_name);
Инициализирует обработчик события для объекта
object.on('my.onEvent',
function_name);
BX.removeCustomEvent(object,
'onEvent', function_name);
Отключает обработчик события для объекта
object.off('my.onEvent',
function_name);
BX.onCustomEvent(object,
'onEvent',[arg1,arg2,arg3]);
Выполняет обработчики события для объекта
object.trigger('my.onEvent',
[arg1,arg2,arg3]);
Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг