• Могу я задать вопрос по коду, как мегаджун JS?

    @collapsoid
    1. Лишние манипуляции над домом.
    appendChild нужно делать только после того, как элемент и все его дети будут настроены. Т.е. если в функции showMessage сначала настроить messageWrapper (задать класс; добавить в него message) и только потом сделать document.body.appendChild, то можно выиграть в производительности за счет меньшего количества обращений к DOM-дереву.

    Эти строки вызывают вопрос, т.к. не очень понятно, зачем нужно добавлять элементу класс и через 100 миллисекунд его убирать. Выглядит, как что-то ненужное
    messageWrapper.classList.add("messageWrapperUnvis");
    setTimeout(() => {
      messageWrapper.classList.remove("messageWrapperUnvis");
    }, 100);


    2. Ивент листенеры нужно удалять за собой.
    Нужно убирать отратобавшие event listeners, т.к. их накопление приводит к утечке памяти.
    Также желательно пересмотреть подход к определению слушателей вообще, т.к. в функции modalWindow на каждое событие contextmenu устанавливается другое событие contextmenu, назначение которого только лишь в том, чтобы удалить предыдущий currentDiv. Имеет смысл вынести currentDiv в функцию modalWindow, а внутри слушателя делать необходимую проверку.

    3. Нерациональный ранний выход из функции.
    В функции modalWindow нет смысла создавать элементы, кроме wrapper, т.к. при срабатывании условия e.target.matches("#input") произойдет return и ранее созданные элементы просто окажутся бесполезными. Т.е. if нужно разместить непосредственно после wrapper.

    4. Бесполезные элементы.
    Функцию addNewItem я бы вообще переделал, т.к. внутри нее на каждый keypress производится куча действий над элементами, которые в итоге так и не попадут на страницу: nListItem и remove будут добавлены только при e.key === "Enter" && input.value !== "" (кстати, нет смысла плодить вложенные if'ы, когда можно использовать булевы выражения).

    В общем, уделяй внимание каждой отдельной сущности, которую ты создаешь; помни о ее назначении и о том, как она будет взаимодействовать с другими сущностями на странице. Это поможет избежать ненужных операций и в конечном итоге сделает код чище.

    Когда код небольшой части приложения становится осмысленным для создающего, появляется мотивация упорядочивать его в глобальных масштабах, т.е. решать архитектурные вопросы, что в совокупности с шишками, которые принесет этот процесс, в конечном итоге, сделает тебя более скилованным разработчиком.
    Ответ написан
    Комментировать