Если у нас будет 1000 элементов списка, то мы создадим 1000 обработчиков, что может стать причиной замедления работы страницы. При использовании делегирования, независимо от количества элементов, у нас будет только один обработчик на родительский элемент. Это делает код более производительным и легко масштабируемым.
#code #JavaScript #делегирование
#code #JavaScript #делегирование
👍5
👆При клике на <div>, который оборачивает всю карточку пользователя, будет вызван обработчик goToProfile, что приведёт к переходу на страницу профиля пользователя.
👆При клике на кнопку "Удалить", сначала сработает обработчик handleDelete, который вызовет функцию onDelete и остановит всплытие события благодаря event.stopPropagation(). Это предотвратит вызов обработчика goToProfile и, следовательно, переход на страницу профиля пользователя не произойдёт.
#JavaScript #code
👆При клике на кнопку "Удалить", сначала сработает обработчик handleDelete, который вызовет функцию onDelete и остановит всплытие события благодаря event.stopPropagation(). Это предотвратит вызов обработчика goToProfile и, следовательно, переход на страницу профиля пользователя не произойдёт.
#JavaScript #code
👍3🔥1
В этом примере, мы сначала "фиксируем" URL, а затем метод, создавая функции getUser и createUser, которые уже "знают" эти параметры и принимают только тело запроса в качестве аргумента. Это упрощает повторное использование кода и делает наши функции более чистыми и читаемыми.
#каррирование #code #JavaScript
#каррирование #code #JavaScript
1️⃣ Первый пример
В коде создается объект images, где каждому свойству (ключу) присваивается функция, возвращающая JSX элемент (компонент). Это позволяет нам легко и быстро ссылаться на различные компоненты-изображения через этот объект, что может упростить управление вашими изображениями в вашем приложении.
#code #JavaScript #объектные_литералы
В коде создается объект images, где каждому свойству (ключу) присваивается функция, возвращающая JSX элемент (компонент). Это позволяет нам легко и быстро ссылаться на различные компоненты-изображения через этот объект, что может упростить управление вашими изображениями в вашем приложении.
#code #JavaScript #объектные_литералы
🫡1
2️⃣ Второй пример
Мы используем объектный литерал renderByPage, где каждому ключу соответствует функция, возвращающая соответствующий компонент JSX. Затем, вы динамически выбираете и возвращаете нужный компонент, обращаясь к свойству объекта с использованием переменной page.
Во второй части, мы достигаем того же результата, используя серию if-else условий, чтобы проверить значение переменной page и возвратить соответствующий компонент.
И хотя обе части кода достигают одного и того же результата, первый способ (через объектный литерал) является более компактным и масштабируемым, особенно когда у вас есть много возможных страниц. Это также делает код более чистым и легким для чтения и поддержки, поскольку вы можете легко добавить или удалить страницы, просто изменяя объект renderByPage, не трогая логику выбора страницы.
#code #JavaScript #объектные_литералы
Мы используем объектный литерал renderByPage, где каждому ключу соответствует функция, возвращающая соответствующий компонент JSX. Затем, вы динамически выбираете и возвращаете нужный компонент, обращаясь к свойству объекта с использованием переменной page.
Во второй части, мы достигаем того же результата, используя серию if-else условий, чтобы проверить значение переменной page и возвратить соответствующий компонент.
И хотя обе части кода достигают одного и того же результата, первый способ (через объектный литерал) является более компактным и масштабируемым, особенно когда у вас есть много возможных страниц. Это также делает код более чистым и легким для чтения и поддержки, поскольку вы можете легко добавить или удалить страницы, просто изменяя объект renderByPage, не трогая логику выбора страницы.
#code #JavaScript #объектные_литералы
👍2
3️⃣ Третий пример
В версии с объектным литералом, мы создаем объект actions, в котором каждой стране соответствует функция, выводящая в консоль определенное действие, ассоциированное с этой страной. Затем, в функции doAction, мы вызываем соответствующую функцию, используя динамический доступ к свойствам объекта. Это делает код более чистым и легко масштабируемым.
С другой стороны, версия с if-else добивается той же цели, но делает это через серию проверок условий, что может сделать код более громоздким и менее удобным для масштабирования, особенно при добавлении большого количества новых условий или стран.
#code #JavaScript #объектные_литералы
В версии с объектным литералом, мы создаем объект actions, в котором каждой стране соответствует функция, выводящая в консоль определенное действие, ассоциированное с этой страной. Затем, в функции doAction, мы вызываем соответствующую функцию, используя динамический доступ к свойствам объекта. Это делает код более чистым и легко масштабируемым.
С другой стороны, версия с if-else добивается той же цели, но делает это через серию проверок условий, что может сделать код более громоздким и менее удобным для масштабирования, особенно при добавлении большого количества новых условий или стран.
#code #JavaScript #объектные_литералы
👌1
Новички часто делают так в React, забывают про иммутабельность. Может вызвать непредвиденные ошибки или поведение приложения.
Раньше делали так (spread оператор):
Теперь же можно делать так:
#code #JavaScript #Array #methods
Раньше делали так (spread оператор):
[...people].sort()Теперь же можно делать так:
people.toSorted()#code #JavaScript #Array #methods
👍7
Функция для глубокого копирования объектов
1️⃣ Проверка наличия и типа объекта
Проверяем, существует ли
Если
Здесь мы гарантируем, что функция будет применена только к объектам или массивам.
2️⃣ Обработка массивов
Устанавливаем, является ли
Создаем новый пустой массив
Этот этап обеспечивает глубокое копирование каждого элемента массива, включая вложенные объекты и массивы.
3️⃣ Обработка объектов
Если
Создаем пустой объект
Так мы гарантируем, что все собственные свойства объекта, включая вложенные объекты, будут глубоко скопированы.
#JavaScript #code #Objects #deepCopy
1️⃣ Проверка наличия и типа объекта
Проверяем, существует ли
obj и является ли он объектом.Если
obj равен null или его тип данных не 'object', функция возвращает obj, не производя дополнительных действий.Здесь мы гарантируем, что функция будет применена только к объектам или массивам.
2️⃣ Обработка массивов
Устанавливаем, является ли
obj массивом.Создаем новый пустой массив
arrCopy и проходим по всем элементам obj. Примитивные значения копируются напрямую, а для объектов вызывается функция deepClone рекурсивно.Этот этап обеспечивает глубокое копирование каждого элемента массива, включая вложенные объекты и массивы.
3️⃣ Обработка объектов
Если
obj не массив, но объект, начинаем процесс копирования объекта.Создаем пустой объект
objCopy. Для каждого свойства obj, проверяем, является ли оно собственным с помощью метода hasOwnProperty. Собственные свойства копируются. Если значение свойства - объект, функция deepClone вызывается рекурсивно.Так мы гарантируем, что все собственные свойства объекта, включая вложенные объекты, будут глубоко скопированы.
#JavaScript #code #Objects #deepCopy
👍4
В первом примере используется обычная функция, и this внутри setInterval не ссылается на экземпляр Person. По умолчанию (в строгом режиме) this будет undefined, а в нестрогом — глобальный объект. Поскольку undefined не имеет свойства age, попытка инкрементировать его приведет к NaN
Во втором примере используется стрелочная функция, которая не имеет собственного this. Она "позаимствует" его из окружающего контекста, в данном случае из функции-конструктора Person. Это означает, что this.age будет корректно инкрементироваться каждую секунду, и в консоль будет выводиться возраст Person, который увеличивается на 1 каждую секунду.
#code #JavaScript #functions #this
Во втором примере используется стрелочная функция, которая не имеет собственного this. Она "позаимствует" его из окружающего контекста, в данном случае из функции-конструктора Person. Это означает, что this.age будет корректно инкрементироваться каждую секунду, и в консоль будет выводиться возраст Person, который увеличивается на 1 каждую секунду.
#code #JavaScript #functions #this
👍3😢1
Создание и обработка промиса
Промис создаётся с использованием конструктора
Для обработки промиса используются методы then, catch и finally.
✅ then принимает функцию, которая будет вызвана, если промис выполнится успешно.
❌ catch принимает функцию, которая будет вызвана, если промис будет отклонён.
🏁 finally принимает функцию, которая будет вызвана в любом случае, независимо от того, был ли промис выполнен или отклонён.
#обучающийПост #JavaScript #promise #code
Промис создаётся с использованием конструктора
Promise, который принимает один аргумент — функцию с двумя параметрами: resolve и reject. Функция resolve вызывается, когда асинхронная операция завершается успешно, а функция reject — когда происходит ошибка.Для обработки промиса используются методы then, catch и finally.
✅ then принимает функцию, которая будет вызвана, если промис выполнится успешно.
❌ catch принимает функцию, которая будет вызвана, если промис будет отклонён.
🏁 finally принимает функцию, которая будет вызвана в любом случае, независимо от того, был ли промис выполнен или отклонён.
#обучающийПост #JavaScript #promise #code
🔥6✍2👍2
Задержка в коде
Иногда в процессе программирования возникает необходимость внести паузу в выполнение кода. Часто для этого используется
Решением этой проблемы может стать создание универсальной функции sleep, которая возвращает промис. Эта функция позволяет легко реализовывать задержку в любом месте кода, делая его более чистым и организованным.
Представим, что у нас есть кнопка, при нажатии на которую текст копируется в буфер обмена. Чтобы явно показать пользователю, что действие выполнено, мы временно меняем текст на кнопке на "Успешно!". Это важно, так как без визуального подтверждения пользователь может не понять, что текст успешно скопирован. Однако, мы также хотим дать понять, что можно совершить действие снова. Для этого через несколько секунд мы возвращаем текст кнопки к исходному состоянию "Копировать".
#react #JavaScript #sleep #setTimeout #code
Иногда в процессе программирования возникает необходимость внести паузу в выполнение кода. Часто для этого используется
setTimeout, но при множественном использовании это может стать довольно громоздким и менее удобным. К тому же, оборачивание логики в setTimeout не всегда идеально сочетается с асинхронными операциями и обещаниями (promises).Решением этой проблемы может стать создание универсальной функции sleep, которая возвращает промис. Эта функция позволяет легко реализовывать задержку в любом месте кода, делая его более чистым и организованным.
Представим, что у нас есть кнопка, при нажатии на которую текст копируется в буфер обмена. Чтобы явно показать пользователю, что действие выполнено, мы временно меняем текст на кнопке на "Успешно!". Это важно, так как без визуального подтверждения пользователь может не понять, что текст успешно скопирован. Однако, мы также хотим дать понять, что можно совершить действие снова. Для этого через несколько секунд мы возвращаем текст кнопки к исходному состоянию "Копировать".
#react #JavaScript #sleep #setTimeout #code
👍10✍2👨💻1
Хук useToggle
Хук useToggle в React — это удобный инструмент для управления состояниями, такими как открытие/закрытие, включение/выключение. Это простой способ переключения между двумя состояниями (обычно true и false) в компонентах. Особенно полезен для интерактивных элементов UI, таких как кнопки переключения, скрытие и отображение элементов и т.д. useToggle повышает читаемость кода и упрощает управление состоянием.
#react #code #useToggle #hook
Хук useToggle в React — это удобный инструмент для управления состояниями, такими как открытие/закрытие, включение/выключение. Это простой способ переключения между двумя состояниями (обычно true и false) в компонентах. Особенно полезен для интерактивных элементов UI, таких как кнопки переключения, скрытие и отображение элементов и т.д. useToggle повышает читаемость кода и упрощает управление состоянием.
#react #code #useToggle #hook
👏8👍4