ארגון מחלקות במודולים

חלק מהיחידה תכנות מונחה עצמים במסלול ה-JavaScript של Coddy. שיעור 30 מתוך 56.

כשהפרויקט שלך גדל, ריכוז כל המחלקות בקובץ אחד הופך לבלגן. דמיין 10 מחלקות בקובץ אחד — קשה למצוא את הקוד ולתחזק אותו.

כבר למדנו איך לארגן קוד באמצעות מודולים — ייצוא וייבוא של פונקציות ומשתנים. עם מחלקות, ההיגיון והתחביר זהים! אפשר לייצא מחלקות מקובץ אחד ולייבא אותן לקובץ אחר, בדיוק כפי שעשינו עם פונקציות.

בואו נתרגל ארגון של מחלקות במודולים כדי לשמור על הקוד שלנו נקי וקל לניהול.

לדוגמה:

איך זה עובד:

קובץ 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"

אתגר

יש לך מערכת לחנות מוצרי אלקטרוניקה המאורגנת במודולים. המחלקות Laptop ו-Smartphone נוצרות בקבצים נפרדים, אבל צריך להפוך אותן לזמינות בקבצים אחרים.

המשימה שלך:

ייצא את המחלקות (השתמש בייצוא בשמות — לא בייצוא ברירת מחדל):
- ב-laptop.js: הוסף export כדי להפוך את המחלקה Laptop לזמינה
- ב-smartphone.js: הוסף export כדי להפוך את המחלקה Smartphone לזמינה
ייבא את המחלקות אל main.js:
- ייבא את המחלקה Laptop מתוך laptop.js
- ייבא את המחלקה Smartphone מתוך smartphone.js

נסו בעצמכם

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