Өз жобаларыңызда қолданған жобалау үлгілері қандай, мысалы, хабарламалар кезегі, асинхронды пулдар, кәсіпорын автобусы немесе команда мен сұрауды бөлу?

Жоғары жүктемелі фронтенд-қосымшалар мен SPA әзірлеу кезінде келесі жобалау үлгілері белсенді қолданылды:

1. CQRS (Команда сұрау жауапкершілігін бөлу): Мәнін өзгерту операциялары (командалар) мен деректерді алу операциялары (сұраулар) бөлек жүргізу. Бұл оқу және жазу үшін деректерді өңдеуді оңтайландыруға, өнімділікті және масштабталуды арттыруға мүмкіндік береді.

2. Publisher/Subscriber (Pub/Sub): Оқиғалар жүйесін жүзеге асыру, мұнда компоненттер белгілі бір оқиғалар түрлеріне жазылып, оларға хабардар етіледі. Бұл модульдер арасындағы әлсіз байланысты және асинхронды өзара әрекеттесуді қамтамасыз етеді.

3. Mediator: Әр түрлі модульдер немесе компоненттер арасындағы өзара әрекеттесуді үйлестіру үшін орталық объект-делдалды пайдалану. Бұл объектілер арасындағы тікелей байланысты азайтуға көмектеседі.

4. Асинхронды пулдар (UI/браузер деңгейінде): API сұраулары сияқты параллель асинхронды операцияларды басқару, бір уақытта орындалатын тапсырмалар санын шектеу. Бұл классикалық жіптер пулына ұқсас емес, бірақ браузерде асинхронды функциялардың (мысалы, промистердің) орындалу санын бақылау жүзеге асырылады.

Классикалық мағынада "хабарламалар кезегі" немесе "enterprise bus" фронтендте тікелей қолданылмайды, бірақ Pub/Sub үлгісі мен CQRS-ке жақын архитектуралық тәсілдер асинхронды өңдеу және жауапкершілікті бөлу принциптерін жүзеге асырады.

Pub/Sub мысалы:

// Оқиғалар мен жазылушылардың қарапайым қоймасы
const events = {};

// Жазылу функциясы
const subscribe = (eventName, callback) => {
  if (!events[eventName]) {
    events[eventName] = [];
  }
  events[eventName].push(callback);
};

// Жариялау функциясы
const publish = (eventName, data) => {
  if (events[eventName]) {
    events[eventName].forEach(callback => {
      // Асинхронды шақыру
      setTimeout(() => callback(data), 0);
    });
  }
};

// Қолдану мысалы
subscribe('userLoggedIn', (userData) => {
  console.log('Сәлем,', userData.name);
});

subscribe('userLoggedIn', (userData) => {
  console.log('Пайдаланушы', userData.id, 'жүйеге кірді');
});

publish('userLoggedIn', { id: 123, name: 'Иван' });