გთხოვთ, მოგვიყევით თქვენს განვითარებაში გამოყენებულ შაბლონურ პროექტირებაზე.

მოდელები, ხედვა და კონტროლერი (MVC): პროგრამის ლოგიკის განყოფილება. მოდელი მართავს მონაცემებს, ხედვა პასუხისმგებელია გამოსახულებაზე, კონტროლერი კი მომხმარებლის ინტერაქციას აგვარებს და განაახლებს მოდელს ან ხედვას. გამოყენებული იყო Angular-ში, სადაც კომპონენტები ნაწილობრივ ახორციელებენ ამ იდეოლოგიას.

MVVM (მოდელი-ხედვა-ნახევარი): მსგავსია 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); // მდგომარეობის განახლება სეტტერით
  };

  return (
    <div>
      <p>Count: {count}</p> {/* მდგომარეობის ჩვენება */}
      <button onClick={increment}>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(`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("Unsupported API client");
  }
}

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-ში.

// HOC-ის მაგალითი React-ში
function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    console.log(`Component ${WrappedComponent.name} rendered with props:`, props);
    return <WrappedComponent {...props} />;
  };
}

// HOC-ის გამოყენება
const EnhancedButton = withLogging(Button);

// გაუმჯობესებული კომპონენტის გამოყენება
// <EnhancedButton label="Click me" onClick={() => console.log('Clicked!')} />

ოდინაურმა (Singleton): გარანტიას იძლევა, რომ კლასი აქვს მხოლოდ ერთ ინstanzს და გლობალურ წვდომას სთავაზობს მას. გამოყენებული იყო გლობალური მდგომარეობის მართვის ან ერთიანი სერვისის (მაგ., ლოგირების სერვისი, კონფიგურაცია) შექმნისთვის.

// ოდინაურობის დიზაინის ნიმუში
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 (ერთი და იგივე ინstanzი)

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

ფაბრიკის მეთოდი (Factory Method): განსაზღვრავს ინტერფეისს ობიექტის შექმნისთვის, მაგრამ საშუალებას აძლევს ქვესახეებს გადაწყვიტონ, რა ობიექტი უნდა შექმნან. გამოყენებული იყო სხვადასხვა ტიპის UI ელემენტების ან კონფიგურაციის საფუძველზე ობიექტების შექმნისთვის.

სტრატეგია (Strategy): განსაზღვრავს ალგორითმების ოჯახს, ინკაფსულირებს თითოეულ მათგანს და ხდის მათ ურთიერთგამომრიცხავ. საშუალებას აძლევს ალგორითმს იცვალოს დამოუკიდებლად მომხმარებლებისგან, რომლებიც მას იყენებენ. გამოყენებული იყო მონაცემების სორტირების, ფორმების ვალიდაციის ან მოვლენების დამუშავებისთვის სხვადასხვა მიდგომების რეალიზაციისთვის.

ამიამ ამ მოდელების გამოყენებამ დაეხმარა უფრო სტრუქტურირებული, მოდულური, ტესტირებადი და შენარჩუნებადი კოდის შექმნაში.