Просмотров: 41368
Дата последнего изменения: 01.02.2023
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
4
5
Недоступно в лицензиях:
Ограничений нет
Небольшой список типовых ошибок и советов по работе с JS-библиотекой.
- Не используйте старые библиотеки utils.js, ajax.js и chttprequest.js.
- Избегайте использования BX.findChild и BX.findChildren. Функции эти не страшные, но из-за неправильного использования и большого DOM'а, количество итераций возрастает до нескольких тысяч. Лучше используйте выборки по ID или по firstChild, parentNode, nextSibling, previousSibling.
- Избегайте BX.loadScript и BX.loadCSS. Они плохи тем, что:
Выход: использовать методы AddHeadScript и SetAdditionalCSS.
Еще один момент, который может показаться очевидным. Браузер гарантирует подключение и выполнение скриптов в той последовательности, в которой они идут на странице. Скрипты с атрибутами async
и defer
не подчиняются этому правилу, но в Bitrix Framework таких нет. Не нужно проверять объект на существование перед использованием и уж тем более не стоит его загружать через loadScript.
- Не рекомендуется Inline CSS (имеется в виду теги
link
и style
, выводимые в body
).
- Не делайте больших inlinе скриптов. Основной код желательно выносить во внешние файлы. Данные из PHP - вносить JSON'ом. Хороший вариант, когда на странице только вызов конструктора или Init'а c передачей данных в JSON'е.
- Внимательно используйте setTimeout. Достаточно часто таймауты используются необоснованно. Например, если не работает код в браузере, то часто прибегают к установке таймаута "на глаз". Это происходит из-за недопонимая событийной модели.
Бесконечных таймеров необходимо избегать вообще. Если все таки это нужно, то рассмотрите вариант использования core_timer.js. Это синглтон для таймеров.
- Используйте "ленивую" инициализацию (загрузку). Создавайте объекты, верстку, окна и прочее только тогда, когда это действительно нужно. Например, нет смысла заранее создавать BX.PopupWindow (а он вставляет в DOM новые узлы) до того момента, когда это действительно нужно (нажатие на ссылку или кнопку). Если интерфейс используется редко и некритично показать/не показать процесс загрузки, то лучше сделать ajax'ую подзагрузку.
- Глобальные переменные используйте минимально, локальные переменные используйте с var.
- С осторожностью относитесь к глобальным обработчикам (window, document, document.body). Этот код вызывается на каждый клик, на каждое движение мыши, на каждое изменение скроллинга. И не забывайте делать unbind.
- Делайте один appendChild вместо нескольких в цикле. Еще посмотрите что такое DocumentFragment.
- Объединяйте и разделяйте CSS/JS. Здесь нужно руководствоваться здравым смыслом. Есть компоненты, которые содержат множество мелких скриптов и CSS-файлов. Имеет смысл их объединить в один файл.
Есть и обратные примеры. Например, в создаваемом вами модуле есть большой CSS-файл, который содержит почти все стили для своего отображения. И это лучше, чем множество мелких (отдельно на таблицу, тулбар, попапы и фильтры). Но вот появилась новая задача - добавить в живую ленту небольшой блок из вашего модуля. В этом случае не нужно тащить в живую ленту весь файл CSS из модуля, лучше сделать небольшой отдельный файл.
- Создайте защиту от двойного подключения на странице, так как компонент может быть подключен на странице несколько раз.
- Для замера производительности запускайте профилировщики Chrome и Internet Explorer'а.
- Проверяйте свой код в PhpStorm'е или аналогичных инструментах.