ساخت شیء ماژول و کار با کلاس ها

اگر تعداد توابع صادر شده از یک فایل زیاد باشد، نوشتن تک‌تک آن‌ها در دستور import و تغییر نام‌شان با as می‌تواند کد ما را بسیار طولانی و شلوغ کند. جاوااسکریپت برای این مشکل دو راه‌حل فوق‌العاده و بسیار تمیز دارد که کدهای ما را خواناتر و حرفه‌ای‌تر می‌کند.

۱. ساخت یک شیء ماژول (Creating a module object)

به جای اینکه تک‌تک توابع را دانه‌دانه وارد کنید، می‌توانید تمام قابلیت‌های یک فایل را یکجا درون یک شیء (Object) قرار دهید.

سینتکس این روش به صورت زیر است:

import * as Module from "./modules/module.js";

این دستور چطور کار می‌کند؟

ستاره (*) به معنی «همه چیز» است. این دستور تمام صادرات موجود در فایل module.js را می‌گیرد و آن‌ها را به عنوان اعضای یک شیء به نام Module (که خودت نامش را انتخاب می‌کنی) در می‌آورد. این کار در واقع یک فضای نام (Namespace) اختصاصی برای آن فایل ایجاد می‌کند.

حالا برای دسترسی به توابع، کافی است نام آن شیء را بنویسی و با یک نقطه (.) به آن‌ها دسترسی داشته باشی:

Module.function1();
Module.function2();

یک مثال واقعی و عینی

فرض کن می‌خواهیم فایل‌های بوم نقاشی، مربع، دایره و مثلث را وارد فایل اصلی (main.js) کنیم. بخش export در فایل‌های ماژول بدون هیچ تغییری و کاملاً ساده باقی می‌ماند:

export { name, draw, reportArea, reportPerimeter };

اما بخش import در فایل اصلی به این شکل فوق‌العاده تمیز و خلاصه می‌شود:

import * as Canvas from "./modules/canvas.js";
import * as Square from "./modules/square.js";
import * as Circle from "./modules/circle.js";
import * as Triangle from "./modules/triangle.js";

حالا هر زمان که بخواهی از توابع مربع استفاده کنی، کافی است نام شیء Square را قبل از تابع بیاوری. به همین راحتی تداخل نام‌ها حل می‌شود و کد بسیار خواناتر است:

const square = Square.draw(myCanvas.ctx, 50, 50, 100, "blue");
Square.reportArea(square.length, reportList);
Square.square.reportPerimeter(square.length, reportList);

۲. ترکیب ماژول‌ها و کلاس‌ها (Modules and classes)

یک راهکار عالی دیگر برای جلوگیری از تداخل نام‌ها و سازمان‌دهی کدها، استفاده از کلاس‌ها (Classes) است. اگر طرفدار برنامه‌نویسی شیءگرا (OOP) هستی یا کدهای پروژه‌ات از قبل با این استایل نوشته شده‌اند، این روش برایت ایده‌آل است.

شما می‌توانید یک کلاس کامل را درون یک فایل ماژول تعریف کنید و آن را صادر کنید. به عنوان مثال، فایل square.js تمام قابلیت‌هایش (توابع رسم، محاسبه مساحت و...) را درون یک کلاس واحد جمع می‌کند:

class Square {
  // متد سازنده کلاس برای مقداردهی اولیه
  constructor(ctx, listId, length, x, y, color) {
    this.ctx = ctx;
    this.listId = listId;
    this.length = length;
    this.x = x;
    this.y = y;
    this.color = color;
  }

  draw() {
    // کدهای مربوط به رسم مربع در اینجا
  }

  reportArea() {
    // کدهای مربوط به گزارش مساحت
  }
}

// صادر کردن خود کلاس
export { Square };

نحوه استفاده از کلاس در فایل اصلی

حالا در فایل main.js ابتدا کلاس را وارد می‌کنیم و سپس با کلمه کلیدی new یک نمونه (Instance) از روی آن می‌سازیم:

// وارد کردن کلاس
import { Square } from "./modules/square.js";

// ساخت یک نمونه جدید از کلاس مربع
const square = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, "blue");

// صدا زدن متدهای کلاس
square.draw();
square.reportArea();
square.reportPerimeter();

مزیت این روش: وقتی از کلاس‌ها استفاده می‌کنی، تمام ویژگی‌ها و متدها به خودِ شیء ساخته‌شده متصل هستند. در نتیجه، بدون اینکه نگران تداخل نام توابع با بقیه فایل‌ها باشی، کدی کاملاً کپسوله‌شده (Encapsulated) و ساختاریافته داری.