Geliştirmenizde kullandığınız şablon tasarımı…

Tasarım kalıplarını şu şekilde kullandım:

MVC (Model-View-Controller): Uygulama mantığını ayırma. Model verileri yönetir, Görünüm gösterimden sorumludur ve Kontrolcü, kullanıcı etkileşimini işler ve Model veya Görünüm'ü günceller. Angular'da bu ideolojiyi kısmen uyguladım.

MVVM (Model-View-ViewModel): MVC'ye benzer, ancak ViewModel'i Görünüm ile Model arasında aracı olarak tanıtır. ViewModel, veri gösterimi ve kullanıcı eylemlerinin işlenmesi için iş mantığını içerir. React ve Vuex (Vue) ile aktif olarak kullandım, burada uygulama durumu merkezi olarak yönetilir.

// React'ta useState kullanarak reaktivite örneği
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // useState MVVM mekanizmasının bir parçasıdır

  const increment = () => {
    setCount(count + 1); // Durum güncellemesi setter ile
  };

  return (
    <div>
      <p>Sayaç: {count}</p> {/* Durumu göster */}
      <button onClick={increment}>Arttır</button> {/* Durumu etkileyen eylem */}
    </div>
  );
}

Bileşen kalıbı: Kullanıcı arayüzünü bağımsız ve yeniden kullanılabilir bileşenlere ayırma. Her bileşen kendi mantığını, işaretlemesini ve stillerini kapsüller. React, Vue ve Angular gibi modern çerçevelerin temelidir.
```
// Basit bir React bileşeni örneği
function Button(props) {
  return (
    <button className="my-button" onClick={props.onClick}>
      {props.label}
    </button>
  );
}
```

Adaptör (Adapter): Bir sınıfın arayüzünü, müşterilerin beklediği başka bir arayüze dönüştürür. Uyumsuz arayüzlere sahip sınıfların birlikte çalışmasını sağlar. Üçüncü taraf kütüphaneler veya API'leri farklı metod imzalarıyla entegre etmek için kullandım.

// Farklı API istemcileriyle çalışmak için adaptör örneği
class OldApi {
  getDataOld(id) {
    console.log(`Old API'den veri alınıyor, id ${id} için`);
    return { id: id, name: `Item ${id}` };
  }
}

class NewApi {
  fetchDataNew(itemId) {
    console.log(`New API'den veri getiriliyor, öğe id ${itemId} için`);
    return { itemId: itemId, label: `Ürün ${itemId}` };
  }
}

class ApiAdapter {
  constructor(apiClient) {
    this.apiClient = apiClient;
  }

  getData(id) {
    if (this.apiClient instanceof OldApi) {
      return this.apiClient.getDataOld(id);
    } else if (this.apiClient instanceof NewApi) {
      // Yeni formatta veriyi dönüştürme
      const newData = this.apiClient.fetchDataNew(id);
      return { id: newData.itemId, name: newData.label };
    }
    throw new Error("Desteklenmeyen API istemcisi");
  }
}

const oldApiAdapter = new ApiAdapter(new OldApi());
console.log(oldApiAdapter.getData(1));

const newApiAdapter = new ApiAdapter(new NewApi());
console.log(newApiAdapter.getData(2));

İteratör (Iterator): Bir nesnenin bileşenlerine ardışık erişim sağlar, iç temsilini açığa çıkarmadan. Döngülerde (for...of) ve dizilerin metodlarında (forEach, map, filter) kullanılır.

// JavaScript'te iteratör kullanımı örneği
const numbers = [1, 2, 3, 4, 5];

// Açıkça iteratör elde etme
const iterator = numbers[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
// ...
console.log(iterator.next()); // { value: undefined, done: true }

// for...of ile iteratör kullanımı
for (const number of numbers) {
  console.log(number);
}

Dekoratör (Decorator): Bir nesneye dinamik olarak yeni sorumluluklar ekler, böylece nesnenin yapısını değiştirmeden işlevselliğini genişletir. React'te HOC (Yüksek Dereceli Bileşenler) veya Angular/TypeScript'te dekoratörler şeklinde kullandım.

// React'te HOC örneği
function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    console.log(`Bileşen ${WrappedComponent.name} props ile render edildi:`, props);
    return <WrappedComponent {...props} />;
  };
}

// HOC kullanımı
const EnhancedButton = withLogging(Button);

// Geliştirilmiş bileşenin kullanımı
// <EnhancedButton label="Tıkla" onClick={() => console.log('Tıklandı!')} />

Singleton (Tekil): Bir sınıfın yalnızca bir örneği olmasını sağlar ve ona küresel erişim noktası sağlar. Uygulamanın küresel durumunu yönetmek veya tek bir servis örneği oluşturmak için kullandım (örneğin, günlük kaydı servisi, yapılandırma).

// Singleton kalıbı örneği
class ConfigManager {
  constructor() {
    if (ConfigManager.instance) {
      return ConfigManager.instance;
    }
    this.settings = {}; // Ayarların başlatılması
    ConfigManager.instance = this;
  }

  setSetting(key, value) {
    this.settings[key] = value;
  }

  getSetting(key) {
    return this.settings[key];
  }
}

const config1 = new ConfigManager();
const config2 = new ConfigManager();

console.log(config1 === config2); // true (aynı örnek)

config1.setSetting('apiUrl', 'https://api.ornek.com');
console.log(config2.getSetting('apiUrl')); // https://api.ornek.com

Fabrika Metodu (Factory Method): Bir nesne oluşturmak için arayüz tanımlar, ancak alt sınıflara hangi nesnenin oluşturulacağını karar verme yetkisi verir. Kullanım alanları arasında farklı kullanıcı arayüzü öğeleri veya yapılandırmaya bağlı nesneler oluşturmak yer alır.
Strateji (Strategy): Bir algoritma ailesini tanımlar, her birini kapsüller ve birbirlerinin yerine kullanılabilir hale getirir. Bu, algoritmanın müşterilerden bağımsız olarak değişmesine olanak tanır. Veri sıralama, form doğrulama veya olay işleme gibi farklı yaklaşımları uygulamak için kullandım.

Bu desenlerin kullanımı, daha yapılandırılmış, modüler, test edilebilir ve sürdürülebilir kodlar oluşturmama yardımcı oldu.

Geliştirmenizde kullandığınız şablon tasarımı hakkında bana bilgi verin.