Как реализовать компонентную архитектуру UI-элементов на JS?
Есть форма с полями, которые состоят из простых UI-элементов (input text, input number, slider, radio, button, и т.д.). Для каждого такого элемента создаётся экземпляр соответсвующего класса.
Как правильно реализовать архитектуру приложения, чтобы можно было создавать поля, комбинируя в них несколько UI-элементов?
Например, поле Color Picker включает в себя Input Text, Slider, Radio и Button.
Поле NumberSlider включает в себя Input Number и Slider.
Поле FontChooser включает в себя Input Numbers, Selects, Buttons.
Хотелось бы ещё уметь создавать более сложные элементы, например элемент, который включает в себя Color Picker и Number Slider, которые в свою очередь были реализованы на базе более простых элементов и т.д.
Мы пытаемся сделать обычную форму настроек для веб-приложения, никакой React и Vue нам не нужен.
Решение было простым - не нужно было "наследовать" составные элементы формы от более простых. Нужно было просто в составном элементе (таком как Number Slider, например) повесить обработчики на пользовательские события дочерних элементов - одно событие на Number и одно событие на Slider, предварительно создав эти события и их отправку в классах Number и Slider, в нашем случае это события изменения значения, т.е. меняем значение в number - срабатывает обработчик и двигает ползунок слайдера, и наоборот, двигаем ползунок слайдера - срабатывает обработчик события и выставляется соответствующее значение ползунку в input number'а. Таким образом, number и slider - это два независимых класса с соответствующими экземплярами классов (созданных через new Number и new Slider), а Number Slider - это третий класс, который просто работает с экземплярами классов Number и Slider соответственно, через пользовательские события.
