| کانال توسعه‌دهندگان جاوااسکریپت |

⏱ جلوگیری از اجرای اضافی event با debounce ساده تو پروژه‌های فرانت، eventهایی مثل scroll و input می‌تونن تو هر ثانیه ده‌ها بار فایر بشن و باعث لگ، مصرف CPU و رندر اضافه بشن. یک تکنیک ساده برای کنترل این ماجرا، استفاده از debounce هست. 😉 ایده: تا وقتی کاربر داره پشت‌سرهم تایپ یا اسکرول می‌کنه، تابع اصلی اجرا نشه؛ فقط وقتی یک مدت کوتاه هیچ eventی نیومد، تابع رو صدا بزن. function debounce(fn, delay) { let timeoutId; return function (...args) { if (timeoutId) clearTimeout(timeoutId); timeoutId = setTimeout(() => { fn.apply(this, args); }, delay); }; } const handleSearch = debounce((event) => { console.log("Search:", event.target.value); }, 400); const input = document.querySelector("#search"); input.addEventListener("input", handleSearch); 💡 این کار تعداد requestهای سرچ، رندر مجدد و لاگ‌ها رو به‌شدت کم می‌کنه و UX نرم‌تری می‌سازه. مرجع بیشتر در مورد timing ها و eventها: MDN - setTimeout امتحانش روی inputهای سرچ یا resize و scroll نتیجه خیلی ملموسی می‌دهد. 🚀 🔖 #Javascript #JS #جاوااسکریپت #JavaScript #debounce #performance #events #frontend 👤 Developix 💎 Channel: @DevelopixJavascript

ساخت TODO List یکی از بهترین تمرین‌های واقعی برای جا افتادن مفاهیم DOM، event ها و ذخیره داده‌ها در مرورگر است. این بار بدون React و فریم‌ورک، فقط با Vanilla JS و LocalStorage 💪 منبع اصلی ایده و توضیحات: آموزش MDN درباره Web Storage API و مستندات DOM Manipulation. ایده کلی 👇 یک فرم ساده داریم برای اضافه‌کردن task ها، لیست را با JS توی DOM رندر می‌کنیم و هر تغییری که کاربر می‌دهد را در localStorage ذخیره می‌کنیم تا بعد از refresh هم از بین نرود. نکته خوبش این است که با همین مثال ساده، چند تا چیز مهم جا می‌افتد: • کار با querySelector و ساخت element های جدید • مدیریت event ها مثل submit و click • تبدیل array به string و برعکس با JSON.stringify و JSON.parse • sync نگه‌داشتن UI با state ذخیره‌شده در localStorage یک اسکلت ساده از کد 👇 <!-- index.html --> <form id="todo-form"> <input id="todo-input" placeholder="کار جدید..." /> <button type="submit">اضافه کن</button> </form> <ul id="todo-list"></ul> <script src="app.js"></script> و فایل جاوااسکریپت: // app.js const form = document.querySelector("#todo-form"); const input = document.querySelector("#todo-input"); const list = document.querySelector("#todo-list"); const STORAGE_KEY = "jsdev_todos"; let todos = loadTodos(); render(); form.addEventListener("submit", (e) => { e.preventDefault(); const text = input.value.trim(); if (!text) return; todos.push({ id: Date.now(), text }); input.value = ""; saveTodos(); render(); }); list.addEventListener("click", (e) => { if (!e.target.matches("button[data-id]")) return; const id = Number(e.target.dataset.id); todos = todos.filter((t) => t.id !== id); saveTodos(); render(); }); function loadTodos() { const raw = localStorage.getItem(STORAGE_KEY); try { return raw ? JSON.parse(raw) : []; } catch { return []; } } function saveTodos() { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)); } function render() { list.innerHTML = ""; todos.forEach((todo) => { const li = document.createElement("li"); li.textCon

یکی از ساده‌ترین تکنیک‌های Refactoring برای تمیزتر شدن کد جاوااسکریپت، استفاده از الگوی Early Return است ✨ در این الگو به‌جای اینکه یک تابع را با if تو در تو و بلاک‌های بزرگ بپیچیم، شرط‌های نامعتبر را زودتر برمی‌گردانیم و مسیر «عادی» تابع را خوانا و سرراست نگه می‌کنیم. نمونه کد شلوغ بدون Early Return 👇 function createOrder(user, items) { if (user) { if (user.isActive) { if (Array.isArray(items) && items.length > 0) { const total = items.reduce((sum, it) => sum + it.price, 0); if (total > 0) { return { userId: user.id, total, status: "CREATED" }; } else { throw new Error("Total must be positive"); } } else { throw new Error("Items required"); } } else { throw new Error("User not active"); } } else { throw new Error("User required"); } } خواندن این تابع سخت است؛ منطق اصلی بین ifهای تودرتو گم شده. همان منطق با Early Return 🧼 function createOrder(user, items) { if (!user) { throw new Error("User required"); } if (!user.isActive) { throw new Error("User not active"); } if (!Array.isArray(items) || items.length === 0) { throw new Error("Items required"); } const total = items.reduce((sum, it) => sum + it.price, 0); if (total <= 0) { throw new Error("Total must be positive"); } return { userId: user.id, total, status: "CREATED" }; } حالا: • تمام شرط‌های نامعتبر بالا جمع شده‌اند و سریع تابع را ترک می‌کنند ✅ • «مسیر خوشحال» وسط تابع مثل یک داستان خطی و قابل‌خواندن است ✅ • دیباگ و لاگ‌گرفتن ساده‌تر شده است ✅ نکته کاربردی در پروژه‌های React / Node.js در هندلرهای API و کنترلرهای Express هم همین الگو کمک زیادی می‌کند تا از callback hell جدید یعنی if hell فرار شود: export const handler = async (req, res) => { const { user } = req; if (!user) { return res.status(401).json({ message: "Unauthorized" }); } if (!user.isActive) { return res.status(403).json({ message: "Inactive user" }); } const data = await