Кажется, я придумал новую архитектуру ивентов и мне она нравится

Даже не знаю с чего начать, это моя первая статья и пишу я ее по причине того что мне не с кем обсудить ее содержимое. Для контекста добавлю, что я самоучка без работы.

Stateful Event Multiplexing Bus

Именно такое название мне дал чат гпт, когда я спросил его о моем подходе, и как он мне сообщил, то что я придумал, это уникально и (цитирую) «Годнота!». Но названия у всей этой истории нету, ибо я не силен в нейминге, но в коде она называется «MEctx». Можете предложить название, мб приживется…

Так кто же такой этот «MEctx»

Если описывать моими мыслями (а я не знаю теорию js), то получается следующее:

• Общий хендлер событий — все ивенты обрабатываются в единственном обработчике

• Количество ивентов — я подписываюсь только по ОДНОМУ разу на каждый тип ивента, и все они ведут в общий хендлер

• строгое распространение ивентов — в общем хендлере хранится объект с ключом названия ивента, в котором лежат ивенты под необходимый режим работы

• Режимы — в обработчике хранится переменная хранящая ключ по которому будут вызываться ивенты в их хранилищах

Плюсы данной архитектуры:

• Единая точка входа ивентов — большой контроль + легкий дебаг

• Режимы позволяют вызывать только требуемые в данный момент ивенты

• Не вызывает ререндеры — в моей реализации общий хендлер хранится в глобальном скопе страницы (window), но можно спокойно перенести все в «useContext» и ничего не сломается

• Обновление коллбеков — если нужно заменить ивент или убрать или добавить, то нужно просто обратиться в общий хендлер и сделать необходимую операцию с объектом по ключу названия ивента, это не вызовет ререндер

• Минимальное взаимодействие с DOM деревом — так как в данной архитектуре мы 1 раз вешаем ивент и направляем его коллбеком в общий хендлер, то на первом рендере все махинации с деревом прекратятся

• Возможность создать мидлвар для ивентов

Код

Внесу еще немного контекста, код был написал 11 месяцев назад и в данной реализации он заточен под взаимодействие с картой на базе «react-map-gl», но все можно спокойно переписать под любую задачу. Я не обязан дать вам готовый код, я всего лишь хочу показать вам такой подход.

import { Map, MapLibreEvent, MapMouseEvent } from "maplibre-gl"; import { MapCollection } from "react-map-gl/dist/esm/components/use-map";  // это строки префиксы названий слоев инструментов import {   IMAGE_PREFIX_GHOST,   PIN_PREFIX,   POLYGON_PREFIX,   ROUTE_PREFIX, } from "~/components/_store/geometry"; // это строка текущего выбранного инструмента карты import { MAP_TOOL } from "~/components/_store/project"; // это строка префикс названия слоев датасетов import { DATASET_PREFIX } from "../../../_store/datasets";  //   ____         ___     ____________ //  /\   '.      /   \   /\   ________\ //  \ \    '.   /     \  \ \  \_______/ //   \ \  \. './   /\  \  \ \  \_________      ________  ___   __    __ //    \ \  \'.    /\ \  \  \ \   ________\     | _____| _| |_  \ \  / / //     \ \  \.'._/  \ \  \  \ \  \_______/     | |      |_ _|   \ \/ / //      \ \  \'./    \ \  \  \ \  \_________   | |       | |     }  { //       \ \__\       \ \__\  \ \___________\  | |____   | |_   / /\ \ //        \/__/        \/__/   \/___________/  |______|  |___| /_/  \_\ // // //  MECtx // //  created:                4.05.24 //  successfully applied:   10.05.24 // //  example: // //  useEffect(() => { //    let handleClick = (str) => { //      console.log(str) //      if (ME.tool) { //        ME.tool = null //      } else { //        ME.tool = "pin" //      } //    } // //    ME.click.stock = (e) => handleClick("stock event")  // call callback only when ME.tool == null //    ME.click.pin = (e) => handleClick("pin event")      // call callback only when ME.tool == "pin" // //    return () => { //      ME.click.stock = () => {} //      ME.click.pin = () => {} //    } //  }, []) // //  ME can store a lot of callbacks, but always call only one  // MAP_TOOL это строки названия инструментов type eventsList = MAP_TOOL | "stock" | "cs";  type handlersList =   | "contextmenu"   | "click"   | "mousedown"   | "mouseup"   | "mousemove"   | "mouseenter"   | "mouseleave"   | "mouseout"   | "mouseover"   | "drag"   | "dragend"   | "dragstart"   | "move"   | "moveend"   | "movestart"   | "zoom"   | "zoomend"   | "zoomstart";  export enum METoolModes {   None = 0,   Point = 1,   Fill = 2,   Line = 3,   Between = 4, }  export type MapEvents = {   /**    * *DO NOT REDECLARE AFTER `inited` PROPERTY: `true`*    *    * shortcut for `click` and `contextmenu` events in `clickChecker` function    * @param e map event    * @param type event from `eventsList`    * @param rc `false` - LeftClick, `true` - RightClick    */   handleClick: (e: MapMouseEvent, type: eventsList, rc: boolean) => void;    /**    * handles `MapMouseEvent<>`    * @param e map event    * @param handler event from `eventsList`    */   handleEvent: (e: MapMouseEvent, handler: handlersList) => void;   /**    * handles `MapMouseEvent<MouseEvent | TouchEvent | undefined>`    * @param e map event    * @param handler event from `eventsList`    */   handleMTEvent: (     e: MapLibreEvent<MouseEvent | TouchEvent | undefined>,     handler: handlersList,   ) => void;   /**    * handles `MapMouseEvent<MouseEvent | TouchEvent | WheelEvent | undefined>`    * @param e map event    * @param handler event from `eventsList`    */   handleMTWEvent: (     e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>,     handler: handlersList,   ) => void;    contextmenu: {     [key in eventsList]?: (e: MapMouseEvent) => void;   };    click: {     [key in eventsList]?: (e: MapMouseEvent) => void;   };    mousedown: {     [key in eventsList]?: (e: MapMouseEvent) => void;   };   mouseup: {     [key in eventsList]?: (e: MapMouseEvent) => void;   };   mousemove: {     [key in eventsList]?: (e: MapMouseEvent) => void;   };   mouseenter: {     [key in eventsList]?: (e: MapMouseEvent) => void;   };   mouseleave: {     [key in eventsList]?: (e: MapMouseEvent) => void;   };   mouseout: {     [key in eventsList]?: (e: MapMouseEvent) => void;   };   mouseover: {     [key in eventsList]?: (e: MapMouseEvent) => void;   };    drag: {     [key in eventsList]?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;   };   dragend: {     [key in eventsList]?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;   };   dragstart: {     [key in eventsList]?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;   };    move: {     [key in eventsList]?: (       e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>,     ) => void;   };   moveend: {     [key in eventsList]?: (       e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>,     ) => void;   };   movestart: {     [key in eventsList]?: (       e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>,     ) => void;   };    zoom: {     [key in eventsList]?: (       e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>,     ) => void;   };   zoomend: {     [key in eventsList]?: (       e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>,     ) => void;   };   zoomstart: {     [key in eventsList]?: (       e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>,     ) => void;   };    /**    * property for selecting events    *    * if tool equals `null` => call `Stock` callbacks    *    * if tool equals `some_tool` => call `some_tool` callbacks    */   tool: MAP_TOOL | null;    /**    * RightClick - `true` value allows instrument to show Bbox    */   rc: boolean;    /**    *    */   toolMode: METoolModes;    map: {     current: Map & {       /**        * get real map object        */       getMap: () => Map;     };   };   init: (Map: MapCollection<Map>) => void;   inited: boolean; };  let runEvent = (e: any, handler: handlersList, ctx: MapEvents) => {   if (ctx.tool) {     if (ctx[handler][ctx.tool]) {       ctx[handler][ctx.tool]!(e);     }   } else {     if (!ctx.toolMode && ctx[handler]["stock"]) {       ctx[handler]["stock"]!(e);     }   } };  // пример мидлвара // функция для стоковых ивентов click и contextmenu let clickChecker = function (e: MapMouseEvent, rc: boolean, ctx: MapEvents) {   // получаем слои под кликом   let featuresUnderClick = ctx.map.current.queryRenderedFeatures(e.point);    if (featuresUnderClick.length) {     let layer = featuresUnderClick[0]?.layer;      let id = layer?.id.split(":")[0];      switch (id) {       case DATASET_PREFIX:         ctx.handleClick(e, "dataset_info", rc);         break;       case POLYGON_PREFIX:         ctx.handleClick(e, "polygon", rc);         break;       case ROUTE_PREFIX:         ctx.handleClick(e, "route", rc);         break;       case PIN_PREFIX:         ctx.handleClick(e, "pin", rc);         break;       case IMAGE_PREFIX_GHOST:         ctx.handleClick(e, "image", rc);         break;       default: {         // ctx.setTool(null);       }     }   } };  export const MEInitialGlobalObject: MapEvents = {   handleClick: function (e, type, rc) {     if (rc) {       if (this.contextmenu[type]) {         this.tool = type;         this.contextmenu[type](e);       }     } else {       if (this.click[type]) {         this.tool = type;         this.click[type](e);       }     }   },    handleEvent: function (e, handler) {     runEvent(e, handler, this);   },   handleMTEvent: function (e, handler) {     runEvent(e, handler, this);   },   handleMTWEvent: function (e, handler) {     runEvent(e, handler, this);   },    contextmenu: {},   click: {},    mousedown: {},   mouseup: {},   mousemove: {},   mouseenter: {},   mouseleave: {},   mouseout: {},   mouseover: {},    drag: {},   dragend: {},   dragstart: {},    move: {},   moveend: {},   movestart: {},    zoom: {},   zoomend: {},   zoomstart: {},    tool: null,   map: {     // @ts-ignore     current: null,   },   init: function (Map) {     this.map.current = Map.current;      if (!this.inited) {       this.inited = true;        this.click.stock = (e: MapMouseEvent) => {         clickChecker(e, false, this);       };       this.contextmenu.stock = (e: MapMouseEvent) => {         clickChecker(e, true, this);       };     }   },   inited: false, }; 

Регистрация ивентов на карте выглядит так:

onClick={(e) => ME.handleEvent(e, "click")} onContextMenu={(e) => ME.handleEvent(e, "contextmenu")} onMouseDown={(e) => ME.handleEvent(e, "mousedown")} onMouseUp={(e) => ME.handleEvent(e, "mouseup")} onMouseMove={(e) => {   ME.handleEvent(e, "mousemove");   if (ME.inited && !ME.toolMode && ME.mousemove.cs) {     ME.mousemove.cs(e);   } }} onMouseEnter={(e) => ME.handleEvent(e, "mouseenter")} onMouseLeave={(e) => ME.handleEvent(e, "mouseleave")} onMouseOut={(e) => ME.handleEvent(e, "mouseout")} onMouseOver={(e) => ME.handleEvent(e, "mouseover")} onDrag={(e) => ME.handleMTEvent(e, "drag")} onDragEnd={(e) => ME.handleMTEvent(e, "dragend")} onDragStart={(e) => ME.handleMTEvent(e, "dragstart")} onMove={(e) => ME.handleMTWEvent(e, "move")} onMoveEnd={(e) => ME.handleMTWEvent(e, "moveend")} onMoveStart={(e) => ME.handleMTWEvent(e, "movestart")} onZoom={(e) => {   ME.handleMTWEvent(e, "zoom");   setPopupMaxWidth(getMaxWidthFromZoom()); }} onZoomEnd={(e) => ME.handleMTWEvent(e, "zoomend")} onZoomStart={(e) => ME.handleMTWEvent(e, "zoomstart")}

Регистрация происходит 1 раз и больше мы не мучаем бедную карту.

Базовое использование выглядит так:

useEffect(() => {   // проверяем необходимость обновить коллбек   if (tool == "pin" && drawmode) {          // создаем простую функцию как и всегда     let handleClick = (e: MapMouseEvent) => {       //       // логика       //     };      // вешаем ивент     ME.click.pin = (e) => handleClick(e);      return () => {       // удаляем по необходимости       ME.click.pin = (e) => () => {};     };   } }, [...]);

То длинное полотно кода конечно по хорошему было бы разделить как в других статьях, но я приверженец простого копи-паст.

В общем, описываю жизненный цикл ивента в этой структуре:

• На первом рендере — создаем обработчик, инициализируем «ME.init(Map)», и вешаем начальные ивенты там где нам необходимо, в моем случае на карте.

• Вызов ивента — коллбеком вызываем общий хендлер и передаем оригинальный объект ивента

• Анализ ивента — общий обработчик смотрит текущий режим работы, если ивент не поддерживается, игнорирует его, если ивент можно вызвать, но в текущем режиме нет такого слушателя, вызывается «stock» коллбек (это нечто вроде глобального коллбека, который вызывается только когда больше вызывать нечего)

• Вызов мидлвара по необходимости

• Вызов необходимого ивента

Получается так что мы можем создать сколько угодно каких угодно ивентов, и это не будет вызывать так же много нагрузки на браузер как простое вешание ивентов на все подряд так как ивенты в этой архитектуре — это просто функции в объекте.

Так же можно немного отредактировать код и сделать «режим» массивом строк, что позволит вызывать сразу несколько ивентов, хотя изначально браузер вызвал только один.

Наверное на этом все, надеюсь, я не придумал велосипед…