JavaScript-библиотека. Возможности и примеры использования. Конференция 1C-Битрикс 26 января 2012 Антон Герасимюк 01. - презентация

1 JavaScript-библиотека. Возможности и примеры использования. Конференция 1C-Битрикс 26 января 2012 Антон Герасимюк 01

2 О чем доклад? Архитектура библиотеки Основные функции и методы Обзор расширений библиотеки – Ajax – Анимация – Работа с LocalStorage – Оконная библиотека – Форматирование даты Демонстрация примеров 02

3 Предыстория создания 5 лет назад в Битриксе JS-кода было очень мало (админка, визуальный редактор, календарь) Развитие Web потребовало более продвинутых интерфейсов. Количество Javascriptа стало постоянно увеличиваться. Код был разрозненным и часто дублировался. JS-библиотека объединила все старые наработки и упростила разработку новых модулей. Сейчас в новых модулях Битрикса Javascript-кода больше чем PHP-кода 03

4 Зачем свой велосипед? Библиотека учитывает особенности Битрикса Есть совместимость со старым кодом Никаких проблем с поддержкой и расширением функциональности JS-библиотека не накладывает никаких ограничений - используйте совместно свой любимый фреймворк. 04

5 Архитектура Все файлы библиотеки находятся в папке /bitrix/js/main/core/ core.js – ядро библиотеки Ядро определяет глобальный объект BX, который содержит статические методы для работы с событиями, DOM и др. core_*.js – файлы расширений – core_ajax.js – работа с Ajax-запросами – core_date.js – форматирование даты 05

6 Подключение в PHP CUtil::InitJSCore([array $arExtensions]) Подключает ядро, стили и языковые сообщения библиотеки $arExtensions – массив требуемых расширений библиотеки Пример: 06

7 Регистрация своих расширений 07

8 Начало работы BX.ready(function(){ //свой код }); BX.ready() гарантирует, что DOM-дерево доступно для изменения 08

9 Манипуляции с DOM-объектами DOMNode BX.create(tag[, data[, context]]) Создает узел DOM-дерева с именем тега tag. Описательный объект data может иметь следующие поля: { tag: имя тега узла, props: { дополнительные js-свойства}, style: { стили узла }, events: {обработчики событий узла}, children: [массив дочерних узлов], text: текстовое содержимое узла, html: HTML-содержимое узла } DOMNode BX.adjust(DOMNode node, object data) Изменяет свойства узла node. 09

10 Манипуляции с DOM-объектами DOMNode BX.addClass(DOMNode node, string className) Добавляет узлу node CSS-класс className, если он такового не имеет. DOMNode BX.removeClass(DOMNode node, string className) Удаляет CSS-класс className, у узла node. DOMNode BX.toggleClass(DOMNode node, string|array className) Переключить наличие/отсутствие CSS-класса className у узла node или устроить ротацию CSS-классов, если className – массив. bool BX.hasClass(DOMNode node, string className) Проверяет, есть ли уже у узла node CSS-класс className. 010

11 Манипуляции с DOM-объектами DOMNode BX. style(DOMNode node, string property[, string value]) Получить текущее значение стиля property узла node или установить его в значение value. null BX.remove(DOMNode node) Удалить узел DOM-структуры. DOMNode BX.cleanNode(DOMNode node[, bool bSuicide]) Очистить DOM-узел от всех дочерних элементов. Если второй параметр равен true, сам узел также будет удален. BX.show( DOMNode node), BX.hide( DOMNode node) Показать/скрыть узел. 011

12 Поиск элементов в DOM Array BX.findChildren(DOMNode obj, Object params, bool recursive) DOMNode BX.findChild(DOMNode obj, Object params, bool recursive) Поиск потомков params : { tagName|tag: имя тега требуемого узла, className|class: CSS-класс, который должен содержать требуемый узел, attribute: {attribute: value, attribute: value} | attribute | [attribute, attribute], - атрибут или коллекция атрибутов, которые должны присутствовать в требуемом узле property: { prop: value, prop: value} | prop | [prop, prop] – свойство или коллекция свойств, которые должны присутствовать в требуемом узле callback: функция для произвольной фильтрации } 012

13 Поиск элементов в DOM DOMNode BX(String id) Поиск элемента по id DOMNode BX.findParent(DOMNode obj, Object params) Поиск родителя DOMNode BX.findNextSibling(DOMNode obj, Object params) DOMNode BX.findPreviousSibling(DOMNode obj, Object params) Поиск соседних элементов 013

14 Работа с событиями void BX.bind(DOMNode element, String event, Function handler) Установить функцию handler в качестве обработчика события event элемента element. Пример: BX.bind(BX("test"), "click", function() {alert(1); }) void BX.unbind(DOMNode element, String event, Function handler) Снять обработчик handler события event элемента element. void BX.unbindAll(DOMNode element) Снять все зарегистрированные обработчики событий с элемента element BX.eventCancelBubble(Event event) Запретить всплывание события BX.eventReturnFalse(Event event) Отменить действие по умолчанию 014

15 Пользовательские событиями BX.addCustomEvent(Object eventObject, string eventName, Function handler) Назначить обработчик eventHandler кастомному событию с именем eventName, возникающем в объекте eventObject. BX.removeCustomEvent(Object eventObject, string eventName, Function handler) Удалить обработчик eventHandler кастомного события с именем eventName. BX.onCustomEvent(Object eventObject, string eventName[, Array arEventParams]) Вызвать все обработчики события eventName для объекта eventObject и передать перевым параметром arEventParams. 015

16 Размеры окна и координаты object BX.pos(DOMNode node) Возвращает координаты и размеры узла, объект с ключами top, right, bottom, left, width, height. object BX.GetWindowScrollSize([DOMDocument doc]) Возвращает размеры скролла, объект с ключами scrollWidth, scrollHeight object BX.GetWindowScrollPos([DOMDocument doc]) Возвращает позицию скролла, объект с ключами scrollLeft, scrollTop object BX.GetWindowInnerSize([DOMDocument doc]) Возвращает размер окна, объект с ключами innerWidth, innerHeight 016

17 Утилиты BX.util – php-аналоги – BX.util.array_merge() – BX.util.array_unique() – BX.util.in_array() – BX.util.trim() – BX.util.htmlspecialchars() – BX.util.urlencode() BX.browser – проверка на браузер – BX.browser.isIE(), BX.browser.isOpera(), BX.browser.isSafari() BX.type – проверка типа объекта – BX.type.isArray(), BX.type.isDate() и др. Демонстрация 017

18 Работа с LocalStorage (core_ls.js) Поддерживается всеми современными браузерами, а также IE7+ Применение – Синхронизация данных между окнами браузера – Кеширование данных на клиенте – Оптимизация ajax-запросов Демонстрация 018

19 Работа с LocalStorage (core_ls.js) BX.localStorage.set(key, value, ttl) Устанавливает значение записи равным value с ключом key. ttl – время жизни в секундах. BX.localStorage.get(key) Получить значение по ключу key BX.localStorage.remove(key) Удалить запись с ключом key События – onLocalStorageSet – установка значения в LS – onLocalStorageRemove – удаление записи в LS – onLocalStorageChange – изменение значение в LS 019

20 Ajax-расширение core_ajax.js XMLHttpRequest BX.ajax(object params) Низкоуровневая функция для отправки ajax-запросов. params: { url: URL запроса method: GET|POST dataType: html|json|script – данные какого типа предполагаются в ответе timeout: 60 – таймаут запроса в секундах async: true|false – должен ли запрос быть асинхронным или нет processData: true|false – нужно ли сразу обрабатывать данные? scriptsRunFirst: false|true – нужно ли выполнять все найденные скрипты перед тем, как отдавать содержимое обработчику start: true|false – отправить ли запрос сразу или он будет запущен вручную onsuccess: функция-обработчик результата onfailure: функция-обработчик ошибки } 020

21 Ajax-расширение core_ajax.js XHRequest BX.ajax.get(string url, function callback) Отправка GET-запроса и передача результата обработчику callback. XHRequest BX.ajax.post(string url, string|object data, function callback) Отправка POST-запроса и передача результата обработчику callback. Параметр data – это строка или ассоциативный массив POST-данных запроса. XHRequest BX.ajax.insertToNode(string url, string|DOMNode node) Запросить url и вставить результат в контейнер node. Если node – строка, то параметр будет интерпретирован как идентификатор контейнера. XMLHttpRequest BX.ajax.loadJSON(string url, function callback) Загрузить json-объект из заданного url и передать его обработчику callback 021

22 Пользовательские настройки BX. userOptions.save(sCategory, sName, sValName, sVal, bCommon) Cохранение значения пользовательской настройки. BX.userOptions.del (sCategory, sName, bCommon, callback) – Удаление значения пользовательской настройки. 022

23 Анимация Class BX.fx(Object options) options: { start: стартовое значение и набор значений finish: конечно значение и набор значений time: время, в течение которого должна производиться анимация type: linear|accelerated|decelerated – закон изменения параметров callback : обработчик значения параметра callback_start : обработчик начала анимации callback_complete : обработчик завершения анимации step: длительность промежутка анимации } BX.fx.prototype.start() – начать анимацию BX.fx.prototype.pause() – затормозить/запустить снова анимацию BX.fx.prototype.stop() – закончить анимацию Объект класса BX.fx вызывает обработчик callback через определенные промежутки времени, задаваемые параметром step, в течение периода time. 023

24 Оконная библиотека (core_popup.js) 024

25 Оконная библиотека (core_window.js) 025

26 Оконная библиотека Class BX.PopupWindow(id, bindElement, options) Сlass BX.CDialog(params) Сlass BX.CAdminDialog(params) Демонстрация 026

27 Форматирование даты (core_date.js) BX.date.format(format, [date[, currentDate[, isUtc]]]) format – полный аналог формата php-функции date, за исключением формата "T" и "e" (символьное название таймзоны). date – дата в формате timestamp или объект класс Date. currentDate – текущая дата (timestamp|Date). isUTC – дата в UTC? Если необходимо работать с датами в UTC. BX.date.format(" d-m-Y H:i:s ") // :22:12 BX.date.format(" j F Y H:i:s ") // 24 Января :22:32 BX.date.format("iago", new Date(2012, 0, 23)) // 2545 минут назад 027

28 Документация будет! 028

29 Заключение JS-библиотека не накладывает никаких ограничений - используйте совместно свой любимый фреймворк. jQuery включена в продукт для удобства разработки дополнений из MarketPlace. 029

30 Спасибо за внимание! Вопросы? Twitter: twitter.com/compotetwitter.com/compote 030