|
Архитектура приложения и обработчики событий
Приветствую, камрады, посоветуйте что почитать/посмотреть/изучать.
Задача известная — написать приложение. По возможности, без лишнего кода. Приложение тоже известное — получил данные из базы, отобразил, [изменил, сохранил, обновил], ошибки обработал.
Есть HTML статический, есть генерируемый; есть HTML c данными, есть с интерактивными элементами интерфейса, которые отвечают за определенное поведение.
Есть Javascript, который должен:
• получать/передавать данные;
• генерировать/изменять HTML c данными и с интерфейсом управления ими как посредством этого интерфейса, так и по внутренним событиям;
• прочая инфраструктура.
Есть браузер с DOMом, переменные глобальные, переменные локальные, события всплывающие, события не всплывающие, атрибуты id и data-*, куча однотипных элементов управления, куча разнотипных. Можно использовать функцию, можно метод объекта без создания его экземпляра, можно создать класс. Можно добавлять слушатель на document, можно на блок элементов, можно выполнять обработчик так, а можно по-другому.
Понятно, что есть фреймворки, библиотеки, шаблоны проектирования и прочие, но все это тоже как-то с пониманием надо применять.
Вот для примера относительно простая задача.
При загрузке страницы:
• Отобразить Инпут со значением по умолчанию (номер аккаунта)
• Получить данные по номеру аккаунта из Инпута (fetch).
• Отобразить полученные данные в виде интерактивного дерева каталогов и файлов с заданным уровнем раскрытости (collapse/expand, при удержании Ctrl/Shift/Alt collapse/expand все или выбранный подуровень).
• Отобразить Инпут с уровнем раскрытости выведенного дерева.
• Отобразить кнопки Expand depth [+] [-] при нажатии на которые дерево перевыводится с увеличением или уменьшением уровня раскрытости, а значение инпута обновляется.
• Отобразить кнопки Expand depth от [0] до [N], при нажатии на которые дерево перевыводится с соответствующим уровнем раскрытости от 0 до N, а значение инпута обновляется.
• При нажатии Enter в фокусе инпута уровня раскрытости дерева, если значение изменилось, перевывести дерево, а также пометить кнопку Expand depth [0-N] неактивной если уровень совпадает.
• При нажатии стрелок вверх/вниз в фокусе инпута уровня раскрытости, увеличить/уменьшить его значение, перевывести дерево, пометить кнопку Expand depth [0-N] неактивной если уровень совпадает.
• При наличии значения в инпуте номера аккаунта, если значение прошло валидацию, отобразить рядом кнопку Получить данные.
• По нажатии кнопки Получить данные, если значение инпута номера аккаунта изменилось, скрыть кнопку Получить данные, отобразить анимацию загрузки данных, получить данные, убрать анимацию, вернуть кнопку, отобразить данные…
• При нажатии Enter в фокусе инпута номера аккаунта, если его значение изменилось, скрыть кнопку Получить данные, отобразить анимацию загрузки данных, получить данные, убрать анимацию, вернуть кнопку, отобразить данные…
• При нажатии стрелок вверх/вниз в фокусе инпута номера аккаунта, увеличить/уменьшить номер аккаунта.
Концептуально вроде бы ничего сложного, но события и элементы зависят друг от друга, несколько элементов/событий зависят от какого-то события другого элемента и обработчикам нужны разные параметры для каждого обрабатываемого.
В общем, как грамотно все это скомпоновать, чтобы не получить адовую мешанину из HTML+JS пока неясно.
В общем, посоветуйте)
|
