Тех собес на middle-senior Frontend Разработчик в ****

Доступно с премиум-подпиской

Оформите премиум-подписку, чтобы получить доступ к:

• Фильтрации по компаниям
• Названиям компаний в интервью
• Видеозаписям собеседований в категории Frontend Разработчик

Посмотреть видео в категории

Оформить премиум

(2025-01-30)

Кодинг задача

Задача: отрефакторить код. Убрать старый коллбек подход, разделить функции по SOLID, описать новые типы.

declare global {
    var RendererFunc: RendererFunc
}

interface RendererFunc {
    new(): RendererFunc
    init: Function
}

type RawOption = {
    id: string,
    cardType: string,
    title: string,
}

type Option = {
    code: string,
    label: string,
    value: string,
    dataTest: string
}

export interface ConfInterface {
    lang: string,
    target: HTMLElement,
    themeName: string,
    onLogin: Function,
    onRegister: Function
}

interface LoadScriptParams {
    scriptId: string;
    scriptSrc: string;
}
type LoadScript = (params: LoadScriptParams) => Promise<any>;

/* промисы
   сегрегация интерфейса
 * Скрипт содержит экземпляр RendererFunc
 */
const loadScript: LoadScript = ({ scriptId, scriptSrc }) => {

    return new Promise((resolve, reject) => { 
        if (!scriptId || !scriptSrc) {
            reject()
            return;
        }

        if (document.getElementById(scriptId)) {
            resolve(true);
            return;
        }

        const script = document.createElement('script');

        script.id = scriptId;
        script.src = scriptSrc;

        document.head.appendChild(script);

        script.addEventListener('load', () => {
            resolve(true);
        })
        
        script.addEventListener('error', () => {
            reject();
        })
    })

}

const getOption = (optionsList: RawOption[]): Option[] => {
    let options = [];

    optionsList.forEach((i) => {
        if (options.find(({ code }) => code === i.id)) {
            return
        }

        const op = {
            code: i.id,
            label: i.cardType,
            value: i.title,
            dataTest: i.id
        }

        options.push(op)
    })

    return options;
}

const onNavigation = (e?: any): void => {
    let url = ''

    const name = e.pageName.toLowerCase()

    if (name == 'detasils') {
        url = '#events'
    } else if (name === 'coming') {
        url = '#calendar'
    } else if (name == 'results') {
        url = '#results'
    } else if (name === 'live') {
        url = '#live'
    }

    // Установка человекочитаемой ссылки
    window.history.replaceState(null, '', url)
}

export function initScript(
    lang: string,
    frameKey: string,
    onLogin: Function,
    onRegister: Function,
    stickyTop: number,
    themeName: string,
    optionsList: RawOption[],
    onNavigation?: () => void
): any {
    let target = document.getElementById('#wrapper');
    const options = getOption(optionsList);

    const conf: ConfInterface = {
        lang: lang,
        onLogin,
        stickyTop: stickyTop ?? 70,
        target,
        themeName: themeName || 'defaultTheme',
        options
    }

    conf.onNavigation = onNavigation

    if (onRegister) {
        conf.onRegestir = onRegister
    }

    if (window.RendererFunc && target) {
        return new RendererFunc().init(conf)
    }
}