Автор: Денис Закусило
Приветствую всех неравнодушных! Это заключительная статья цикла о переходе от модульной архитектуры к сервисам.
[Записки тимлида] Битрикс: от модулей к сервисам
[Записки тимлида] Битрикс: от модулей к сервисам 2
Сегодня мы рассмотрим организацию структуры frontend стороны приложения.
Первым делом нам необходимо подключить node на сервере. В нашем случае мы добавим в docker-compose новую запись.
node: build: context: ./node args: UID: ${UID:-1000} GID: ${GID:-1000} volumes_from: - source links: - php environment: TZ: Europe/Moscow NODE_ENV: ${NODE_ENV:-production} HOST_FROM: ${HOST_FROM:-localhost} stdin_open: true tty: true networks: - bitrixdock extra_hosts: - "host.docker.internal:host-gateway" restart: unless-stopped
И устанавливаем Bitrix cli по инструкции в нашем node/Dockerfile, прокидывая права нашего пользователя из родительской ОС.
FROM node:22-alpine ARG UID ARG GID RUN echo http://dl-2.alpinelinux.org/alpine/edge/community/ >> /etc/apk/repositories RUN apk add -U shadow RUN npm install -g @bitrix/cli RUN chown -R ${UID}:node /usr/local/lib/node_modules/ RUN usermod -u ${UID} node WORKDIR "/var/www/bitrix" EXPOSE 8888
Организуем структуру, такую же, как на бекенде по DDD.
Выполним практическую задачу: Для сделки необходимо получать минимальную дату доставки от бекенда и запрещать оператору выбирать более ранние даты.
Решение:
1. Для начала нам нужно определить место для endpoint list, в котором было бы организовано хранилище адресов для запросов на бекенд.
Сделаем по аналогии с Enums php:
Мы создадим класс, который будет хранить константы.
1.1 Создаем модуль enums и переходим в директорию доменов. Для этого заходим в контейнер, переходим в домен и запускаем команду bitrix build enums:
docker compose exec -T -u node node sh cd <project_dir>/local/js/App/Domains bitrix create enums ? Extension name: (enums) enums ? Extension name: enums ? Enable tests: (Y/n) Y ? Enable tests: Yes ? Use Browserslist: (Y/n) Y ? Use Browserslist: Yes ? Enable minification: (y/N) y ? Enable minification: Yes ? Enable sourceMaps: (Y/n) y ? Enable sourceMaps: Yes │ Success! │ │ Extension App.Domains.enums created │ │ Run bitrix build -p ./enums for build extension │ │ Include extension in php │ │ \Bitrix\Main\UI\Extension::load('App.Domains.enums'); │ │ or import in your js code │ │ import {enums} from 'App.Domains.enums'; │
Наш модуль создался и доступен для импортирования в другие модули через import {enums} from 'App.Domains.enums;
В директории, в конец созданного класса модуля js/App/Domains/enums/src/enums.js, добавляем наши наборы экспортируемых констант.
import {Type} from 'main.core'; export class Enums { constructor(options = {name: 'Enums'}) { this.name = options.name; } setName(name) { if (Type.isString(name)) { this.name = name; } } getName() { return this.name; } } /** * Enum for common entity types. * @readonly * @enum {string} */ export const EntityTypeEnum = Object.freeze({ DEALS: Symbol("crm:deal") }); /** * Enum for actions. * @readonly * @enum {string} */ export const ActionsLinkEnum = Object.freeze({ DEAL_STORE: Symbol("<module>.api.ActionController.getStoreByDeal"), DEAL_MIN_DELIVERY_DATE_GET: Symbol("<module>.api.ActionController.getMinDeliveryDate"), DEAL_MIN_DELIVERY_DATE_UPDATE: Symbol("<module>.api.ActionController.updateMinDeliveryDate"), DEAL_ORDER_CANCEL: Symbol("<module>.api.ActionController.cancelOrderByDeal"), DYNAMIC_NOT_AGREE_CONTACTS_GET: Symbol("<module>.api.ActionController.getVisitNotAgreeContacts") });
Примечание! Если хотите переименовать класс и файл по аналогии, как это делается в PHP, то необходимо поправить пути в bundle.config.js и config.php модуля.
import {ActionsLinkEnum} from "../../../enums/src/Enums"; BX.ajax.runAction(ActionsLinkEnum.DEAL_MIN_DELIVERY_DATE_UPDATE.description, { data: { iDealId: 1 }, }).then(function (response) { }, function (response) { });
Теперь мы можем импортировать наши константы в другие модули и делать с ними запросы к бекенду через библиотеку битрикса.
Также, как мы бы использовали подобный подход на PHP.
enum ConstantsEnum: string { case CSE_TRACKING_LINK = 'https://www.cse.ru/mow/track?numbers='; } printf('Result:<pre>%s</pre><hr />', print_r(ConstantsEnum::CSE_TRACKING_LINK->value, true));
Для тех, кому нужно напомнить, как организовать контроллер на бекенде: пройдите курс либо просто используйте обычный AJAX, а вместо endpoints — адреса API.
2. По аналогии создадим модуль для работы с календарем. Он будет содержать методы, изменяющие битрикс-календарь. Так как это не часть бизнес-логики, а дополнительный функционал, отнесем его к инфраструктуре: local/js/App/Infrastructure/BXCalendar/src/BXCalendar.js
import {Type} from 'main.core'; /** * Доработки для стандартного календаря. */ export default class BXCalendar { constructor(options = {name: 'BXCalendar'}) { this.name = options.name; } setName(name) { if (Type.isString(name)) { this.name = name; } } getName() { return this.name; } /** * Метод деактивирует даты в календаре, до определенной даты. * @param $DOMInput Инпут, на который применяется ограничение * @param $sDate Дата, до которой отключить выбор. */ static disableDatesBefore($DOMInput, $sDate) { if(typeof $DOMInput !== "undefined") { const iMinDate = Date.parse($sDate); // В календаре добавим проверку выбора дат. let $el = BX.calendar({ node: $DOMInput, field: $DOMInput.name, form: '', bTime: true, bHideTime: false, callback: function (sPickedDate) { const currentDate = BX.date.format("c", new Date()); const pickedDate = BX.date.format("c", sPickedDate); const iCurrentDate = Date.parse(currentDate); const iPickedDate = Date.parse(pickedDate); if (iPickedDate < iCurrentDate) { BX.adjust($DOMInput, { props: { value: '' } }); BX.UI.Notification.Center.notify({ "content": "Нельзя выбрать прошедшую дату.", }) return false; } else if (iPickedDate < iMinDate) { BX.adjust($DOMInput, { props: { value: '' } }); BX.UI.Notification.Center.notify({ "content": "Невозможно выбрать дату до: " + BX.date.format("d.m.Y", new Date($sDate)), }) return false; } else { BX.adjust($DOMInput, { props: { value: BX.date.format("d.m.Y", new Date(pickedDate)) } }); } return true; } }); //найдем элементы отображающие дни let links = $el.DIV.querySelectorAll(".bx-calendar-cell"); let date = new Date($sDate); for (let i = 0; i < links.length; i++) { let atrDate = links[i].attributes['data-date'].value; let d = date.valueOf(); let g = links[i].innerHTML; //меняем класс у элемента отображающего день, который меньше по дате чем текущий день if (date - atrDate > 0) { $('[data-date="' + atrDate + '"]').addClass("bx-calendar-date-hidden disabled"); } } } else { } } }
Теперь у модуля есть статичный метод, в который мы передаем элемент, к которому привязан календарь, и дату, до которой необходимо отключить выбор чисел.
3. Добавляем модуль для работы со сделками: local/js/Domains/deals. Лично мне нравится переименовывать его в DealsService.js по аналогии с бекендом, но это не принципиально.
Также на основе бекенда контроллеры хочется вынести в отдельный неймспейс App.Domains.Deals.controller. Для этого мы установим подмодуль в папку controllers. Кроме того, понадобятся события, которые будет отслеживать модуль, реагирующие на открытие попапа, в котором отображаются сделки. Для них сделаем подмодуль events.
Родительский модуль при инициализации вызывает метод load(), который подключает слежение за событиями.
import {Type} from 'main.core'; import {DealsEvents} from '../events/src/DealsEvents' export class DealsService { constructor(options = {name: 'DealsService'}) { this.name = options.name; } setName(name) { if (Type.isString(name)) { this.name = name; } } getName() { return this.name; } load() { const $DealsEvents = new DealsEvents(); $DealsEvents.sliderLoadEvents(); $DealsEvents.sliderOpenEvents(); } } new DealsService().load();
Модуль событий отслеживает открытие и загрузку слайдера, так как в битриксе эти события разные и срабатывают в разных ситуациях, а нам нужно поведение для обоих вариантов.
import {Type} from 'main.core'; import {DealsController} from "../../controller/src/DealsController"; import {EntityTypeEnum} from "../../../enums/src/Enums"; /** * @module BX.App.Domains.Deals.Events */ export class DealsEvents { /** * @constructor * @param options */ constructor(options = {name: 'DealsEvents'}) { this.name = options.name; } setName(name) { if (Type.isString(name)) { this.name = name; } } getName() { return this.name; } /** * События по открытию слайдера. */ sliderOpenEvents() { // Установка даты минимальной доставки BX.addCustomEvent("SidePanel.Slider:onOpen", function (event) { if (event?.slider?.minimizeOptions?.entityType === EntityTypeEnum.DEALS.description) { const $controller = new DealsController() const $dealId = event.slider.minimizeOptions.entityId; $controller.updateMinDlvDate($dealId); } }) } sliderLoadEvents() { BX.addCustomEvent("SidePanel.Slider:onLoad", function (event) { if (event?.slider?.minimizeOptions?.entityType === EntityTypeEnum.DEALS.description) { /** * Установка даты доставки */ const $dealId = event.slider.minimizeOptions.entityId; setTimeout(async () => { const mutationObserver = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation?.removedNodes[0]?.dataset?.fieldTag === "UF_DEAL_DLV_DATETIME") { setTimeout(() => { const $Event = new DealsController() $Event.blockDates($dealId) }, 1000) } }); }); mutationObserver.observe(document, { childList: true, subtree: true, characterDataOldValue: true }); }, 1000); /** * Добавляем кнопки с остатками. */ DealsController.addAvailableCountButtons($dealId); } }); } }
Соответственно, мы обращаемся к контроллеру, который уже имеет набор методов для работы со сделками.
import {Type} from 'main.core'; import BXCalendar from '../../../../Infrastructure/BXCalendar/js/BXCalendar' import './DealsController.css' import {ActionsLinkEnum} from "../../../enums/src/Enums"; export class DealsController { constructor(options = {name: 'DealsController'}) { this.name = options.name; } setName(name) { if (Type.isString(name)) { this.name = name; } } getName() { return this.name; } /** * Получить минимальную дату доставки и установить её в сделке * @param $dealId Ид сделки. * @returns void * пишет в консоль SON {"success": bool, "message": string} */ updateMinDlvDate($dealId) { BX.ajax.runAction(ActionsLinkEnum.DEAL_MIN_DELIVERY_DATE_UPDATE.description, { data: { iDealId: $dealId }, }).then(function (response) { }, function (response) { }); } /** * Заблокировать выбор даты меньше минимальной даты доставки * @param dealId * @returns {void} */ blockDates(dealId) { let dateInput = $("input[name='UF_DEAL_DLV_DATETIME']").get()[0]; let divCalendar = $("div[class='bx-calendar-button-block']").get()[0]; divCalendar.style.visibility = 'hidden'; BX.ajax.runAction(ActionsLinkEnum.DEAL_MIN_DELIVERY_DATE_GET.description, { data: { iDealId: dealId }, }).then(function (response) { divCalendar.style.visibility = 'visible'; let obResponse = JSON.parse(response.data) if (obResponse.success) { const minDate = obResponse.message; BXCalendar.disableDatesBefore(dateInput, minDate) } else { } }, function (response) { }); } /** * Метод добавляет вывод информации об остатках на складах для сделок. * * @param dealId Ид сделки. */ static addAvailableCountButtons(dealId) { console.log(‘секретик))’); } }
Все, структура есть, модули созданы. Осталось подключить их на бекенде в нужном нам месте. Создадим класс для работы с расширениями:
<?php namespace App\Shared\Enums; enum JSDomainsEnums: string { case DEALS = 'App.Domains.deals'; case VISITS = 'App.Domains.visits'; case CONTACTS = 'App.Domains.contacts'; }
И подключим в шаблоне, либо прямо в init.php, если требуется на всех страницах.
Осталось собрать наш фронтенд. Для этого возвращаемся в папку local и запускаем сборку:
Ну вот и все! Завершился наш цикл о переходе от модульной архитектуры к сервисам в битрикс. Делитесь в комментариях, на какие темы вы хотели бы увидеть следующие тексты.
Кстати, пока вы ждете новых статей, подпишитесь на канал DD Planet! Там вы найдете не только мои тексты, но и замечательные материалы от коллег по цеху.
