Modüller, giriş

Uygulamalarımız büyüdükçe, onu dosyalar halinde bölmek isteriz. Bu dosyalar modül olarak isimlendirilir. Bir modül genellikle bir sınıf ya da kullanışlı fonksiyonları barındıran bir kütüphane içerir.

Uzun bir süredir JavaScript’te dil seviyesinde bir modül sözdizimi bulunmuyordu. Bu bir sorun değildi, çünkü başlangıçta program parçaları (scripts) küçük ve basitti. Dolayısıyla modüler yapıya ihtiyaç yoktu.

Ancak zamanla yazılan programlar karmaşıklaşınca, JavaScript topluluğu kodu modüller şeklinde organize etmenin çeşitli yollarını buldu.

Örneğin:

AMD – en eski modül sistemlerinden biri, başlangıçta require.js kütüphanesince gerçekleştirildi.
CommonJS – Node.js sunucusu için yaratılan modül sistemi.
UMD – geniş kapsamlı bir modül sistemi, AMD ve CommonJS ile uyumlu.

Artık tüm bu sistemlerin kullanımı yavaş yavaş azalmaktadır ancak yine de eski programlarda karşımıza çıkabilmektedirler. Dil seviyesindeki modül sistemi 2015 yılında standartlaştı ve o zamandan beri kademeli olarak evirilip, bugün başlıca tarayıcılar ve Node.js tarafından desteklenir hale geldi.

Modül nedir?

Modül sadece bir dosyadır, tek bir program. Bu kadar basit.

export ve import yönergeleri modüller arasında işlevselliğin yer değiştirmesini sağlar:

export anahtar kelimesi tanımlandıkları dosyanın dışında da ulaşılmak istenen değişken ve fonksiyonları etiketler.
import başka modüldeki değişken ve fonksiyonların içeri aktarılmasına imkan tanır.

Örneğin, bir fonksiyonu dışarı aktaran bir sayHi.js dosyası varsa:

          // 📁 sayHi.js
export function sayHi(user) {
  alert(`Merhaba, ${user}!`);
}
        

…Daha sonra başka bir dosya bunu içeri aktarıp, kullanabilir:

          // 📁 main.js
import {sayHi} from './sayHi.js';

alert(sayHi); // fonksiyon...
sayHi('John'); // Merhaba, John!
        

Bu derste dilin kendisine odaklanacağız, ama tarayıcıyı gösterim ortamı olarak kullanacağımız için modüllerin tarayıcıda nasıl çalıştığına bakalım.

Modülleri kullanabilmek için, <script> etiketinin type niteliğini <script type="module">, şeklinde ayarlamalıyız:

Sonuç

say.js

index.html

export function sayHi(user) {
  return `Hello, ${user}!`;
}

<!doctype html>
<script type="module">
  import {sayHi} from './say.js';

  document.body.innerHTML = sayHi('John');
</script>

Tarayıcı içeri aktarılanları otomatik olarak getirir, değerlendirir ve programı çalıştırır.

Temel modül özellikleri

Sıradan programlara göre modüllerde ne farklıdır?

Hem tarayıcı hem de sunucu taraflı JavaScript için geçerli temel özellikler vardır.