Өзүңүздүн өнүгүшүңүздө колдонгон үлгү долбоорлоо…

Мен төмөнкү дизайн үлгүлөрүн колдонуп келдим:

MVC (Модель-Көрүнүш-Контроллер): Колдонмонун логикасын бөлүү. Модель маалыматтарды башкарат, Көрүнүш көрсөтүү үчүн жооптуу, ал эми Контроллер колдонуучу менен өз ара аракеттенүүнү иштетип, Модель же Көрүнүштү жаңыртат. Angularда колдонуп, бул идеологиянын жарым-жартылай ишке ашырылышын камсыз кылдым.

MVVM (Модель-Көрүнүш-ViewModel): MVCге окшош, бирок ViewModel'ди ортодогу булагы катары киргизет. ViewModel бизнес-логикасын камтыйт, ал маалыматтарды көрсөтүү жана колдонуучу аракеттерин иштетүү үчүн. React жана Vuex (Vue) менен активдүү колдонуп, тиркеменин абалын борборлоштурду.

// Reactте useState колдонуу менен реактивдиктин мисалы
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // useState - MVVM механизминин бөлүгү

  const increment = () => {
    setCount(count + 1); // Стейтти жаңыртуу, setter аркылуу
  };

  return (
    <div>
      <p>Санаа: {count}</p> {/* Стейтти көрсөтүү */}
      <button onClick={increment}>Көбөйтүү</button> {/* Стейтке таасир эткен аракет */}
    </div>
  );
}

Компоненттик үлгү: Колдонуучу интерфейсин көзкарандысыз, кайра колдонулчу компоненттерге бөлүү. Ар бир компонент өзүнүн логикасын, структурасын жана стилин камтыйт. React, Vue жана Angular сыяктуу заманбап фреймворктордун негизи.
```
// Жөнөкөй React компонентинин мисалы
function Button(props) {
  return (
    <button className="my-button" onClick={props.onClick}>
      {props.label}
    </button>
  );
}
```

Адаптер (Adapter): Бир класстын интерфейсин башкача кылып өзгөртөт, ал кардарлар күтүп жаткандай. Бир нече интерфейсти колдонгон класстар менен иштөө мүмкүнчүлүгүн берет. Чет элдик китепканалар же APIлер менен интеграциялоо үчүн колдонулат.

// Ар кандай API-клиенттер менен иштөө үчүн адаптердин мисалы
class OldApi {
  getDataOld(id) {
    console.log(`Old API'ден маалымат алуу, id ${id}`);
    return { id: id, name: `Элемент ${id}` };
  }
}

class NewApi {
  fetchDataNew(itemId) {
    console.log(`New API'ден маалымат алуу, item id ${itemId}`);
    return { itemId: itemId, label: `Продукт ${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("Колдоого алынбаган API кардар" );
  }
}

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

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

Итератор (Iterator): Бириккен объекттин элементтерине тартиб менен жетүүнүн жолун камсыздайт, анын ички түзүмүн ачпастан. Бул циклдерде (for...of) жана массивдердин методдорунда (forEach, map, filter) колдонулат.

// JavaScriptте iterator колдонуу мисалы
const numbers = [1, 2, 3, 4, 5];

// Ачык iterator алуу
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 }

// Iterator колдонуу for...of менен
for (const number of numbers) {
  console.log(number);
}

Декоратор (Decorator): Объектке жаңы милдеттерди динамикалык кошот, анын түзүмүн өзгөртпөстөн функцияларын кеңейтет. Reactта HOC (Higher-Order Components) же Angular/TypeScript-деги декораторлор түрүндө колдонулат.

// Reactта HOC мисалы
function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    console.log(`Компонент ${WrappedComponent.name} рендерделди, props:`, props);
    return <WrappedComponent {...props} />;
  };
}

// HOC колдонуу
const EnhancedButton = withLogging(Button);

// Жакшыртылган компонентти колдонуу
// <EnhancedButton label="Клик кыл" onClick={() => console.log('Клик кылынды!')} />

Ол (Singleton): Класс үчүн бир гана экземпляр бар экенин кепилдейт жана глобалдуу жетүүчү пункт камсыздайт. Бул глобалдык абалды башкаруу же бирдей кызматтын экземплярын түзүү үчүн колдонулат (мисалы, логгинг кызматтары, конфигурация).

// Ол үлгүсүнүн мисалы
class ConfigManager {
  constructor() {
    if (ConfigManager.instance) {
      return ConfigManager.instance;
    }
    this.settings = {}; // Орнотууларды баштоо
    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 (бирдей экземпляр)

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

Фабрика (Factory Method): Интерфейс түзүү үчүн колдонулат, бирок субкластар кайсы объект түзүлөрүн чечет. Бул ар кандай UI элементтерин же объекттерди түзүү үчүн колдонулат, конфигурацияга негизделген.
Стратегия (Strategy): Алгоритмдердин үй-бүлөсүн аныктайт, алардын ар бири инкапсуляцияланган жана алмашылмалы. Алгоритмдердин өзгөрүшүн камсыздайт, колдонуучуларга таасир этпестен. Массивдерди сорттоо, формаларды текшерүү же окуяларды иштетүүдө колдонулат.

Бул үлгүлөрдү колдонуу структураланган, модулдуу, тесттелүүчү жана оңдоого оңой код түзүүгө жардам берди.

Өзүңүздүн өнүгүшүңүздө колдонгон үлгү долбоорлоо жөнүндө айтып бериңиз.