tl:dr В посте делается вывод о том, что не следует сворачивать собственные компоненты. Этот пост о том, что привело к такому выводу.

Ад обратных вызовов или обрыв фреймворка

Экзистенциальный вопрос для новичка в JavaScript: изучать ли следующие большие фреймворки Front End или писать все самому. Jquery, React или более поздний SvelteKit, список фреймворков/компиляторов продолжает расти. Кривая обучения, чтобы вырваться из ада обратных вызовов JS, кажется, ведет к Cliff of Frameworks. В основе всего этого лежит сам язык JS, который продолжает меняться. Контекст установлен… давайте поднимемся

Скажем, вы делаете приборную панель, как я. И вы решили использовать какую-нибудь простую в использовании библиотеку построения диаграмм (D3!!!). Вам нужна простая гистограмма, которая обновляется на основе отфильтрованных данных.

Предположим, что есть много категорий для фильтрации. Один из них — Сити. Всего 4 города. Вот первый вопрос. Что вы будете делать для фильтрации данных по каждому городу?

  • Написать функцию
  • Пишите код для каждого города отдельно
  • Напишите компонент, который принимает все данные, значение города и возвращает диаграмму. Все готово.

Добавьте еще немного сложности. Что, если данные можно отфильтровать по 40 продуктам и их эффективности продаж?

Будете ли вы следовать принципу DRY и писать функции, а затем выполнять их модульное тестирование? Или стиснуть зубы и войти в учебный ад фреймворков? Такие фреймворки, как JQuery, справятся с этой задачей как со сливовым пирогом. Я решил пойти по большой дороге. В данных, которые у меня есть, есть 33 продукта. Некоторые показаны с левой стороны.

Как прошло? Мне удалось создать интерактивную панель инструментов. Вы можете найти его здесь, на странице портфолио M3nD3.

Теперь самое интересное. Часть кода выглядит так, как показано ниже… Вызов функции, которая считывает данные и прикрепляет события к каждой из ссылок на товары. Он точно называется eventListenerAdd (я знаю, что вы где-то слышали это имя). Прежде чем вы спросите, я не мог использовать цикл for, потому что события не привязывались к компонентам… Я не мог понять, почему. Так я взломал код!!! Всего 33 компонента, ярлыки VScode значительно упростили задачу…

Что нужно для самостоятельного создания

Объектно-ориентированное программирование и совершенно другой набор проблем, которые требуют более глубокого понимания Vanilla JS. Наряду с этим, много практики на уровне ниндзя. Чего у меня не было. Итак, я начал с добавления событий для получения данных, которые отфильтровываются на основе выбранного продукта. Я начал понимать, что нужно, чтобы «свернуть свои собственные» HTML-компоненты в Vanilla JS. Пример компонента HTML-ссылки, созданного функцией populateNav, показан ниже.

К созданному компоненту ссылки необходимо подключить прослушиватель событий. Если вы обратите внимание на цвета шрифта в коде, переменная maindataset затемнена в функции populateNav, что означает, что данные простаивают в этой функции, но по какой-то причине.

Хорошо… я вижу недостатки

EventListenerAdd добавляет событие клика. Событие click запускает функцию filterPerformance, которой нужен доступ к основному набору данных, который был бездействующим… ладно, хватит!!! Дашборд укомплектован такими замысловатыми функциями, со странными названиями, нестандартным стилем кодирования. Подумайте о модульном тестировании этих функций.

Потом я решил изучить Svelte

После блуждания по лабиринту вызовов функций и головной боли, связанной с событиями, фреймворк Svelte показался мне прогулкой в ​​парке. После прохождения уроков Svelte имеет смысл сосредоточиться только на том, что у меня хорошо получается, то есть на анализе и визуализации данных. А юнит-тестирование, маршрутизацию событий и диспетчеризацию компонентов пусть разбираются в этом. Намочить ноги с упражнением по написанию интерактивной приборной панели было действительно важно. Надо попробовать…