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

🎯 اهداف یادگیری

• درک مفهوم ماژول‌ها و مزایای استفاده از آنها
• یادگیری نحوه ایجاد و استفاده از ماژول‌ها
• آشنایی با انواع export و import
• مدیریت وابستگی‌ها بین ماژول‌ها

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

ماژول‌ها در جاوااسکریپت به شما اجازه می‌دهند کد خود را به فایل‌های مجزا تقسیم کنید و از قابلیت استفاده مجدد و سازماندهی بهتر کد بهره ببرید:

// mathOperations.js - یک ماژول ساده
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

مزایای استفاده از ماژول‌ها:

• قابلیت استفاده مجدد: کدها در چندین پروژه قابل استفاده هستند
• سازماندهی بهتر: کدها بر اساس عملکردشان دسته‌بندی می‌شوند
• حفظ حریم خصوصی: متغیرها و توابع در ماژول محصور می‌شوند
• مدیریت وابستگی‌ها: روابط بین بخش‌های کد مشخص می‌شود

📌 انواع export در ماژول‌ها

دو روش اصلی برای export کردن از یک ماژول وجود دارد:

// روش 1: Named Export (صادرات نامدار)
export const PI = 3.14159;
export function circleArea(radius) {
  return PI * radius * radius;
}
// روش 2: Default Export (صادرات پیش‌فرض)
export default function calculate(a, b, operator) {
  switch(operator) {
    case '+': return a + b;
    case '-': return a - b;
    default: throw new Error('عملگر نامعتبر');
  }
}

تفاوت Named Export و Default Export:

📌 انواع import در جاوااسکریپت

بسته به نوع export، روش‌های مختلفی برای import وجود دارد:

// Import کردن Named Exportها
import { PI, circleArea } from './mathUtils.js';
// Import کردن با نام متفاوت (Alias)
import { PI as piValue, circleArea as area } from './mathUtils.js';
// Import کردن همه Named Exportها به صورت یک آبجکت
import * as math from './mathUtils.js';
// Import کردن Default Export
import calculate from './calculator.js';
// Import ترکیبی از Default و Named Exportها
import calculate, { PI } from './mathUtils.js';

نکات مهم در import:

• مسیر فایل: حتما مسیر صحیح فایل ماژول را مشخص کنید
• پسوند فایل: در مرورگر باید پسوند .js مشخص شود
• نام فایل: در Node.js نیازی به ذکر پسوند .js نیست
• حساس به حروف: نام فایل‌ها در سیستم‌عامل‌های مختلف ممکن است حساس به حروف باشد

📌 ماژول‌ها در مرورگر

برای استفاده از ماژول‌ها در مرورگر باید نوع اسکریپت را module تعیین کنید:

<script type="module" src="app.js">script>

// app.js - فایل اصلی
import { add, subtract } from './mathOperations.js';
console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6

محدودیت‌های ماژول‌ها در مرورگر:

• CORS: فایل‌ها باید از طریق پروتکل HTTP/HTTPS بارگذاری شوند
• پشتیبانی مرورگرها: همه مرورگرهای قدیمی از ماژول‌ها پشتیبانی نمی‌کنند
• مسیرها: مسیرها باید نسبی یا کامل باشند (مثلا './module.js')

📌 ماژول‌ها در Node.js

Node.js از دو سیستم ماژول پشتیبانی می‌کند:

// سیستم ماژول‌های ES (مورد توصیه)
import express from 'express';
import { readFile } from 'fs/promises';
// سیستم ماژول‌های CommonJS (قدیمی)
const express = require('express');
const { readFile } = require('fs/promises');

تفاوت‌های ماژول‌های ES و CommonJS:

📌 تمرین عملی

یک پروژه ساده با ساختار ماژولی ایجاد کنید:

# ساختار پروژه
project/
├── index.html
├── main.js
└── modules/
    ├── math.js
    └── utils.js

راهنمای تمرین:

1. فایل math.js را ایجاد کنید و توابع ریاضی پایه را export کنید
2. فایل utils.js را ایجاد کنید و توابع کمکی را export کنید
3. در main.js از ماژول‌های ایجاد شده import بگیرید
4. یک برنامه ساده مثل ماشین حساب ایجاد کنید
5. صفحه index.html را برای اجرا در مرورگر آماده کنید

📌 قدم بعدی

در درس بعدی با کار با Package Managers و NPM آشنا خواهیم شد!