Bölüm 13

Modüller

Gerçek dünyada, bir program yeni işlevlerin ihtiyaçlarını karşılamak için doğal olarak büyür. Büyüyen kod tabanının yapılandırılması ve koruması ek çalışma gerektirir. Gelecekte ödeyecek olsa da, bunu ihmal etmek daha cazip gelebilir. Gerçekte, uygulamanın karmaşıklığını artırır, çünkü sistem hakkında bütüncül bir anlayış oluşturmak zorunda kalırsınız ve herhangi bir parçayı izole bir şekilde incelemekte zorluk yaşarsınız. İkinci olarak, işlevselliğini kullanabilmek için düğümleri çözmek için daha fazla zaman harcamanız gerekmektedir.

Bu sorunları önlemek için modüller mevcuttur. Bir modül, hangi kod parçalarına bağlı olduğunu ve diğer modüller için hangi işlevselliği sağladığını belirtir. Başka bir module bağlı olan modüller dependencies(bağımlılıklar) olarak adlandırılır. Çeşitli modül kütüphaneleri, kodu modüllerde düzenlemek ve talep üzerine yüklenmek için mevcuttur.

• AMD - başlangıçta require.js tarafından kullanılan en eski modül sistemlerinden biridir.
• CommonJS - Node.js sunucusu için oluşturulan modül sistemi.
• UMD - AMD ve CommonJS ile uyumlu modül sistemi.

Modüller birbirlerini yükleyebilir ve işlevselliği değiş tokuş etmek ve birbirlerinin işlevlerini çağırmak için import ve export özel direktiflerini kullanır.

• export - mevcut modülün dışarıdan erişilebilir olmasını istediğiniz işlevleri ve değişkenleri etiketler
• import - dışarıdan modülden işlevselliği içe aktarır

Modüllerde import ve export mekanizmasını görelim. sayHi.js dosyasından sayHi fonksiyonun dışa aktarıldığını görüyoruz.

// 📁 sayHi.js
export const sayHi = (user) => {
  alert(`Hello, ${user}!`);
}

main.js dosyasında sayHi işlevi import direktifi yardımıyla içe aktarılır.

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

alert(sayHi); // function...
sayHi('Kelvin'); // Hello, Kelvin!

Burada import direktifi dosya yolunu içe aktararak modülü yükler ve sayHi değişkenine atar. Modüller iki şekilde dışa aktarılabilir: Named(Adlandırılmış) ve Default(Varsayılan). Ayrıca, Named dışa aktarmalar satır içi veya ayrı ayrı atanabilir.

// 📁 person.js 

// inlined named exports
export const name = "Kelvin";
export const age = 30;

// at once
const name = "Kelvin";
const age = 30;
export {name, age};

// 📁 message.js 
const message = (name, age) => {
    return `${name} is ${age} years old.`;
};
export default message;

Dışa aktarmaya bağlı olarak, iki şekilde içe aktarabiliriz. Named(Adlandırılmış) dışa aktarmalar süslü parantezler kullanılarak oluşturulurken, varsayılan dışa aktarmalar kullanılmaz.

import { name, age } from "./person.js"; // named export import
import message from "./message.js"; // default export import

Modüller atandığında, döngüsel bağımlılıktan kaçınmalıyız. Döngüsel bağımlılık, bir modülün B'ye, B'nin de doğrudan veya dolaylı olarak A'ya bağımlı olduğu durumdur.