Ispričaj mi o šablonskom projektovanju koje si…

Koristio sam sledeće obrasce dizajna:

MVC (Model-View-Controller): Podela logike aplikacije. Model upravlja podacima, Prikaz je odgovoran za prikaz, a Kontroler obrađuje interakciju korisnika i ažurira Model ili Prikaz. Koristio u Angular-u, gde delovi delimično implementiraju ovu ideologiju.

MVVM (Model-View-ViewModel): Slično MVC-u, ali uvodi ViewModel kao posrednika između Prikaza i Modela. ViewModel sadrži poslovnu logiku za prikazivanje podataka i obradu akcija korisnika. Aktivno koristio sa React-om i Vuex-om (Vue), gde je stanje aplikacije centralizovano.

// Primer reaktivnosti u React-u sa useState
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // useState je deo MVVM mehanizma

  const increment = () => {
    setCount(count + 1); // Ažuriranje stanja putem settera
  };

  return (
    <div>
      <p>Broj: {count}</p> {/* Prikaz stanja */}
      <button onClick={increment}>Povećaj</button> {/* Akcija koja utiče na stanje */}
    </div>
  );
}

Komponentni obrazac: Podela korisničkog interfejsa na nezavisne, ponovo upotrebljive komponente. Svaka komponenta enkapsulira svoju logiku, strukturu i stilove. Osnova je modernih okvira kao što su React, Vue i Angular.
```
// Primer jednostavne React komponente
function Button(props) {
  return (
    <button className="my-button" onClick={props.onClick}>
      {props.label}
    </button>
  );
}
```

Adapter (Prilagođavač): Pretvara interfejs jedne klase u drugu, koji očekuju klijenti. Omogućava rad sa klasama sa nespojivim interfejsima. Koristio za integraciju spoljašnjih biblioteka ili API-ja sa različitim potpisima metoda.

// Primer adaptera za rad sa različitim API klijentima
class OldApi {
  getDataOld(id) {
    console.log(`Dobavljanje podataka sa Old API za id ${id}`);
    return { id: id, name: `Stavka ${id}` };
  }
}

class NewApi {
  fetchDataNew(itemId) {
    console.log(`Preuzimanje podataka sa New API za stavku id ${itemId}`);
    return { itemId: itemId, label: `Proizvod ${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) {
      // Pretvaranje podataka iz novog formata
      const newData = this.apiClient.fetchDataNew(id);
      return { id: newData.itemId, name: newData.label };
    }
    throw new Error("Nepodržani API klijent");
  }
}

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

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

Iterater (Iterator): Omogućava sekvencionalni pristup elementima složenog objekta, ne otkrivajući njegovu unutrašnju strukturu. Koristi se u petljama (for...of) i metodama nizova (forEach, map, filter).

// Primer korišćenja iteratora u JavaScript-u
const brojevi = [1, 2, 3, 4, 5];

// Eksplicitno dobijanje iteratora
const iterator = brojevi[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 }

// Korišćenje iteratora u for...of
for (const broj of brojevi) {
  console.log(broj);
}

Dekorator (Decorator): Dinamički dodaje nove obaveze objektu, omogućavajući proširenje funkcionalnosti objekta bez promene njegove strukture. Koristio u vidu HOC (Higher-Order Components) u React-u ili dekoratora u Angular/TypeScript-u.

// Primer Higher-Order Component (HOC) u React-u
function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    console.log(`Komponent ${WrappedComponent.name} renderovan sa props:`, props);
    return <WrappedComponent {...props} />;
  };
}

// Primena HOC
const EnhancedButton = withLogging(Button);

// Korišćenje poboljšane komponente
// <EnhancedButton label="Klikni" onClick={() => console.log('Kliknuto!')} />

Singleton (Ostalo): Garantuje da klasa ima samo jedan primerak i pruža globalnu tačku pristupa. Koristio za upravljanje globalnim stanjem aplikacije ili za kreiranje jedinstvenog primera servisa (npr. servis za logovanje, konfiguraciju).

// Primer Singleton obrasca
class ConfigManager {
  constructor() {
    if (ConfigManager.instance) {
      return ConfigManager.instance;
    }
    this.settings = {}; // Inicijalizacija podešavanja
    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 (isti primerak)

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

Fabrika metoda (Factory Method): Definiše interfejs za kreiranje objekta, ali omogućava podklasama da odluče koji objekat da kreiraju. Koristio za kreiranje različitih tipova elemenata korisničkog interfejsa ili objekata na osnovu konfiguracije.
Strategija (Strategy): Definiše porodicu algoritama, enkapsulira svaki od njih i čini ih zamenjivim. Omogućava algoritmu da varira nezavisno od klijenata koji ga koriste. Koristio za implementaciju različitih pristupa sortiranja podataka, validacije formi ili obrade događaja.

Korišćenje ovih obrazaca pomoglo je u stvaranju strukturiranijeg, modularnijeg, testabilnijeg i održivijeg koda.

Ispričaj mi o šablonskom projektovanju koje si koristio u svom razvoju.