Adı : JavaScript Modüllerinin Kullanımı

JavaScript'ın popüler hale gelmesiyle birlikte modüler programlama da önem kazandı. Modüller, kodun parçalara ayrılmasını ve birbirinden bağımsız çalışacak şekilde organize edilmesini sağlar. Bu da, daha düzenli, daha okunaklı ve daha yeniden kullanılabilir bir kod yazmayı kolaylaştırır.

Modüller, kodun belirli kısımlarını başka kısımlardan ayırmaya yarayan JavaScript dosyalarıdır. Bir modül, fonksiyonlar, değişkenler veya sınıflar içerebilir ve bunlar başka modüllerle birleştirilerek daha büyük bir uygulama oluşturulabilir.

Modüllerin Faydaları

1. Daha Temiz, Daha Organize Kod: Modüler programlama, dosyaları ve fonksiyonları düzenleyerek daha temiz ve okunaklı kod yazmayı sağlar.

2. Kolay Bakım: Kodun farklı bölümleri arasındaki bağımlılıklar daha iyi yönetildiği için, kodun bakımı daha kolay hale gelir.

3. Yeniden Kullanılabilirlik: Modüller, aynı kodun birden çok kez kullanılmasını sağlar. Bu da, aynı kodun farklı projeler için kullanılmasını kolaylaştırır.

4. Paralel Yüklenme: Modüler kod, aynı anda birden fazla JavaScript dosyası yükleyebildiği için web sayfalarının yüklenme hızını arttırır.

5. Çakışmaları Azaltır: Modüler yapının oluşturulması, farklı fonksiyonların ve değişkenlerin ayrı modüllerde toplanmasını sağlayarak, kod çakışmalarını azaltır.

JavaScript Modüllerinin Kullanımı Örnekleri

Birinci Örnek:
Sayfamızda bir modül uygulaması yapalım. Öncelikle \"index.html\" adlı bir HTML dosyası oluşturalım ve içine aşağıdaki kodları ekleyelim:

Merhaba JavaScript Modülleri

Sonra, \"app.js\" adında bir JavaScript dosyası oluşturalım ve içine aşağıdaki kodları ekleyelim:

// app.js

function SelamVer(isim) {
console.log(`Selam ${isim}!`);
}

function Selam(name) {
document.getElementById('app').innerHTML = `

Selam ${name}!

`;
}

export { SelamVer, Selam };

Yukarıdaki kodda SelamVer() ve Selam() adlı iki fonksiyon tanımlanır ve export anahtar kelimesi kullanılarak \"app.js\" modülüne dışarıya açılır. Bu iki fonksiyon, \"app.js\" modülünden herhangi bir dosya veya web sayfası tarafından erişilebilir hale getirilir.

Sonra, bir JavaScript dosyası oluşturup \"app.js\" modülündeki fonksiyonlara erişebiliriz.

// main.js

import { SelamVer, Selam } from './app.js';

SelamVer('JavaScript');
Selam('Modüller');

Yukarıdaki kodda, \"app.js\" modülündeki SelamVer() ve Selam() fonksiyonları import anahtar kelimesi kullanılarak içeriye alınarak kullanılır. Bunlar, \"main.js\" dosyasındaki SelamVer() ve Selam() fonksiyonları tarafından kullanılır.

İkinci Örnek:
Bu örnekte, daha büyük bir uygulama oluşturmak için birden çok modül kullanacağız.

Öncelikle \"index.html\" adlı bir HTML dosyası oluşturalım ve içine aşağıdaki kodları ekleyelim:

JavaScript Modülleri Kullanma Örnekleri

Sonra, \"selam.js\" adlı bir JavaScript dosyası oluşturalım ve içine aşağıdaki kodları ekleyelim:

// selam.js

export function Selam(name) {
return `

Selam ${name}!

`;
}

Yukarıdaki kodda Selam() adlı bir fonksiyon tanımlanır ve export anahtar kelimesi kullanılarak \"selam.js\" modülüne dışarıya açılır. Bu fonksiyon, başka bir kodda kullanılabilecek hale getirilir.

Sonra, \"sayfalar.js\" adlı bir JavaScript dosyası oluşturalım ve içine aşağıdaki kodları ekleyelim:

// sayfalar.js

import { Selam } from './selam.js';

function Anasayfa() {
document.getElementById('app').innerHTML = Selam('JavaScript');
}

function Hakkimizda() {
document.getElementById('app').innerHTML = Selam('Hakkımızda Sayfası');
}

export { Anasayfa, Hakkimizda };

Yukarıdaki kodda Anasayfa() ve Hakkimizda() adlı iki fonksiyon tanımlanır ve Selam() fonksiyonunu içeriye alır. Bu fonksiyonlar export anahtar kelimesi kullanılarak \"selam.js\" modülüne dışarıya açılır.

Sonra, \"main.js\" adlı bir JavaScript dosyası oluşturalım ve içine aşağıdaki kodları ekleyelim:

// main.js

import { Anasayfa, Hakkimizda } from './sayfalar.js';

window.addEventListener('hashchange', () => {
if (window.location.hash === \"#anasayfa\") {
Anasayfa();
} else if (window.location.hash === \"#hakkimizda\") {
Hakkimizda();
}
});

Bu kodda, sayfa yönlendirmeleri için window.addEventListener() fonksiyonu kullanılıyor. Eğer sayfa \"#anasayfa\" adresine yönlendirilirse Anasayfa() fonksiyonu, \"#hakkimizda\" adresine yönlendirilirse Hakkimizda() fonksiyonu çalışır.

Sık Sorulan Sorular

1- JavaScript modülleri değişken tanımlamak için nasıl kullanılır?
JavaScript modülleri, bir modül içindeki değişkenler için genellikle export anahtar kelimesi kullanır. Bir değişkeni diğer kod dosyalarında kullanılabilir hale getirmek için \"export\" anahtar kelimesi kullanılır ve diğer kod dosyalarında, \"import\" ile içeri aktarılır.

2- Dışa aktarılan bir modül modül içinde başka bir modülü içeri aktarabilir mi?
Evet, bir modül, başka bir modülü içeri aktarabilir ve onu kendi fonksiyonlarında kullanabilir.

3- Bir modül başka bir modülü birden fazla kez içeri aktarabilir mi?
Evet, bir modül başka bir modülü birden fazla kez içeri aktarabilir. Bu, kodu aynı modülü birden fazla yerde kullanmak için kolaylaştırır.

4- Bir modül listeden birden fazla değişkeni export edebilir mi?
Evet, bir modül, bir listeden birden fazla değişkeni export edebilir ve diğer modüllerde bu değişkenleri kullanabilir. Ancak, bu yöntem, çok sayıda değişkenleri içeriye aktarırken hata yapma olasılığı daha fazla olduğu için tercih edilmez."