Обработка событий в JavaScript (1)

#code #JavaScript #DOM

Примеры чистых и нечистых функций

#code #JavaScript

При клике на любой элемент списка li, сработает обработчик, привязанный к родительскому элементу ul, и выведет содержимое выбранного элемента списка.

#JavaScript #code #делегирование

Если у нас будет 1000 элементов списка, то мы создадим 1000 обработчиков, что может стать причиной замедления работы страницы. При использовании делегирования, независимо от количества элементов, у нас будет только один обработчик на родительский элемент. Это делает код более производительным и легко масштабируемым.

#code #JavaScript #делегирование

Поднятие переменных в JavaScript

#JavaScript #code #hoisting

#JavaScript #code

#JavaScript #code #this

👆При клике на <div>, который оборачивает всю карточку пользователя, будет вызван обработчик goToProfile, что приведёт к переходу на страницу профиля пользователя.

👆При клике на кнопку "Удалить", сначала сработает обработчик handleDelete, который вызовет функцию onDelete и остановит всплытие события благодаря event.stopPropagation(). Это предотвратит вызов обработчика goToProfile и, следовательно, переход на страницу профиля пользователя не произойдёт.

#JavaScript #code

Разница между «атрибутом» (attribute) и «свойством« (property)

#JavaScript #code #HTML

В этом примере, мы сначала "фиксируем" URL, а затем метод, создавая функции getUser и createUser, которые уже "знают" эти параметры и принимают только тело запроса в качестве аргумента. Это упрощает повторное использование кода и делает наши функции более чистыми и читаемыми.

#каррирование #code #JavaScript

1️⃣ Первый пример

В коде создается объект images, где каждому свойству (ключу) присваивается функция, возвращающая JSX элемент (компонент). Это позволяет нам легко и быстро ссылаться на различные компоненты-изображения через этот объект, что может упростить управление вашими изображениями в вашем приложении.

#code #JavaScript #объектные_литералы

2️⃣ Второй пример

Мы используем объектный литерал renderByPage, где каждому ключу соответствует функция, возвращающая соответствующий компонент JSX. Затем, вы динамически выбираете и возвращаете нужный компонент, обращаясь к свойству объекта с использованием переменной page.

Во второй части, мы достигаем того же результата, используя серию if-else условий, чтобы проверить значение переменной page и возвратить соответствующий компонент.

И хотя обе части кода достигают одного и того же результата, первый способ (через объектный литерал) является более компактным и масштабируемым, особенно когда у вас есть много возможных страниц. Это также делает код более чистым и легким для чтения и поддержки, поскольку вы можете легко добавить или удалить страницы, просто изменяя объект renderByPage, не трогая логику выбора страницы.

#code #JavaScript #объектные_литералы

3️⃣ Третий пример

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

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

#code #JavaScript #объектные_литералы

Новички часто делают так в React, забывают про иммутабельность. Может вызвать непредвиденные ошибки или поведение приложения.

Раньше делали так (spread оператор):
[...people].sort()

Теперь же можно делать так:
people.toSorted()

#code #JavaScript #Array #methods