Организация классов в модули

Часть раздела Объектно-ориентированное программирование путешествия по 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 созданы в отдельных файлах, но их необходимо сделать доступными для других файлов.

Ваша задача:

Экспортируйте классы (используйте именованный экспорт — не default):
- В laptop.js: Добавьте export, чтобы сделать класс Laptop доступным
- В smartphone.js: Добавьте export, чтобы сделать класс Smartphone доступным
Импортируйте классы в main.js:
- Импортируйте класс Laptop из laptop.js
- Импортируйте класс Smartphone из smartphone.js

Шпаргалка

Классы можно экспортировать и импортировать между модулями, используя тот же синтаксис, что и для функций и переменных.

Экспорт класса:

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

Импорт и расширение класса:

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"