Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
Наука · 27 сентября 2026 г.
📌 Подборка полезных функций, которые пригодятся продвинутым frontend-разработчикам при...
📌 Подборка полезных функций, которые пригодятся продвинутым frontend-разработчикам при работе с UI, производительностью и архитектурой 1. Throttle Контролирует частоту вызова функции, полезно для scroll/resize-событий. function throttle(fn: Function, delay: number) { let last = 0; return (...args: any[]) => { const now = Date.now(); if (now - last >= delay) { last = now; fn(...args); } }; } 2. Debounce Откладывает выполнение функции до окончания серии вызовов. function debounce(fn: Function, delay: number) { let timeout: ReturnType<typeof setTimeout>; return (...args: any[]) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), delay); }; } 3. Deep Clone (без structuredClone) function deepClone<T>(obj: T): T { return JSON.parse(JSON.stringify(obj)); } Подходит для простых объектов, не содержащих функций, дат и т.п. 4. Safe Access (Optional Chaining + Fallback) function get<T>(obj: any, path: string, fallback?: T): T { return path.split('.').reduce((acc, key) => acc?.[key], obj) ?? fallback; } 5. Wait (async delay) function wait(ms: number) { return new Promise(resolve => setTimeout(resolve, ms)); } 6. Generate UUID v4 function uuidv4() { return crypto.randomUUID(); // нативно в современных браузерах } 7. Copy to Clipboard async function copyToClipboard(text: string) { try { await navigator.clipboard.writeText(text); } catch { const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); } } 8. Detect Outside Click (для dropdown/modals) function onClickOutside(element: HTMLElement, callback: () => void) { function handler(event: MouseEvent) { if (!element.contains(event.target as Node)) { callback(); } } document.addEventListener('click', handler); return () => document.removeEventListener('click', handler); // для очистки } 9. Download File from Blob function downloadBlob(blob: Blob, filename: string) { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); } 10. Dynamic Script Loader (например, для внешних SDK) function loadScript(src: string): Promise<void> { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = src; script.async = true; script.onload = () => resolve(); script.onerror = () => reject(new Error(`Failed to load ${src}`)); document.head.appendChild(script); }); } 👉 @frontend_1