Tổ chức các lớp thành module

Thuộc phần Lập trình hướng đối tượng trong hành trình JavaScript của Coddy. Bài học 30 trên 56.

Khi dự án phát triển, việc để tất cả các lớp trong một tệp sẽ trở nên rối rắm. Hãy tưởng tượng có 10 lớp trong một tệp, bạn sẽ khó tìm và bảo trì code.

Chúng ta đã học cách tổ chức code bằng module: xuất và nhập hàm và biến. Với lớp, logic và cú pháp cũng tương tự! Bạn có thể xuất lớp từ một tệp rồi nhập chúng vào tệp khác, giống như cách chúng ta đã làm với hàm.

Hãy cùng luyện tập cách sắp xếp các lớp vào module để giữ cho code gọn gàng và dễ quản lý.

Ví dụ:

Cách hoạt động:

Tệp 1: furniture-base.js (Xuất lớp cơ sở)

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

Tệp 2: chair.js (Nhập và mở rộng)

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

Tệp 3: main.js (Sử dụng tất cả cùng nhau)

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"

Thử thách

Bạn có một hệ thống cửa hàng điện tử được tổ chức thành các module. Các lớp Laptop và Smartphone được tạo trong các tệp riêng, nhưng cần được cung cấp cho các tệp khác.

Nhiệm vụ của bạn:

Xuất các lớp (dùng named export, không dùng default):
- Trong laptop.js: Thêm export để cung cấp lớp Laptop
- Trong smartphone.js: Thêm export để cung cấp lớp Smartphone
Nhập các lớp vào main.js:
- Nhập lớp Laptop từ laptop.js
- Nhập lớp Smartphone từ smartphone.js

Tự làm thử

// TODO: Nhập lớp Laptop từ laptop.js

// TODO: Nhập lớp Smartphone từ smartphone.js


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

console.log(myLaptop.type);      // Đầu ra: "laptop"
console.log(myPhone.type);       // Đầu ra: "smartphone"