CodeBlanks Logo Icon CodeBlanks

Modül olarak dışa aktarma

JavaScript kursu · İleri seviye · Ders 22/100

Sınıfı hem named hem default export ile dışa aktarırsın.

Adlı dışa aktarım

Sınıfı başka dosyalarda kullanmak için onu modülden dışa aktarmalıyız. ES modüllerinde iki yol var. İlki adlı dışa aktarım: export { Collection }. Bu, içe aktaran tarafın aynı adla istemesini gerektirir.

Adlı aktarım bir modülde birden fazla olabilir; böylece küçük parçaları tek dosyada toplayıp ayrı ayrı sunabiliriz. İçe aktarma tarafı import { Collection } yazar.

Varsayılan dışa aktarım

İkinci yol varsayılan dışa aktarım: export default Collection. Bir modülde yalnızca bir varsayılan olur; içe aktaran taraf istediği adı verebilir, süslü parantez olmadan yazar.

Adlı ve varsayılan aktarımı aynı dosyada bir arada kullanabiliriz. Bu esneklik kütüphaneleri hem isimle hem kısa adla kullanılabilir kılar. Biz ikisini de ekleyeceğiz.

Uygulama Sınıfı adlı ve varsayılan dışa aktar

Sınıfı modül olarak dışa aktar: hem adlı (export { Collection }) hem varsayılan (export default Collection) dışa aktarımı ekle.

Örnek çözümü göster
Adlı aktarım için export { Collection } yaz. Varsayılan için export default Collection yaz.

Örnek çözüm:
// Yardımcı kütüphane
class Collection {
  constructor() {
    this.items = [];
  }
  add(item) {
    this.items.push(item);
    return this;
  }
  remove(item) {
    const index = this.items.indexOf(item);
    if (index !== -1) {
      this.items.splice(index, 1);
    }
    return this;
  }
  find(callback) {
    for (const item of this.items) {
      if (callback(item)) {
        return item;
      }
    }
    return undefined;
  }
}

export { Collection };
export default Collection;

Kendini test et

  1. export default Collection neyi sağlar?

    • Sınıfı gizler
    • Sınıfı static yapar
    • Sınıfa adlı aktarım verir
    • Modüle varsayılan aktarım verir
    Cevabı göster

    Modüle varsayılan aktarım verir — Doğru! export default modülün varsayılan birimini belirler.

  2. Adlı dışa aktarımı yaz

    export ____;
    Cevabı göster
    export { Collection };
  3. Dışa ve içe aktarımı eşleştir

    export { X }
    adlı dışa aktarım
    export default X
    varsayılan dışa aktarım
    import X
    varsayılan içe aktarım
    import { X }
    adlı içe aktarım

İleri seviye bölümündeki tüm dersler