تنظيم الـ Classes في Modules

جزء من قسم Object Oriented Programming في رحلة JavaScript على Coddy — الدرس 30 من 56.

عندما يكبر مشروعك، يصبح وجود جميع الفئات (classes) في ملف واحد أمراً فوضوياً. تخيل وجود 10 فئات في ملف واحد - سيصبح من الصعب العثور على الكود وصيانته.

لقد تعلمنا بالفعل كيفية تنظيم الكود باستخدام الوحدات (modules) - تصدير و استيراد الدوال والمتغيرات. مع الأصناف (classes)، نستخدم نفس المنطق وبناء الجملة (syntax)! يمكنك تصدير الأصناف من ملف واحد واستيرادها في ملف آخر، تماماً كما فعلنا مع الدوال.

دعونا نتدرب على تنظيم الفئات (classes) في وحدات (modules) للحفاظ على الكود الخاص بنا نظيفاً وسهل الإدارة.

على سبيل المثال:

كيف يعمل:

الملف 1: furniture-base.js (تصدير الفئة الأساسية)

export class Furniture {
 constructor(material) {
   this.material = material;
 }
 
 describe() {
   return `${this.material} furniture`;
 }
}

الملف 2: chair.js (استيراد وتوسيع)

import { Furniture } from './furniture-base.js';
export class Chair extends Furniture {
 constructor(material, legs) {
   super(material);
   this.legs = legs;
 }
 
 sit() {
   return "Sitting comfortably";
 }
}

الملف 3: main.js (استخدم كل شيء معاً)

import { Chair } from './chair.js';
import { Table } from './table.js';
const myChair = new Chair("wood", 4);
const myTable = new Table("glass", "round");
console.log(myChair.describe());  // "wood furniture"
console.log(myTable.describe());  // "glass furniture"

التحدي

لديك نظام لمتجر إلكترونيات منظم في وحدات (modules). تم إنشاء فئتي Laptop و Smartphone في ملفات منفصلة ولكن يجب جعلهما متاحين للملفات الأخرى.

مهمتك:

تصدير الفئات (استخدم named exports - وليس default):
- في laptop.js: أضف export لجعل فئة Laptop متاحة
- في smartphone.js: أضف export لجعل فئة Smartphone متاحة
استيراد الفئات في main.js:
- استورد فئة Laptop من laptop.js
- استورد فئة Smartphone من smartphone.js

ورقة مرجعية

يمكن تصدير واستيراد الأصناف (Classes) بين الوحدات البرمجية باستخدام نفس الصيغة المستخدمة مع الدوال والمتغيرات.

تصدير صنف (class):

export class Furniture {
  constructor(material) {
    this.material = material;
  }
  
  describe() {
    return `${this.material} furniture`;
  }
}

استيراد وتوسيع صنف (class):

import { Furniture } from './furniture-base.js';

export class Chair extends Furniture {
  constructor(material, legs) {
    super(material);
    this.legs = legs;
  }
  
  sit() {
    return "Sitting comfortably";
  }
}

استيراد أصناف متعددة:

import { Chair } from './chair.js';
import { Table } from './table.js';

const myChair = new Chair("wood", 4);
const myTable = new Table("glass", "round");

جرّب بنفسك

// TODO: استيراد فئة Laptop من laptop.js

// TODO: استيراد فئة Smartphone من smartphone.js


const myLaptop = new Laptop();
const myPhone = new Smartphone();

console.log(myLaptop.type);      // المخرجات: "laptop"
console.log(myPhone.type);       // المخرجات: "smartphone"