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

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

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

ماژول‌ها برای وارد کردن کد از فایل‌های دیگر یا استفاده از پکیج‌هایی که با npm نصب می‌کنیم به کار می‌روند. برای مثال، اگر کتابخانه‌ای مثل axios را نصب کنید، می‌توانید آن را به پروژه خود وارد کرده و استفاده کنید.

در پروژه‌ای که با Webpack و Babel تنظیم شده باشد، می‌توان از هر دو نوع سینتکس استفاده کرد. Webpack به‌صورت پیش‌فرض با CommonJS سازگار است و با کمک Babel می‌توان از سینتکس مدرن 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);

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

نکته مهم

اگر بخواهید یک فایل محلی را وارد کنید، باید مسیر آن را با ./ مشخص کنید:

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

اما اگر بخواهید یک پکیج نصب‌شده با npm را وارد کنید، نیازی به نوشتن ./ نیست:

const express = require("express");

دلیل این تفاوت این است که پکیج‌های npm از پوشه node_modules خوانده می‌شوند، اما فایل‌های محلی باید با مسیر مشخص شوند.

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

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

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

• ساختار پروژه تمیزتر می‌شود.
• مدیریت فایل‌ها ساده‌تر می‌شود.
• وابستگی‌ها واضح‌تر می‌شوند.
• خروجی نهایی با مرورگرهای مختلف سازگارتر خواهد بود.

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

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

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

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

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

import { person } from "./myModule2";

console.log(person.name);

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

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

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

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

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

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

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

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

خروجی:

John
Hello John

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

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

import * as mod from "./myModule2";

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";

console.log(greeting);

خروجی:

Hello World

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

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

• در CommonJS از module.exports و require استفاده می‌شود.
• در ES Modules از export و import استفاده می‌شود.
• در پروژه‌هایی که با Babel و Webpack تنظیم شده‌اند، معمولا می‌توان از هر دو روش استفاده کرد.
• ES Modules ظاهر مدرن‌تر و خواناتری دارد و در توسعه امروزی بیشتر استفاده می‌شود.

جمع‌بندی

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

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

تگ ها

عنوان سئو

توضیحات سئو