Rääkige mustripõhise disaini kohta, mida olete oma…

Kasutatud järgmised disainimustrid:

MVC (Model-View-Controller): Rakenduse loogika jaguneb. Mudel haldab andmeid, Vaade vastutab kuvamise eest ning Kontroller töötleb kasutaja interaktsiooni ja uuendab Mudelit või Vaadet. Kasutatud Angularis, kus komponendid osaliselt rakendavad seda ideed.
MVVM (Model-View-ViewModel): sarnane MVC-le, kuid toob sisse ViewModeli vahepealseks kihiks Vaate ja Mudeli vahel. ViewModel sisaldab äriloogikat andmete kuvamiseks ja kasutaja tegevuste töötlemiseks. Kasutatud aktiivselt Reacti ja Vuex-i (Vue) puhul, kus rakenduse seisund on tsentraliseeritud.

// Reaktiivsuse näide Reactis useState kasutades
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // useState - MVVM osa

  const increment = () => {
    setCount(count + 1); // Seisundi uuendamine setteriga
  };

  return (
    <div>
      <p>Count: {count}</p> {/* Seisundi kuvamine */}
      <button onClick={increment}>Increment</button> {/* Tegevus, mis mõjutab seisundit */}
    </div>
  );
}

Komponendi muster: kasutajaliidese jagamine sõltumatuteks, taaskasutatavateks komponentideks. Iga komponent inkapsuleerib oma loogika, märgistus ja stiilid. Põhineb kaasaegsetel raamistikul, nagu React, Vue ja Angular.

// Näide lihtsast React komponendist
function Button(props) {
  return (
    <button className="my-button" onClick={props.onClick}>
      {props.label}
    </button>
  );
}

Adapter (Adapter): muudab ühe klassi liidese teiseks, mida kliendid ootavad. Võimaldab töötada mittesobivate liidestega. Kasutatud kolmanda osapoole teekide või API-de integreerimisel erinevate meetodite signatuuridega.

// Adapteri näide, töötades erinevate API klientidega
class OldApi {
  getDataOld(id) {
    console.log(`Getting data from Old API for id ${id}`);
    return { id: id, name: `Item ${id}` };
  }
}

class NewApi {
  fetchDataNew(itemId) {
    console.log(`Fetching data from New API for item id ${itemId}`);
    return { itemId: itemId, label: `Product ${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) {
      const newData = this.apiClient.fetchDataNew(id);
      return { id: newData.itemId, name: newData.label };
    }
    throw new Error("Toetamatud API klienti ei leidu");
  }
}

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

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

Iteraator (Iterator): pakub võimalust järjestlikult ligi pääseda koostisega objekti elementidele, ilma avaldamata selle sisemist esitusviisi. Kasutatakse tsüklites (for...of) ja massiivide meetodites (forEach, map, filter).

// Näide JavaScripti iteratsioonist
const numbers = [1, 2, 3, 4, 5];

// Otse iteratori saamine
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 }

// Iteraatori kasutamine for...of
for (const number of numbers) {
  console.log(number);
}

Dekoratsioon (Decorator): dünaamiliselt lisab objekti uued kohustused, võimaldades laiendada objekti funktsionaalsust selle struktuuri muutmata. Kasutatud Reactis HOC (Higher-Order Components) või Angular/TypeScript dekoratsioonides.

// React HOC näide
function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    console.log(`Komponent ${WrappedComponent.name} renderdatud propsidega:`, props);
    return <WrappedComponent {...props} />;
  };
}

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

// Täiustatud komponendi kasutamine
// <EnhancedButton label="Cliki mind" onClick={() => console.log('Klõpsatud!')} />

Singleton (Üksik): tagab, et klassil on ainult üks eksemplar ning pakub globaalset juurdepääsu sellele. Kasutatud globaalse oleku haldamiseks või ühe teenuse (nt logimise, konfiguratsiooni) eksemplari loomiseks.

// Singletoni näide
class ConfigManager {
  constructor() {
    if (ConfigManager.instance) {
      return ConfigManager.instance;
    }
    this.settings = {}; // Seadete initsialiseerimine
    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 (üks ja sama eksemplar)

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

Fabrika meetod (Factory Method): määratleb liidese objekti loomiseks, kuid lubab alamklassidel otsustada, millist objekti luua. Kasutatud erinevat tüüpi kasutajaliidese elementide või objektide loomiseks konfiguratsiooni põhjal.

Strateegia (Strategy): määratleb algoritmide perekonna, inkapsuleerib igaühe ning muudab need vahetatavateks. Annab võimaluse algoritmi muuta sõltumatult klientidest, kes seda kasutavad. Kasutatud erinevate andmete sorteerimise, vormide valideerimise või sündmuste töötlemise lähenemisviiside rakendamiseks.

Nende mallide kasutamine aitas luua struktureeritumat, modulaarsemat, testitavamat ja hooldatavamat koodi.

Rääkige mustripõhise disaini kohta, mida olete oma arenduses kasutanud.