Rivojlanishda foydalanilgan shablon loyihasi haqida…

Quyidagi dizayn shablonlarini ishlatdim:

MVC (Model-View-Controller): Ilovaning mantiqini ajratish. Model ma'lumotlarni boshqaradi, View ko'rsatish uchun javobgar va Controller foydalanuvchi bilan o'zaro aloqani boshqaradi va Model yoki View ni yangilaydi. Angularda qo'llanilgan, bu yerda komponentlar bu ideologiyani qisman amalga oshiradi.

MVVM (Model-View-ViewModel): MVC ga o'xshash, lekin ViewModel ni View va Model o'rtasida vositachi sifatida kiritadi. ViewModel biznes mantiqini saqlaydi, ma'lumotlarni ko'rsatish va foydalanuvchi harakatlarini qayta ishlash uchun. React va Vuex (Vue) bilan faol ishlatilgan, bu yerda ilova holati markazlashtirilgan.

// Reactda useState bilan reaktivlik misoli
import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1); // Holatni yangilash setter orqali
  };

  return (
    <div>
      <p>Count: {count}</p> {/* Holatni ko'rsatish */}
      <button onClick={increment}>Increment</button> {/* Holatga ta'sir qiluvchi harakat */}
    </div>
  );
}

Komponent shabloni: Foydalanuvchi interfeysini mustaqil, qayta ishlatiladigan komponentlarga bo'lish. Har bir komponent o'z mantiqini, markup va uslublarini inkapsulyatsiya qiladi. React, Vue va Angular kabi zamonaviy freymvorklarning asosidir.
```
// Oddiy React komponenti misoli
function Button(props) {
  return (
    <button className="my-button" onClick={props.onClick}>
      {props.label}
    </button>
  );
}
```

Adapter (Moslashtiruvchi): Bir sinfning interfeysini mijozlar kutadigan boshqa interfeysga o'zgartiradi. Bir xil bo'lmagan interfeyslar bilan ishlash imkonini beradi. Uchinchi tomon kutubxonalar yoki APIlarni turli metod sathlari bilan integratsiya qilish uchun qo'llaniladi.

// Turli API mijozlari bilan ishlash uchun adapter misoli
class OldApi {
  getDataOld(id) {
    console.log(`Old API dan ma'lumot olish uchun id ${id}`);
    return { id: id, name: `Item ${id}` };
  }
}

class NewApi {
  fetchDataNew(itemId) {
    console.log(`Yangi API dan ma'lumot olish uchun id ${itemId}`);
    return { itemId: itemId, label: `Mahsulot ${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("Qo'llab-quvvatlanmaydigan API mijoz" );
  }
}

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

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

Iterator (Takrorlovchi): Murakkab ob'ekt elementlariga ketma-ket kirish uchun usul taqdim etadi, uning ichki taqdimotini ochmasdan. for...of tsikllarida va massiv metodlarida (forEach, map, filter) ishlatiladi.

// JavaScriptda iteratordan foydalanish misoli
const numbers = [1, 2, 3, 4, 5];

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 (const number of numbers) {
  console.log(number);
}

Dekorator (Dekorator): Ob'ektga dinamik ravishda yangi vazifalar qo'shadi, ob'ektning funksionalligini kengaytirishga imkon beradi, uning tuzilishini o'zgartirmasdan. Reactda HOC (Higher-Order Components) yoki Angular/TypeScriptda dekoratorlar sifatida ishlatiladi.

// Reactda Higher-Order Component (HOC) misoli
function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    console.log(`Component ${WrappedComponent.name} render qildi, props:`, props);
    return <WrappedComponent {...props} />;
  };
}

// HOC ni qo'llash
const EnhancedButton = withLogging(Button);

// Yaxshilangan komponentdan foydalanish
// <EnhancedButton label="Bosish" onClick={() => console.log('Bosildi!')} />

Singleton (Yagona): Bir sinfning faqat bitta nusxasi bo'lishini ta'minlaydi va unga global kirish nuqtasini taqdim etadi. Global holatni boshqarish yoki yagona xizmat nusxasini yaratish uchun ishlatiladi (masalan, loglash yoki konfiguratsiya xizmati).

// Singleton shabloni misoli
class ConfigManager {
  constructor() {
    if (ConfigManager.instance) {
      return ConfigManager.instance;
    }
    this.settings = {}; // Sozlamalarni boshlash
    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 (bir xil nusxa)

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

Fabrikatsiya metodi (Factory Method): Interfeysini belgilaydi, lekin ob'ektni yaratish uchun subklasslarga qaror qilish imkonini beradi. UI elementlarining turli turlarini yoki konfiguratsiyaga asoslangan ob'ektlarni yaratishda qo'llaniladi.
Stratejiya (Strategy): Algoritmlarning oilasini belgilaydi, har birini inkapsulyatsiya qiladi va o'zaro almashtiriladigan qiladi. Bu algoritmni mijozlardan mustaqil ravishda o'zgartirish imkonini beradi. Ma'lumotlarni saralash, formalarni validatsiya qilish yoki voqealarni boshqarish uchun turli yondashuvlarni amalga oshirishda ishlatiladi.

Ushbu shablonlardan foydalanish kodni yanada strukturali, modulli, test qilinadigan va qo'llab-quvvatlanadigan qilishga yordam berdi.

Rivojlanishda foydalanilgan shablon loyihasi haqida gapiring.