Как грамотно реализовать архитектуру событийного пользовательского интерфейса на чистом JS?

Question

[nik8n]

На примере подобного интерфейса хочу объяснить свой вопрос
(на самом деле интерфейс может быт совершенно любым, важен подход к реализации)


Например, есть сайт с картой, куда из Базы данных загружаются точки и далее пользователь с ними взаимодействует
Есть панели 1 и 2 - информация по точкам
Есть точки на карте с привязанными к ним popup-ами

Реализовать надо так, чтобы при изменение пользователем информации в одной панели , она автоматически обновлялась в других панелях , и отправлялась в Базу данных

Например в панели 1 - мы поменяли параметры и они тут же изменились в панели 2 и на карте и обновленные данные отправились в Базу Данных
Например на карте передвинули точку - тут же координаты поменялись в панелях 1 и 2 и 3 (и обновленные данные отправились в Базу Данных)
и т.п

Сейчас я все делаю тупо: есть объект точек со всеми параметрами и при изменении информации в какой-либо панели данные в этом объекте меняются и далее
вызываются функции формирования контента в других панелях на основе данных этого объекта
Я не думаю что это правильный подход - код получается запутанным и сложным

Как грамотно реализовать подобную архитектуру на чистом JS? Может быть генерировать свои события или еще как-нибудь?
Не совсем понимаю как искать даже подобные кейсы в сети, где почитать, посмотреть какие-то подобные решения

Comments

[StiflerProger]

Можно использовать геттеры и сеттеры, и на них уже наложить метод, который будет обновлять данные в html.
Некий способ реактивности будет

Answer 1

[iljaGolubev]

Грамотно - взять готовое решение.
Но можно и такой велосипед, например.

const point = { x: 0, y: 0 };

function alertPointSubscriber(point){
	alert(point.x * point.y);
}
const subscribers = [];


const handlePointChange = {
  set(obj, prop, value) {
    subscribers.forEach(susb => susb(obj));
    if ((prop === 'x') || (prop === 'y') ) {
      console.log('set ' + prop + '=' + value);
    } else {
      console.log('unhandled');
    }
    return Reflect.set(...arguments);
  }
};

const points =[];
points.push(new Proxy(point, handlePointChange));

points[0].x=10;
points[0].y=20;
subscribers.push(alertPointSubscriber);
points[0].z=3;

console.log(point);

Comments

[nik8n]

спасибо,!
я не был знаком с прокси в JS , но как понимаю это продвинутый вариант геттеров и сеттеров ( вирутальные свойства объекта). буду разбираться