ماژول‌ها در جاوااسکریپت – از الگوی کلاسیک تا ES Modules و تفاوت‌های ساختاری

ماژول‌ها در جاوااسکریپت مانند کلاس‌ها برای گروه‌بندی داده و رفتار در واحدهای منطقی طراحی شده‌اند. این مقاله به بررسی الگوی کلاسیک ماژول‌ها با توابع کارخانه‌ای، تفاوت آن با کلاس‌ها، و معرفی ES Modules در ES6 می‌پردازد. همچنین به نحوهٔ استفاده، صادرات، و وارد کردن ماژول‌ها و تفاوت در نمونه‌سازی اشاره می‌شو

ماژولESMfactory-functionimport-export

~3 دقیقه مطالعه • بروزرسانی ۲۸ مهر ۱۴۰۴

مقدمه


ماژول‌ها در جاوااسکریپت، مانند کلاس‌ها، هدفشان گروه‌بندی داده و رفتار در واحدهای منطقی است. آن‌ها می‌توانند با یکدیگر تعامل داشته باشند و داده یا رفتار را به اشتراک بگذارند. اما تفاوت‌های مهمی در نحوهٔ تعریف و استفاده دارند — به‌ویژه در نحو (syntax).


ماژول‌های کلاسیک


قبل از ES6، ماژول‌ها به‌صورت توابعی تعریف می‌شدند که یک شیء عمومی (public API) را بازمی‌گرداندند. این توابع را factory functions یا توابع کارخانه‌ای می‌نامند:


function Publication(title, author, pubDate) {
  var publicAPI = {
    print() {
      console.log(`
Title: ${title}
By: ${author}
${pubDate}
`);
    }
  };
  return publicAPI;
}

ماژول‌های کلاسیک داده‌ها را درون محدودهٔ تابع نگه می‌دارند و فقط متدهای عمومی را بازمی‌گردانند. برخلاف کلاس‌ها، نیازی به this نیست و داده‌های خصوصی به‌صورت طبیعی محافظت می‌شوند.


مقایسه با کلاس‌ها


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


نمونه‌سازی ماژول‌های کلاسیک


برای استفاده از ماژول‌های کلاسیک، کافی‌ست تابع را فراخوانی کنیم — نیازی به new نیست:


var YDKJS = Book({
  title: "You Don't Know JS",
  author: "Kyle Simpson",
  publishedOn: "June 2014",
  publisher: "O'Reilly",
  ISBN: "123456-789"
});
YDKJS.print();

ES Modules (ESM)


در ES6، نحو رسمی برای تعریف ماژول‌ها معرفی شد. در ESM:


  • هر فایل یک ماژول است.
  • برای تعریف API عمومی از export استفاده می‌شود.
  • برای استفاده از ماژول، از import استفاده می‌کنیم.
  • ماژول‌ها به‌صورت singleton هستند — فقط یک‌بار نمونه‌سازی می‌شوند.

اگر نیاز به چند نمونه باشد، باید از الگوی کلاسیک درون ESM استفاده کنیم.


نمونه‌ای از ترکیب ESM و ماژول کلاسیک


// publication.js
function printDetails(title, author, pubDate) {
  console.log(`
Title: ${title}
By: ${author}
${pubDate}
`);
}
export function create(title, author, pubDate) {
  var publicAPI = {
    print() {
      printDetails(title, author, pubDate);
    }
  };
  return publicAPI;
}

در فایل دیگر:


// blogpost.js
import { create as createPub } from "publication.js";
export function create(title, author, pubDate, URL) {
  var pub = createPub(title, author, pubDate);
  var publicAPI = {
    print() {
      pub.print();
      console.log(URL);
    }
  };
  return publicAPI;
}

جمع‌بندی


ماژول‌ها در جاوااسکریپت ابزار قدرتمندی برای سازمان‌دهی کد هستند. الگوی کلاسیک با توابع کارخانه‌ای انعطاف‌پذیر و خصوصی‌سازی طبیعی دارد، در حالی که ES Modules ساختار رسمی و فایل‌محور ارائه می‌دهد. شناخت تفاوت‌ها و کاربردهای مناسب هر الگو، پایه‌ای مهم برای طراحی حرفه‌ای در JS است.


نوشته و پژوهش شده توسط دکتر شاهین صیامی