Библиотека Битрикс 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]);`