Как я могу провести рефакторинг для обработки нескольких клиентов службы, сгенерированных прототипом, исключив двойное ожидание и СУХИЙ код?

Я сомневаюсь, какая стратегия является лучшей для управления множеством клиентов служб в этом веб-приложении.

«Лучший» с точки зрения хорошего компромисса между оперативной памятью устройства пользователя и скоростью выполнения Javascript (операции основного потока).

Вот что я сейчас делаю, это главный файл:

• main.ts:

import type { PlayerServiceClient } from './player.client';
import type { TeamServiceClient } from './team.client';
import type { RefereeServiceClient } from './referee.client';
import type { FriendServiceClient } from './friend.client';
import type { PrizeServiceClient } from './prize.client';
import type { WinnerServiceClient } from './winner.client';
import type { CalendarServiceClient } from './calendar.client';

let playerService: PlayerServiceClient;
export const player = async (): Promise<PlayerServiceClient> =>
    playerService ||
    ((playerService = new (await import('./player.client')).PlayerServiceClient()),
    playerService);

let teamService: TeamServiceClient;
export const getTeamService = (): TeamServiceClient =>
    teamService ||
    ((teamService = new (await import('./team.client')).TeamServiceClient()),
  teamService);

let refereeService: RefereeServiceClient;
export const getRefereeService = (): RefereeServiceClient =>
    refereeService ||
  ((refereeService = new (await import('./referee.client')).RefereeServiceClient()),
  refereeService);

let friendService: FriendServiceClient;
export const getFriendService = (): FriendServiceClient =>
    friendService ||
  ((friendService = new (await import('./friend.client')).FriendServiceClient()),
  friendService);

let prizeService: PrizeServiceClient;
export const getPrizeService = (): PrizeServiceClient =>
    prizeService ||
  ((prizeService = new (await import('./prize.client')).PrizeServiceClient()),
  prizeService);

let winnerService: WinnerServiceClient;
export const getWinnerService = (): WinnerServiceClient =>
    winnerService ||
  ((winnerService = new (await import('./winner.client')).WinnerServiceClient()),
  winnerService);

let calendarService: CalendarServiceClient;
export const getCalendarService = (): CalendarServiceClient =>
    calendarService ||
  ((calendarService = new (await import('./calendar.client')).CalendarServiceClient()),
  calendarService);

// and so on... a lot more...

Как видите, есть многие обслуживание клиентов.

Я использую этот код, потому что думал, что это лучше, учитывая структуру моего веб-приложения, основанную на маршрутах, почти перекрывающихся с клиентскими службами:

Я имею в виду, если игрок перейдет из /home к /players page я могу использовать это так:

• компоненты / player.svelte

import { getPlayerService } from "main";

const playerService = await getPlayerService();
const players = await playerService.queryPlayers();

Таким образом, если PlayerService не существует, он импортируется в данный момент и возвращается, в противном случае он возвращает импортированный и созданный ранее.

Поскольку пользователь часто переключает страницы таким образом, я могу избежать внезапного создания и уничтожения этих клиентов, верно?

Но таким образом я использую глобальные переменные который я не люблю использовать и использую подробный, СУХОЙ и длинный код в каждом компоненте.

Есть ли способ вместо этого использовать приведенный ниже код в компонентах?

import { playerService } from "main";

const players = await playerService.queryPlayers();

Что вы предлагаете мне делать?