Дар бораи тарҳи намунавӣ, ки дар таҳияи худ истифода…

Ман истифода бурдам моделҳои зерин:

MVC (Model-View-Controller): Тақсим кардани логикаи барнома. Модел маълумотҳоро идора мекунад, Намуд нишон медиҳад, ва Контролер муносибати корбарро коркард мекунад ва Модел ё Намудро навсозӣ мекунад. Дар Angular истифода бурдам, ки қисман ин идеологияро иҷро мекунад.

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

Декоратор (Decorator): Ба объект навъҳои навро илова мекунад, ки функсионалиро васеъ мекунад бе тағир додани сохтори он. Дар шакли HOC (Higher-Order Components) дар React ё декораторҳо дар Angular/TypeScript истифода мешавад.

// Намунаи Higher-Order Component (HOC) дар React
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): Интерфейси барои сохтани объектро муайян мекунад, аммо имкон медиҳад, ки субклассҳо қарор диҳанд, ки кадом объектро созанд. Барои сохтани намудҳои гуногуни унсурҳои интерфейс ё объектҳо дар асоси конфигуратсия истифода мешуд.
Стратегия (Strategy): Оилаи алгоритмҳоро муайян мекунад, ҳар кадомро инкапсулатсия мекунад ва онҳоро ивазшаванда мекунад. Алгоритмро аз мизоҷон мустақилона тағир додан имкон медиҳад, ки онро истифода мебаранд. Барои татбиқи роҳҳои гуногуни сорткунии маълумот, тасдиқи формҳо ё коркарди рӯйдодҳо истифода мешуд.

Истифодаи ин моделҳо кӯмак кард, ки коди мураттаб, модулӣ, тестшаванда ва нигоҳдошаванда бештар созем.

Дар бораи тарҳи намунавӣ, ки дар таҳияи худ истифода бурдаед, нақл кунед.