Theme.js Kullanımı

Bu döküman, tema geliştirme sürecinde /assets/js/theme.js dosyasının kullanımını ayrıntılı bir şekilde açıklamaktadır. Ayrıca, global değişkenler, callback’ler ve kontrollü kod yazımı gibi önemli konulara değinilmektedir.

Genel Açıklama

Her temanın kök dizininde bulunan /assets/js/theme.js dosyası, tema özelinde JavaScript kodlarının yazıldığı ana dosyadır. Bu dosya, temaya özgü dinamik işlevsellikleri tanımlamak ve kullanıcı arayüzü etkileşimlerini yönetmek için kullanılır. Tema dışı genel kodlar için ise izleme kodları veya diğer global JavaScript dosyaları tercih edilebilir.

Theme.js Dosyasının Amacı

theme.js, temanın işlevselliğini özelleştirmek için kullanılan birincil JavaScript dosyasıdır. Aşağıdaki durumlarda bu dosya kullanılır:

  • Tema özelinde DOM manipülasyonları.
  • Kullanıcı etkileşimlerine yanıt veren olay dinleyicileri.
  • Tema ile ilgili API çağrıları veya veri işleme.

Not: Tema dışı genel işlevler için izleme kodları gibi dosyalar kullanılmalıdır.

Global Değişkenler ve Callback’ler

theme.js dosyasında, global değişkenler ve callback’ler sıkça kullanılır. Bu yapılar, tema genelinde erişilebilir veri ve fonksiyonellik sağlar.

Callback’ler

Callback fonksiyonları, belirli işlemler sonrası çalıştırılacak işlevleri tanımlamak için kullanılır. window['callbacks'] nesnesi, theme.js içinde erişilebilir ve tema özelinde özelleştirilebilir.

Örnek:

window['callbacks'].cart.add.push((data) => {
    console.log('Sepete eklendi:', data);
});

Kontrollü Kod Yazımı

JavaScript kodlarında en çok dikkat edilmesi gereken nokta, kontrollü yazım ilkesine uymaktır. Bu, kodun sağlamlığını artırır ve hataları önler. Özellikle DOM elemanlarıyla çalışırken, elemanın var olup olmadığını kontrol etmek kritik öneme sahiptir.

Kontrollü Kod Yazımı İlkeleri

  1. Eleman Kontrolü: Bir DOM elemanına erişmeden önce varlığını kontrol edin.
  2. Hata Yönetimi: Olası hataları yakalamak için try-catch blokları kullanın.
  3. Varsayılan Değerler: Değişkenlere varsayılan değerler atayarak beklenmedik durumları önleyin.
  4. Temiz Kod: Okunabilir ve modüler kod yazmaya özen gösterin.

Örnek: Eleman Kontrolü

Mesela burada buton seçtikten sonra if ile var olup olmadığını kontrol etmek gerekir. Bugün eklenen buton elementi yarın bir sebeple silinebilir. Silinmiş olsa bile burada hataya sebep olmaması gerekiyor.

const button = document.querySelector('#myButton');
if (button) {
    button.addEventListener('click', () => {
        console.log('Butona tıklandı');
    });
} else {
    console.warn('Buton bulunamadı');
}

Tema Dışı Kodlar için İzleme Kodları

Tema dışı genel işlevler için Ayarlar >> izleme kodları kullanılabilir. Bu kodlar, genellikle analitik, izleme veya üçüncü taraf entegrasyonları için kullanılır.

Örnek:

// Google Analytics izleme kodu
scriptAdd('https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y', () => {
    console.log('Google Analytics yüklendi');
});

Theme.js’de Örnek Kullanımlar

Aşağıda, theme.js dosyasında sıkça kullanılan bazı senaryolar ve örnek kodlar verilmiştir.

Örnek 1: Tema Özelinde Bildirim Gösterme

document.addEventListener('DOMContentLoaded', () => {
    const welcomeMessage = window['COMMON_LANG']['welcome'] || 'Hoş geldiniz';
    notify({
        text: welcomeMessage,
        class: 'info',
        duration: 5000
    });
});

Örnek 2: Buton Tıklama Olayı

const submitButton = document.querySelector('#submitButton');
if (submitButton) {
    submitButton.addEventListener('click', () => {
        request('POST', '/api/submit', { data: 'test' }, 'JSON')
            .then(response => {
                notify({
                    text: 'Başarılı!',
                    class: 'success',
                    duration: 3000
                });
            })
            .catch(error => {
                notify({
                    text: 'Hata oluştu',
                    class: 'danger',
                    duration: 3000
                });
            });
    });
}

Örnek 3: Tema Bileşeni Özelleştirme

components.favourite.add = (productId, message) => {
    // Özel favori ekleme mantığı
    console.log(`Ürün ${productId} favorilere eklendi`);
    if (message) {
        notify({
            text: 'Favorilere eklendi!',
            class: 'success',
            duration: 3000
        });
    }
};

İpuçları ve En İyi Uygulamalar

  1. Eleman Kontrolleri: Her zaman DOM elemanlarının varlığını kontrol edin (if (element) { ... }).
  2. Modülerlik: Kodlarınızı küçük, reusable fonksiyonlara ayırın.
  3. Hata Yönetimi: API çağrılarında ve DOM işlemlerinde hata yakalama mekanizmaları kullanın.
  4. Performans: Gereksiz olay dinleyicilerinden kaçının ve debounce/throttle gibi teknikler kullanın.
  5. Dokümantasyon: Kodlarınıza yorumlar ekleyerek okunabilirliği artırın.

Sonuç

/assets/js/theme.js dosyası, tema özelinde JavaScript kodlarının merkezi bir noktada toplanmasını sağlar. Global değişkenler, callback’ler ve bileşenlerle entegre çalışarak dinamik ve kullanıcı dostu bir deneyim sunar. Kontrollü kod yazımı, hata yönetimi ve modülerlik ilkelerine bağlı kalarak, theme.js içinde sağlam ve ölçeklenebilir kodlar yazılabilir. Yukarıdaki örnekler ve açıklamalar, tema geliştirme sürecinde theme.js dosyasının etkili bir şekilde nasıl kullanılacağını göstermektedir.