İnkişafınızda istifadə etdiyiniz şablon dizaynı…

Aşağıdakı dizayn nümunələrindən istifadə etmişəm:

MVC (Model-Görünüş-Kontrol): Tətbiqin məntiqinin bölünməsi. Model məlumatları idarə edir, Görünüş göstərmə üçün cavabdehdir və Kontrol istifadəçi ilə qarşılıqlı əlaqəni işləyir və Model və ya Görünüşü yeniləyir. Angular-da istifadə etdim, burada komponentlər bu ideologiyanı qismən həyata keçirir.

MVVM (Model-Görünüş-ViewModel): MVC-yə bənzəyir, lakin Görünüş və Model arasında vasitəçi kimi ViewModel-i daxil edir. ViewModel məlumatların göstərilməsi və istifadəçi əməliyyatlarının işlənməsi üçün biznes məntiqini ehtiva edir. React və Vuex (Vue) ilə işləyərkən aktiv istifadə etdim, burada tətbiqin vəziyyəti mərkəzləşdirilmiş şəkildə idarə olunur.

// React-də useState istifadə edərək reaktivlik nümunəsi
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // useState MVVM mexanizminin bir hissəsidir

  const increment = () => {
    setCount(count + 1); // vəziyyəti yeniləmək üçün setter
  };

  return (
    <div>
      <p>Sayı: {count}</p> {/* vəziyyətin göstərilməsi */}
      <button onClick={increment}>Artır</button> {/* vəziyyətə təsir edən əməliyyat */}
    </div>
  );
}

Komponent nümunəsi: İstifadəçi interfeysini müstəqil, təkrar istifadə oluna bilən komponentlərə bölür. Hər komponent öz məntiqini, markup və stillərini kapsülləyir. Bu, React, Vue və Angular kimi müasir çərçivələrin əsasını təşkil edir.
```
// Sadə React komponent nümunəsi
function Button(props) {
  return (
    <button className="my-button" onClick={props.onClick}>
      {props.label}
    </button>
  );
}
```

Adapter (Adapter): Bir sinifin interfeysini digərinə çevirir ki, müştərilər onu gözləyirlər. Müxtəlif interfeyslərə malik siniflərin birlikdə işləməsinə imkan verir. Xarici kitabxanalar və ya API-lərlə inteqrasiya üçün istifadə etdim.

// Müxtəlif API müştəriləri ilə işləmək üçün adapter nümunəsi
class OldApi {
  getDataOld(id) {
    console.log(`Köhnə API-dən məlumat alınır, id ${id} üçün`);
    return { id: id, name: `Məhsul ${id}` };
  }
}

class NewApi {
  fetchDataNew(itemId) {
    console.log(`Yeni API-dən məlumat alınır, məhsul id ${itemId} üçün`);
    return { itemId: itemId, label: `Məhsul ${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 formatdan məlumatların çevrilməsi
      const newData = this.apiClient.fetchDataNew(id);
      return { id: newData.itemId, name: newData.label };
    }
    throw new Error("Dəstəklənməyən API müştərisi");
  }
}

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

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

Iterator (İterator): Mürəkkəb obyektin elementlərinə ardıcıl giriş imkanı verir, onun daxili təqdimatını açmadan. Döngülərdə (for...of) və massiv metodlarında (forEach, map, filter) istifadə olunur.

// JavaScript-də iterator istifadəsi nümunəsi
const numbers = [1, 2, 3, 4, 5];

// Aydın iterator əldə etmək
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 ilə iterator istifadəsi
for (const number of numbers) {
  console.log(number);
}

Decorator (Dekorator): Obyekti dinamik olaraq yeni vəzifələr əlavə edir, obyektin strukturunu dəyişmədən funksionallığını genişləndirməyə imkan verir. React-də HOC (Yüksək Səviyyəli Komponentlər) və ya Angular/TypeScript-də dekoratorlar şəklində istifadə etdim.

// React-də Yüksək Səviyyəli Komponent (HOC) nümunəsi
function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    console.log(`Komponent ${WrappedComponent.name} render olunur, props:`, props);
    return <WrappedComponent {...props} />;
  };
}

// HOC tətbiqi
const EnhancedButton = withLogging(Button);

// Gelişdirilmiş komponentdən istifadə
// <EnhancedButton label="Bas" onClick={() => console.log('Basıldı!')} />

Singleton (Odinok): Sinifin yalnız bir nümunəsinin olmasını təmin edir və ona qlobal giriş nöqtəsi təqdim edir. Qlobal vəziyyətin idarə olunması və ya xidmətin (məsələn, loglama və ya konfiqurasiya xidməti) tək nümunəsinin yaradılması üçün istifadə etdim.

// Odinok nümunəsi
class ConfigManager {
  constructor() {
    if (ConfigManager.instance) {
      return ConfigManager.instance;
    }
    this.settings = {}; // Parametrlərin ilkinləşdirilməsi
    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 (eyni nümunə)

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

Fabrika Metodu (Factory Method): Obraz yaradılması üçün interfeys müəyyən edir, lakin hansı obyektin yaradılacağını alt siniflər qərar verir. İstifadə etdim müxtəlif istifadəçi interfeysi elementlərinin və ya konfiqurasiyaya əsaslanan obyektlərin yaradılması üçün.
Strateji (Strategy): Alqoritmlərin ailəsini ehtiva edir, hər birini kapsülləyir və bir-birinin yerinə istifadə edilə bilər. Alqoritmin müştərilərdən asılı olmayaraq dəyişməsinə imkan verir. Məlumatların sıralanması, formaların doğrulanması və ya hadisələrin işlənməsi üçün müxtəlif yanaşmaların həyata keçirilməsi üçün istifadə etdim.

Bu nümunələr daha strukturlaşdırılmış, modul, test edilə bilən və dəstəklənən kod yazmağa kömək etdi.

İnkişafınızda istifadə etdiyiniz şablon dizaynı haqqında danışın.