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

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"