Sınıfları Modüller Halinde Düzenleme

Coddy'nin JavaScript Journey'sinin Nesne Yönelimli Programlama bölümünün bir parçası — ders 30 / 56.

Projeniz büyüdüğünde, tüm sınıfların tek bir dosyada olması karmaşık bir hal alır. Tek bir dosyada 10 sınıf olduğunu hayal edin; kodu bulmak ve sürdürmek zorlaşır.

Kodları modüllerle nasıl organize edeceğimizi - fonksiyonları ve değişkenleri dışa aktarmayı (exporting) ve içe aktarmayı (importing) - zaten öğrendik. Sınıflarda da mantık ve söz dizimi aynıdır! Tıpkı fonksiyonlarda yaptığımız gibi, sınıfları bir dosyadan dışa aktarabilir ve başka bir dosyaya içe aktarabilirsiniz.

Kodumuzu temiz ve yönetilebilir tutmak için sınıfları modüller halinde düzenleme pratiği yapalım.

Örneğin:

Nasıl Çalışır:

Dosya 1: furniture-base.js (Temel sınıfı dışa aktarın)

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

Dosya 2: chair.js (İçe aktar ve genişlet)

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

Dosya 3: main.js (Hepsini birlikte kullanın)

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());  // "ahşap mobilya"
console.log(myTable.describe());  // "cam mobilya"

Görev

Modüllere ayrılmış bir elektronik mağazası sisteminiz var. Laptop ve Smartphone sınıfları ayrı dosyalarda oluşturulmuştur ancak diğer dosyaların kullanımına sunulmaları gerekmektedir.

Göreviniz:

Sınıfları dışa aktarın (varsayılan değil, adlandırılmış dışa aktarmalar kullanın):
- laptop.js içinde: Laptop sınıfını kullanılabilir hale getirmek için export ekleyin
- smartphone.js içinde: Smartphone sınıfını kullanılabilir hale getirmek için export ekleyin
Sınıfları içe aktarın (main.js dosyasında):
- Laptop sınıfını laptop.js dosyasından içe aktarın
- Smartphone sınıfını smartphone.js dosyasından içe aktarın

Kopya kağıdı

Sınıflar, fonksiyonlar ve değişkenlerle aynı sözdizimi kullanılarak modüller arasında dışa aktarılabilir ve içe aktarılabilir.

Bir sınıfı dışa aktarma:

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

Bir sınıfı içe aktarma ve genişletme:

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

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

Birden fazla sınıfı içe aktarma:

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

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

Kendin dene

// YAPILACAK: Laptop sınıfını laptop.js dosyasından içe aktarın

// YAPILACAK: Smartphone sınıfını smartphone.js dosyasından içe aktarın


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

console.log(myLaptop.type);      // Çıktı: "laptop"
console.log(myPhone.type);       // Çıktı: "smartphone"