Պատմեք ձեր զարգացման մեջ օգտագործած ձևանմուշային նախագծման մասին։

Կիրառել եմ հետևյալ նախագծման օրինակները:

• 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); // վիճակի թարմացում սեթթերի միջոցով
    };
  
    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-ում:

  // Օրինակ՝ HOC React-ում
  function withLogging(WrappedComponent) {
    return function WithLogging(props) {
      console.log(`Կոմպոնենտ ${WrappedComponent.name} ռենդեր է` , 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): Դիտարկում է ալգորիթմների ընտանիք, որոնք ինկապսուլացված են և փոխարինելի են: Դրանով հնարավոր է փոխել ալգորիթմը առանց հաճախորդների փոփոխության, որոնք այն օգտագործում են: Օգտագործվում է տվյալների դասակարգման տարբեր մեթոդների, ձևերի վավերացման կամ իրադարձությունների մշակման համար:

Այս օրինակների օգտագործումը օգնել է ստեղծել ավելի կառուցվածքային, մոդուլային, թեստավորվող և պահպանվող կոդ։