Телеграм канал «جاوااسکریپت | JavaScript»

فایل‌های JSON را مستقیماً به‌عنوان ماژول وارد کنید!
پیکربندی‌ها، واژه‌نامه‌ها و داده‌های ایستا را اغلب به‌صورت جداگانه بارگذاری می‌کنند و سپس آن‌ها را به‌صورت دستی تبدیل می‌کنند. در ماژول‌های مدرن جاوااسکریپت، می‌توانید فایل‌های JSON را مستقیماً با استفاده از ویژگی‌های واردسازی (Import Attributes) وارد کنید:
import countries from './countries.json' with { type: 'json' };

console.log(countries[0]);
این روش با واردسازی پویا (import()) نیز کار می‌کند؛ بنابراین می‌توانید داده‌ها را فقط زمانی بارگذاری کنید که به آن‌ها نیاز دارید:
const { default: translations } =
await import('./ru.json', {
with: { type: 'json' }
});
تفاوت اصلی این روش با fetch() معمولی این است که فایل JSON مستقیماً در سیستم ماژول‌ها قرار می‌گیرد. بارگذار ماژول می‌داند چه نوع منبعی را انتظار دارد و نتیجه را می‌توان مانند هر وابستگی دیگری در ماژول استفاده کرد.
import settings from './settings.json' with { type: 'json' };

startApp(settings);
🔥 اگر فایل JSON بخشی از خود برنامه است، نه داده‌ای از یک رابط برنامه‌نویسی کاربردی خارجی (API)، لزومی ندارد آن را با fetch() بارگذاری کنید. آن را مانند یک وابستگی معمولی وارد کنید.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

جلوگیری از درخواست‌های تکراری API با کش کردن Promise!

وقتی چند کامپوننت به‌صورت هم‌زمان یک تابع را فراخوانی می‌کنند، ممکن است درخواست‌های یکسانی برای دریافت داده‌های مشابه ارسال شود.
کش کردن معمولی نتیجه، این مشکل را حل نمی‌کند؛ چون تا زمانی که اولین درخواست به پایان برسد، هنوز نتیجه‌ای در کش ذخیره نشده است.
const cache = new Map();

async function getUser(id) {
if (cache.has(id)) {
return cache.get(id);
}

const user = await fetchUser(id);

cache.set(id, user);
return user;
}
اگر قبل از اتمام درخواست اول، دو بار getUser(1) را فراخوانی کنیم، تابع fetchUser(1) دو بار اجرا می‌شود.
راه‌حل: به‌جای ذخیره نتیجه، خود Promise را ذخیره کنیم.
const pending = new Map();

function getUser(id) {
if (pending.has(id)) {
return pending.get(id);
}

const promise = Promise.resolve()
.then(() => fetchUser(id))
.finally(() => {
pending.delete(id);
});

pending.set(id, promise);

return promise;
}
حالا اگر چند فراخوانی هم‌زمان با یک کلید انجام شوند، همگی همان Promise را دریافت می‌کنند و درخواست فقط یک بار اجرا می‌شود.
const [user1, user2] = await Promise.all([
getUser(1),
getUser(1),
]);

console.log(user1 === user2); // true
چرا استفاده از finally مهم است؟
اگر درخواست با خطا مواجه شود، Promise ردشده نیز باید از Map حذف شود؛ وگرنه فراخوانی‌های بعدی همان خطای قبلی را دریافت می‌کنند و فرصت ارسال درخواست جدید را نخواهند داشت.
با استفاده از finally، رکورد پس از پایان درخواست، چه موفقیت‌آمیز باشد و چه ناموفق، حذف می‌شود.
به این تکنیک Request Deduplication یا Single-Flight می‌گویند؛ یعنی چند درخواست هم‌زمان با کلید یکسان، از یک عملیات مشترک استفاده می‌کنند.
🔥 این روش در API Clientها، لایه‌های سرویس و اپلیکیشن‌هایی که چند کامپوننت ممکن است هم‌زمان داده‌های یکسانی بخواهند، بسیار کاربردی است؛ چون از اجرای کار تکراری جلوگیری می‌کند، بدون اینکه نتیجه درخواست‌ها را به‌صورت دائمی کش کند.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

تبدیل فرم HTML به یک شیء جاوااسکریپت، تنها در یک خط!
هنگام ارسال فرم، توسعه‌دهندگان معمولاً مقادیر فیلدها را با استفاده از querySelector و value به‌صورت دستی می‌خوانند و سپس برای ارسال به API، آن‌ها را در قالب یک شیء جمع‌آوری می‌کنند.
اما مرورگر خودش ابزارهای لازم را در اختیارمان قرار داده است! FormData اطلاعات فرم را جمع‌آوری می‌کند و Object.fromEntries() آن‌ها را به یک شیء معمولی تبدیل می‌کند:
const form = document.querySelector('form');

const user = Object.fromEntries(
new FormData(form)
);
برای مثال، فرمی با فیلدهای name، email و role به‌طور خودکار به این شیء تبدیل می‌شود:
{
name: 'Alex',
email: 'alex@mail.com',
role: 'admin'
}
می‌توانید از FormData مستقیماً در رویداد ارسال فرم استفاده کنید و سپس اطلاعات را به API بفرستید:
form.addEventListener('submit', async event => {
event.preventDefault();

const data = Object.fromEntries(
new FormData(event.currentTarget)
);

await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
});
چند نکتهٔ مهم:
اگر چند فیلد نام یکسانی داشته باشند، فقط مقدار آخر در شیء نهایی باقی می‌ماند. برای دریافت همهٔ مقادیر، از FormData.getAll() استفاده کنید.
فایل‌های انتخاب‌شده نیز به پردازش جداگانه نیاز دارند.
🔥 ترکیب FormData و Object.fromEntries() راهی ساده و کم‌کد برای تبدیل اطلاعات فرم به یک شیء آماده است.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏📂 DNS چگونه کار می‌کند؟ از نام دامنه تا نشانی IP!
‏
‏DNS یا «سامانهٔ نام دامنه» (Domain Name System)، سامانه‌ای توزیع‌شده است که نام دامنه‌ها را به نشانی‌های IP تبدیل می‌کند و امکان دریافت سایر رکوردهای DNS را نیز فراهم می‌سازد.

نمودار، فرایند تبدیل نام دامنه به نشانی IP را نشان می‌دهد: بررسی حافظهٔ نهان محلی، مراجعه به حل‌کنندهٔ بازگشتی DNS، سرورهای ریشه، سرورهای دامنهٔ سطح‌بالا (TLD) و در نهایت سرور نام معتبر (Authoritative Server).

این مطلب را ذخیره کن تا همیشه در دسترست باشد!

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

🛠 ابزار روز: آیا این اسم پروژه قبلاً استفاده شده؟
براموس قصد داشت یک پکیج در npm منتشر کند، اما متوجه شد نام انتخابی‌اش قبلاً ثبت شده است! برای حل این مشکل، ابزار خط فرمان CanIName را ساخت.
این ابزار بررسی می‌کند که آیا نام موردنظرتان در npm و Netlify در دسترس است یا نه. همچنین می‌توانید بررسی‌کننده‌های اختصاصی خودتان را برای سرویس‌های دیگر به آن اضافه کنید.
اگر قبل از شروع یک پروژه یا انتشار پکیج می‌خواهید از تکراری نبودن نام آن مطمئن شوید، این ابزار می‌تواند مفید باشد.


🔗 معرفی ابزار CanIName
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

🔎 ابزار روز: گوگل از SynthID Detector رونمایی کرد
گوگل ابزاری تحت وب معرفی کرده که می‌تواند تصاویر، ویدئوها و فایل‌های صوتی را برای شناسایی واترمارک نامرئی SynthID بررسی کند؛ نشانه‌ای که برای تشخیص محتوای تولیدشده با هوش مصنوعی طراحی شده است.
به گفتهٔ گوگل، تاکنون بیش از صد و هشتاد میلیارد تصویر و ویدئو با این فناوری نشانه‌گذاری شده‌اند. این ابزار از فناوری‌های شرکت‌های دیگری مثل OpenAI، NVIDIA و Kakao نیز پشتیبانی می‌کند و قرار است پشتیبانی از اپل هم به آن اضافه شود.
🔗 آزمایش ابزار SynthID Detector
البته یک مشکل وجود دارد: بعضی افراد در تلاش‌اند این واترمارک‌ها را حذف کنند و حتی ابزارهای اختصاصی برای این کار ساخته‌اند؛ مثل remove-ai-watermarks.
پس یادتان باشد: نبودن واترمارک لزوماً به معنای واقعی بودن محتوا نیست و وجود آن هم باید در چارچوب قابلیت‌های ابزار بررسی شود. هر تصویر و ویدئویی را بدون بررسی باور نکنید!


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

🛠 ابزار روز: TanStack Charts 1.0
تانر لیندزلی کتابخانهٔ نمودار TanStack Charts را به نسخهٔ پایدار یک رسانده است.
تفاوت اصلی آن با کتابخانه‌های معمولی این است که به‌جای انتخاب کامپوننت‌های آماده‌ای مثل LineChart و BarChart، نمودار را از اجزای مستقل مثل نشانگرها، محورها، مقیاس‌ها و تعاملات می‌سازید. به این ترتیب، ترکیب‌ها و نمودارهای سفارشی را راحت‌تر پیاده‌سازی می‌کنید.
این کتابخانه از SVG استفاده می‌کند و برای بخش‌های سنگین امکان استفاده از Canvas را هم دارد؛ ضمن اینکه قابلیت‌های غیرضروری تا زمان نیاز وارد باندل نمی‌شوند.
نکتهٔ جالب‌تر اینکه لیندزلی معماری و API را خودش طراحی کرده، اما بخش عمدهٔ پیاده‌سازی را به ایجنت‌های هوش مصنوعی سپرده است! حتی راهنمای اختصاصی برای استفادهٔ ایجنت‌ها از این کتابخانه هم دارد.
خلاصه اینکه قرار نیست فقط نمودار بکشید؛ قرار است هر ایدهٔ عجیب‌وغریبی که طراحتان مطرح می‌کند، پیاده‌سازی کنید! 😄

🔗 معرفی رسمی
🔗 گالری نمودارها
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript