Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2020, 02:30
Аватар для drwhite
Интересующийся
Отправить личное сообщение для drwhite Посмотреть профиль Найти все сообщения от drwhite
 
Регистрация: 16.11.2015
Сообщений: 14

Архитектура приложения и обработчики событий
Приветствую, камрады, посоветуйте что почитать/посмотреть/изучать.

Задача известная — написать приложение. По возможности, без лишнего кода. Приложение тоже известное — получил данные из базы, отобразил, [изменил, сохранил, обновил], ошибки обработал.

Есть 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 пока неясно.


В общем, посоветуйте)
Ответить с цитированием
  #2 (permalink)  
Старый 16.02.2020, 14:08
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,520

Использовать какой-нить няшный фреймворк и забыть о головной боли.)
Vue, React, Angular.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2020, 15:23
Аватар для drwhite
Интересующийся
Отправить личное сообщение для drwhite Посмотреть профиль Найти все сообщения от drwhite
 
Регистрация: 16.11.2015
Сообщений: 14

Благодарю, я догадывался)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Где лучше вешать обработчики событий? BETEPAH Events/DOM/Window 5 26.12.2013 21:40
Можно ли вынести обработчики событий в отделные функции Evgeny_Dedov jQuery 1 06.10.2013 17:53
Архитектура построения приложения. virus-07 Angular.js 2 05.09.2013 10:17
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03
Архитектура расширяемого приложения. DeveloperRu Библиотеки/Тулкиты/Фреймворки 2 16.03.2010 23:52