Каждый клик в браузере проходит три фазы: захват, цель и всплытие. На любом этапе можно вмешаться, остановить поток или использовать делегирование.
Сегодня в посте:
• Разберём фазы события: захват и всплытие;
• Поймём, как работает делегирование;
• Создадим и запустим своё событие вручную.
С помощью
CustomEvent можно создавать собственные события — заставлять компоненты общаться без прямых вызовов и фреймворков. Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤7🔥7
Хеширование строки на JavaScript!
Создадим простую функцию, которая превращает строку в уникальный числовой хеш. Такой подход используется для кеширования, проверки целостности данных и генерации идентификаторов.
Сначала определим основу функции и переменные:
Затем завершим вычисление и приведём результат к беззнаковому 32-битному числу:
Передаём строку и получаем хеш:
Результат:
🔥 Теперь вы можете создавать собственные короткие хеши — подходит для идентификаторов, сравнения данных и простых токенов.
📣 JS Ready | #практика
Создадим простую функцию, которая превращает строку в уникальный числовой хеш. Такой подход используется для кеширования, проверки целостности данных и генерации идентификаторов.
Сначала определим основу функции и переменные:
function hash(str) {
let h = 0;
for (let i = 0; i < str.length; i++) {
h = (h << 5) - h + str.charCodeAt(i);Затем завершим вычисление и приведём результат к беззнаковому 32-битному числу:
h |= 0; // Приведение к 32-битному целому
}
return (h >>> 0).toString(16); // Беззнаковое представление
}
Передаём строку и получаем хеш:
console.log(hash("Hello, world!"));Результат:
8ff0cbf5
🔥 Теперь вы можете создавать собственные короткие хеши — подходит для идентификаторов, сравнения данных и простых токенов.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍8❤7
В этой шпаргалке собраны основные механизмы планирования кода и микрозадач: от простых задержек и интервалов до точного профилирования и микротасков. Эти приёмы применяются для оптимизации UI, контроля асинхронности и плавного выполнения операций.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13🔥9👍7🤝1
👍14🤝8🔥6
Сегодня напишем небольшую утилиту, которая получает число и систему счисления, переводит его и проверяет, будет ли оно палиндромом.
В этом посте:
• Переводим число в нужную систему через toString(base);
• Проверяем строку на палиндром при помощи реверса;
• Добавляем простую CLI-структуру для интерактивного ввода;
• Формируем аккуратный вывод с пояснением результата.
Такая задача помогает глубже понять внутренние преобразования чисел и учит выстраивать чистую логику проверки.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥9❤7🤝2
Создаем глубокую копию объекта!
Раньше, чтобы скопировать объект со всеми вложенными данными, использовали
Создаём объект с вложенными структурами:
Делаем глубокую копию:
Копируем его нативно и проверяем независимость:
🔥 Работает с объектами, массивами,
📣 JS Ready | #практика
Раньше, чтобы скопировать объект со всеми вложенными данными, использовали
JSON.parse(JSON.stringify(obj)), но это теряло даты, Map, Set и ломало типы. Теперь есть нативное решение — structuredClone().Создаём объект с вложенными структурами:
const user = {
name: "Alice",
age: 25,
settings: { theme: "dark" },
tags: new Set(["admin", "beta"]),
};Делаем глубокую копию:
const copy = structuredClone(user);
Копируем его нативно и проверяем независимость:
copy.settings.theme = "light";
copy.tags.add("newbie");
console.log(user.settings.theme); // "dark" — оригинал не изменился
console.log([...user.tags]); // ["admin", "beta"]
console.log(copy !== user); // true — разные объекты
🔥 Работает с объектами, массивами,
Map, Set, Date, RegExp и даже Blob/File. Не копирует функции и DOM-элементы, а также не сохраняет прототипы.Please open Telegram to view this post
VIEW IN TELEGRAM
❤14🔥8🤝6
В этой шпаргалке собраны основные команды для диагностики и анализа кода: вывод данных, измерение времени, группировка логов и работа с ошибками. Эти инструменты помогают быстрее находить проблемы, понимать поток выполнения и поддерживать код в чистом состоянии.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16❤7👍7