آشنایی با ماژول‌ها در جاوااسکریپت

قبل از شروع ساخت برنامه، بهتر است کمی درباره ماژول‌ها در جاوااسکریپت صحبت کنیم.

در جاوااسکریپت چند نوع سیستم ماژول وجود دارد. دو مورد از رایج‌ترین آن‌ها عبارت‌اند از:

• CommonJS
• ES Modules یا ماژول‌های استاندارد ES2015

ماژول‌ها برای وارد کردن کد از فایل‌های دیگر به کار می‌روند و باعث می‌شوند به‌جای نوشتن همهٔ کد در یک فایل بزرگ، بتوانیم آن را به بخش‌های کوچک‌تر و قابل استفاده مجدد تقسیم کنیم.

CommonJS عمدتاً در محیط Node.js استفاده می‌شود (مثلاً وقتی پکیجی را با npm نصب و در یک فایل Node اجرا می‌کنید). اما در این آموزش، چون کد را مستقیم در مرورگر اجرا می‌کنیم، از ES Modules استفاده خواهیم کرد؛ چراکه مرورگرهای امروزی به‌صورت بومی از این سینتکس پشتیبانی می‌کنند.

با این حال، برای آشنایی کامل‌تر، در ادامه هر دو سیستم را به‌طور مختصر بررسی می‌کنیم.

ماژول در CommonJS

در CommonJS برای در دسترس قرار دادن یک مقدار در فایل‌های دیگر از module.exports استفاده می‌کنیم.

فرض کنید فایلی به نام myModule1.js داریم:

module.exports = {
  name: "Brad",
  email: "test@test.com",
};

در اینجا یک شیء شامل name و email صادر شده است. برای استفاده از این ماژول در فایل دیگر، از require استفاده می‌کنیم:

const person = require("./myModule1");

console.log(person.name);

اگر این کد را در محیط Node.js اجرا کنید، مقدار Brad در خروجی نمایش داده می‌شود.

نکته: سینتکس require/module.exports مخصوص CommonJS است و به‌صورت پیش‌فرض در مرورگر کار نمی‌کند؛ این سینتکس بیشتر در پروژه‌های سمت سرور با Node.js دیده می‌شود.

چرا ماژول‌ها مفید هستند؟

استفاده از ماژول‌ها باعث می‌شود ساختار پروژه مرتب‌تر و قابل نگهداری‌تر باشد. به‌جای اینکه چندین تگ script جداگانه در فایل HTML قرار دهید و نگران ترتیب اجرای آن‌ها باشید، می‌توانید کدها را در فایل‌های جداگانه بنویسید و هرکدام را دقیقاً در جایی که لازم است import کنید.

این روش چند مزیت مهم دارد:

• ساختار پروژه تمیزتر می‌شود.
• مدیریت فایل‌ها ساده‌تر می‌شود.
• وابستگی‌ها واضح‌تر می‌شوند.
• هر فایل فقط چیزهایی را که واقعاً نیاز دارد وارد می‌کند.

ماژول‌ها در ES Modules

در ES Modules به‌جای module.exports از export استفاده می‌کنیم.

فرض کنید فایل myModule2.js به این شکل باشد:

export const person = {
  name: "John",
  age: 30,
};

برای وارد کردن این ماژول در فایل دیگر، از import استفاده می‌کنیم:

import { person } from "./myModule2.js";

console.log(person.name);

خروجی این کد مقدار John خواهد بود.

نکته: وقتی ماژول‌ها را مستقیم در مرورگر و بدون هیچ ابزار واسطی اجرا می‌کنید، باید پسوند .js را در مسیر import بنویسید (مثلاً ./myModule2.js، نه ./myModule2). مرورگر برخلاف برخی ابزارهای دیگر، پسوند فایل را حدس نمی‌زند.

خروجی گرفتن از چند مقدار

در ES Modules می‌توانید چند مقدار مختلف را از یک فایل صادر کنید. برای مثال:

export const person = {
  name: "John",
  age: 30,
};

export function sayHello() {
  return `Hello ${person.name}`;
}

حالا می‌توان هر دو را در فایل مقصد وارد کرد:

import { person, sayHello } from "./myModule2.js";

console.log(person.name);
console.log(sayHello());

خروجی:

John
Hello John

وارد کردن همه خروجی‌ها با *

اگر نخواهید تک‌تک موارد را نام ببرید، می‌توانید همه خروجی‌ها را یکجا وارد کنید:

import * as mod from "./myModule2.js";

console.log(mod.person.name);
console.log(mod.sayHello());

در این حالت همه خروجی‌های فایل داخل شیئی با نام mod قرار می‌گیرند.

خروجی پیش‌فرض یا Default Export

گاهی ممکن است بخواهید فقط یک مقدار اصلی را به‌عنوان خروجی پیش‌فرض مشخص کنید. در این حالت از export default استفاده می‌شود.

مثال:

const greeting = "Hello World";

export default greeting;

برای وارد کردن این نوع خروجی، دیگر نیازی به آکولاد ندارید:

import greeting from "./myModule2.js";

console.log(greeting);

خروجی:

Hello World

تفاوت کلی بین CommonJS و ES Modules

به‌صورت خلاصه:

• در CommonJS از module.exports و require استفاده می‌شود و بیشتر در محیط Node.js کاربرد دارد.
• در ES Modules از export و import استفاده می‌شود و مرورگرهای امروزی مستقیماً از آن پشتیبانی می‌کنند.
• در این آموزش، چون کد را در مرورگر و بدون هیچ ابزار واسطی اجرا می‌کنیم، همیشه از ES Modules و پسوند کامل .js در مسیر فایل‌ها استفاده خواهیم کرد.

جمع‌بندی

در این بخش یاد گرفتیم که ماژول‌ها در جاوااسکریپت چه هستند و چگونه می‌توان از آن‌ها برای سازمان‌دهی بهتر پروژه استفاده کرد. همچنین با دو سیستم CommonJS و ES Modules آشنا شدیم و روش‌های مختلف export و import را بررسی کردیم.

در ادامهٔ آموزش، فایل‌های پروژه را به ماژول‌های جداگانه تقسیم می‌کنیم و به‌جای استفاده از چندین تگ script، آن‌ها را به‌صورت ساختارمند و با import/export وارد برنامه می‌کنیم.