Категории

Популярные тэги

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

  • 6 декабря 2023
  • 1040
  • Нет комментариев

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]);

Загрузка комментариев...