| کانال توسعهدهندگان جاوااسکریپت |
описание
⭕️ کانال توسعهدهندگان جاوااسکریپت دولوپیکس 💠 دولوپیکس | جامعه توسعهدهندگان ایرانی 💎 @Developix 🚀 Developix.ir 📌 پشتیبانی و تبلیغات: @DevelopixSupport
3 918
подписчиков
Охват к подписчикам
29,6%
ERR
Реакции к просмотрам
0,34%
322 на 41 постов
Пересылки к просмотрам
0,95%
903
Постов в день
0,3
всего 41
Где отзываются чаще
доля реакций к просмотрам- 13 авг.без подписи2,36%
- 13 авг.без подписи1,50%
- 14 июл.ساخت 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.textContent = todo.text + " "; const btn = document.createElement("button"); btn.textContent = "حذف"; btn.dataset.id = todo.id; li.appendChild(btn); list.appendChild(li); }); } چند نکته ریز ولی مهم 🧠 • همیشه روی داده localStorage یک try...catch بگذار که اگر خراب شد (مثلاً دستی ویرایش شده بود) اپ کرش نکند. • از یک key ثابت مثل jsdev_todos استفاده کن تا اگر بعداً چند بخش دیگر هم اضافه شد، تداخل نداشته باشند. • برای id ها اینجا از Date.now() استفاده شده، که برای پروژههای کوچک کافی است. با همین ساختار پایه میشود بعدها checkbox برای completed، فیلتر، و حتی sync ساده با backend هم اضافه کرد. یک بار این نمونه را تا انتها بساز، بعد هر جای اپهای واقعی که state و UI sync میشوند خیلی قابل فهمتر به نظر میرسد ⚡️ اگر ساختی و کمی شخصیسازیاش کردی، نسخهات را برای بقیه بچههای جاوااسکریپت هم بفرست؛ همین مثالهای کوچک کمکم تبدیل به component و pattern های جدیتر میشوند. 🔖 #Javascript #JS #جاوااسکریپت #JavaScript #LocalStorage #DOM #VanillaJS #Frontend 👤 Developix 💎 Channel: @DevelopixJavascript0,68%
- 6 янв.без подписи0,58%
- 8 июл.💠 نسخه جدید رانتایم نود جیاس (NodeJS) منتشر شده است 🔸 ارتقا از نسخه 26.4.0 به 26.5.0 🔹 لیست تغییرات این نسخه: - افزودن متد جدید blob.textStream() در ماژول buffer - افزودن فلگ جدید --experimental-import-text برای ESM - افزودن نمونهبرداری تأخیر هر چرخه رویداد در perf_hooks - افزودن و اکسپوز کردن ReadableStreamTee در ماژول stream - گزارش گروههای مذاکرهشده TLS در ماژول tls - سایر بهبودها و بهروزرسانیهای داخلی و مستندات، و غیره 🔖 #nodejs, #web, #js, #release 💎 @DevelopixJavascript0,58%
- 23 февр.без подписи0,58%
- 4 авг.💠 نسخه جدید رانتایم نود جیاس (NodeJS) منتشر شده است 🔸 ارتقا از نسخه 26.5.1 به 26.6.0 🔹 لیست تغییرات این نسخه: - افزودن تابع جدید ffi.getCurrentEventLoop - افزودن context.log() و رویداد test:log در test_runner - گزارش فیلد entryFile در رویدادهای TestStream - بهبودهای کارایی رویدادها و once()/removeListener() - قابلیت انتقال TCP Server و Socket بین worker threads - بهروزرسانی وابستگیها (npm 11.18.0، V8، OpenSSL، zlib و غیره) 🔖 #nodejs, #web, #js, #release 💎 @DevelopixJavascript0,56%
- 22 дек.без подписи0,56%
- 15 дек. 2024 г.без подписи0,51%
- 14 июн.⏱ جلوگیری از اجرای اضافی 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: @DevelopixJavascript0,49%
- 19 июл. 2025 г.без подписи0,47%
- 16 мар.🎯 هندلکردن کلیکها با Event Delegation وقتی تعداد زیادی دکمه یا آیتم در DOM داریم، اضافهکردن یک event listener روی هر عنصر هم کند است، هم کد را شلوغ میکند. با Event Delegation فقط روی والد گوش میدهیم و رویداد را از مسیر event.target مدیریت میکنیم. 🔥 ✅ این کار: • تعداد listenerها را کم میکند ✂️ • مدیریت عناصر اضافه/حذفشونده را ساده میکند مثال ساده روی یک لیست: const list = document.querySelector('#user-list'); list.addEventListener('click', (event) => { const item = event.target.closest('li'); if (!item || !list.contains(item)) return; const userId = item.dataset.userId; console.log('Clicked user:', userId); }); حالا هر <li data-user-id="123"> که بعداً با JavaScript به #user-list اضافه شود، بدون نیاز به listener جدید، کلیک را هندل میکند. 🚀 برای جزئیات بیشتر: MDN - Event delegation توی پروژههای سنگین DOM، این الگو هم خوانایی کد را بهتر میکند هم عملکرد را. 😉 🔖 #Javascript #JS #جاوااسکریپت #JavaScript #Event_Delegation #DOM #Performance #ES6 👤 Developix 💎 Channel: @DevelopixJavascript0,46%