Введение

Введение

В данном разделе представлено описание Javascript-библиотеки Bitrix Framework

Документация по данной библиотеке предполагает уверенные знания разработчика в JavaScript.

Javascript-библиотека Битрикс очень разнообразна. Основным (главным) классом является класс BX. Также к услугам разработчика представлено достаточно большое количество расширений. Например, расширение по работе с датами. К сожалению, не все расширения описаны в документации, но мы постоянно работаем над этим и количество описанных расширений растет.

Для подключения библиотеки предусмотрен серверный метод

CJSCore::Init (
	[array $arExtensions]
)

Метод подключает ядро, стили и языковые сообщения библиотеки.

Параметры функции

К примеру, код подключения ядра и двух расширений:

CJSCore::Init(array('ajax', 'window'))

Использование своего кода

JavaScript-код пишется в отдельном js-файле шаблона сайта, js-файле шаблона компонента, или отдельно расположенном js-файле, подключаемом программно (подробнее о подключении JS-кода можно прочитать в курсе). Любой код с использованием библиотеки должен быть расположен внутри метода BX.ready(). К примеру:

BX.ready(function(){
	//здесь ваш код
});

Это позволит запуститься вашему коду только когда DOM-структура будет полностью загружена и сформирована.

Для дальнейшей простой работы с BX надо уяснить для себя два простых правила:

• Все методы библиотеки работают только с конкретным элементом DOM-структуры. При работе в других фреймворках вы привыкли задавать селектор, и с возвращаемыми объектами сразу производить какие-то действия (к примеру, $(‘input).remove()). В BX такого нет, в BX нужно сначала получить элемент, или массив элементов, и произвести действие с каждым отдельно. Ссылка на конкретный элемент DOM-структуры можно получить методом BX(‘атрибут id DOM-элемента’);
• Большинство методов работает по парному принципу - первым параметром идет элемент, вторым (и далее) параметром - некие данные, которые применяются к указанному элементу (к примеру, BX.setOpacity). Оставшаяся часть методов работает по формату BX.метод(элемент) (к примеру, BX.focus).

В качестве закрепления информации приведем код для удаления всех тегов input в административной части сайта:

BX.ready(function(){
	var fields = BX.findChild(BX('bx-admin-prefix'), {tag: 'input'}, true, true);
	fields.forEach(function(element){
		BX(element).remove();
	}); 
});

Смотрите также

• JS-библиотека: типовые ошибки и советы