Интервью встретилось с шестью вопросами интервью

1. Причина

Сегодня меня задержали на первое собеседование с кандидатами. Вот несколько пунктов знаний, связанных с интервью.

Каждый раз на собеседовании я даю кандидату бутылку воды, что позволяет кандидату меньше нервничать и лучше настроится на собеседование, ведь собеседование — это двусторонний выбор, и компании нужно найти нужного человека как можно скорее.В Интернете не так много разговоров о психологической войне.

Здесь я также хочу пожаловаться на лажу на собеседовании по ракетостроению, особенно в индустрии разработки.Многие интервьюеры задают вопросы о своих областях знаний, полностью игнорируя преимущества кандидатов, тем самым давая кандидатам крайне плохой опыт собеседования. Лучший способ провести собеседование — оценить, подходит ли кандидат для вашей команды, основываясь на его сильных сторонах.

Нормальное собеседование должно основываться на технических моментах, фигурирующих в резюме кандидата, иначе зачем мне давать вам резюме на собеседовании, а нужно ли спрашивать о тех знаниях, которые не отражены в резюме, я не знаю. Не думаю, что это необходимо, потому что многие люди пишут резюме, я стараюсь быть исчерпывающим, и мне жаль, что я не услышал те знания, с которыми я знаком. Так что просто задавайте вопросы в резюме. Кроме того, спросите о некоторых популярных в последнее время технологиях, главным образом, чтобы проверить чувствительность кандидата к новым технологиям и способность принимать новые вещи.

Если речь идет о вопросах, на которые кандидат не может ответить, вам тоже нужно дать кандидату ответ, ведь когда люди приходят к вам на собеседование до сих пор, они всегда должны что-то приобретать.

Наконец, в резюме выберите пункт, в котором кандидат хорошо разбирается, и подробно задайте вопрос. Эта часть обычно называется оценкой. Если на предыдущие вопросы даны правильные ответы, человек в основном проходит, и, в конце концов, человек будет оцененный. Если ответы на предыдущие вопросы не идеальны, вы не сможете попасть на этот этап.

2. Proxy

существует2020Год за годомProxyЭто уже не незнакомое слово, он может многое, особенно вVue3.0пройти черезProxyПосле рефакторинга многие интервьюеры любят задавать этот вопрос.Proxyи иObject.definePropertyКонтраст.

ProxyОн специально настроен для доступа объекта к прокси, черезProxyПроцесс чтения и записи объектов можно легко контролировать по сравнению сdefineProperty,ProxyЕго функции более мощные и еще более удобные в использовании.

Здесь мы определяемpersonобъект, мы проходимnew ProxyПуть к намpersonдля создания прокси-объекта.

ProxyПервый параметр конструктора — это объект, который нам нужно проксировать, вотperson, второй параметр тоже является объектом, мы можем назвать этот объект обрабатывающим объектом прокси.getметод для контроля доступа к собственности, черезsetметод, чтобы представить процесс установки свойств в объекте.

const person = {
    name: 'yd',
    age: 18
}

const personProxy = new Proxy(person, {
    get() {},
    set() {}
})

Первый взглядgetСамый простой метод может получать два параметра: первый — это целевой объект прокси, а второй — имя атрибута, доступ к которому осуществляется извне. Возвращаемое значение этого метода будет использоваться как результат внешнего доступа к этому свойству.

{
    get(target, property) {
        console.log(target, property);
        return property in target ? target[property] : undefined;
    }
}

посмотри сноваsetЭтот метод по умолчанию получает три параметра: целевой объект прокси, имя свойства, которое мы хотим записать, и значение свойства, которое мы хотим записать в конце. Мы можем выполнить некоторую проверку, например, если настройкаage, его значение должно быть целым числом, иначе выдается ошибка.

{
    set(target, property, value) {
        console.log(target, property, value);
        if (property === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError(``${value} must be a integer);
            }
        }
        target[property] = value;
    }
}

в сравнении сObject.defineProperty, ProxyКаковы преимущества.

Первым и самым очевидным преимуществом является то, чтоProxyЧтобы быть более мощным, эта сила воплощена вObject.definePropertyМожно отслеживать только чтение или запись свойств объекта, иProxyПомимо чтения и записи, он также может отслеживать удаление свойств в объекте, вызов методов в объекте и так далее.

Второе преимущество заключается в наблюдении за объектом массива.Обычно мы хотим отслеживать изменения массива, в основном полагаясь на метод перезаписи массива, что также является способом Vue.proxyИзменения в массиве можно отслеживать напрямую. Раньше мы хотели пройтиObject.definePropertyСамый распространенный способ контролировать работу массива — переопределить метод работы массива, который такжеVue.jsМетод, используемый в общем методе, заключается в переопределении объекта-прототипа массива с помощью пользовательского метода.push,shiftи другие методы, чтобы захватить процесс вызова соответствующего метода.

3. Какие типы ключей поддерживаются для объектов

Этот вопрос проверяет, являются ли базовые знания кандидата прочными.

Многие люди будут думать, что ключи объектов имеют строковый тип, если это было правдой в прошлом, ноES2015Ключевой тип объекта в версии также может бытьSymbol.

const person = {
   	name: 'yd',
    [Symbol()]: 18
}

Это также приводит к следующемуSymbol.

4. Symbol

существуетECMAScript2015Ранее имена свойств объектов были строками, а строки могли повторяться. Конфликты будут возникать, если они повторяются.

В прошлом лучшим способом решения такого рода проблем было соглашение, но метод соглашения просто избегал проблемы, а не решал ее полностью. Если кто-то не соблюдает соглашение в процессе, проблема все равно будет существовать.

ES2015Для решения этой проблемы предоставляется новый примитивный тип данных.Symbol, переведенное значение называется символом, а перевод должен представлять уникальное значение. пройти черезSymbolфункция для созданияSymbolтип данных, и этот тип данныхtypeofРезультатsymbol, что означает, что он действительно совершенно новый тип.

const s = Symbol();
typeof s; // symbol类型

Самая большая особенность этого типа в том, что он уникален, что означает, что мы передаемSymbolКаждое значение, созданное функцией, уникально. Он никогда не повторится.

Symbol() === Symbol(); // false

Рассмотрите возможность отладки во время разработкиSymbolПри создании разрешено получать строку в качестве текста описания этого значения, чтобы мы могли использовать ее несколько раз.Symbolможно отличить какойSymbol, но этот параметр - это только описание, и значения, сгенерированные полем одинакового описания, все еще разные.

const s1 = Symbol('foo');
const s2 = Symbol('foo');

s1 === s2; // false

отES2015С самого начала объекту было разрешено использоватьSymbolкак имя свойства. Это означает, что теперь имя свойства объекта может быть двух типов: строковое иSymbol.

const person = {
    [Symbol()]: 123,
    [Symbol()]: 456
}

Если нам нужно повторно использовать идентичный глобальныйSymbolзначение, мы можем использовать глобальные переменные для его достижения или использоватьSymbolРеализован статический метод, предоставляемый типом. КонкретноSymbolстатический методfor, этот метод получает в качестве параметра строку, одному и тому же параметру должно соответствовать одно и то же значение.

const s1 = Symbol.for('foo');
const s2 = Symbol.for('foo');

s1 === s2; // true

Этот метод поддерживает глобальный реестр для строк иSymbolПредоставляется корреспонденция. Следует отметить, что внутренне поддерживаются строки иSymbolотношения, то есть, если параметр не является строкой, он будет преобразован в строку.

const s1 = Symbol.for('true');
const s2 = Symbol.for(true);

s1 === s2; // true

5. JSONP

многие люди правыjsonpМое понимание все на концепции, я не очень понял его принципы, почему он может пересекать домены, конечно не толькоscriptТеги не затрагиваются политикой одного и того же происхождения, фактическиjsonpЭто решение с интерфейсными и внутренними соглашениями.

Но сейчас его редко используют. Потому что сейчас более популярныCORSРешение относительно безопаснее, ноjsonpВсе же есть свои преимущества.

Многие знают, что политика одного и того же происхождения браузера — это доменное имя, протокол и порт адреса страницы, которая отправляет запрос, и адрес запрошенного интерфейса.Три должны быть согласованы, иначе браузер перехватит этот запрос. Смысл перехвата браузером не в том, что запрос отпускается, и запрос может нормально дойти до сервера, если сервер нормально вернется, то браузер его получит, но он не будет передан на страницу, на которой мы находимся. Проверь этоnetworkможно увидеть.

jsonpобычно используютscriptпомеченsrcАтрибут, для сервера есть только две операции: запрос и ответ.Когда придет запрос, он ответит, какой бы ни был ответ. Типов запросов слишком много.

тип браузера аurlэто запрос,ajaxВызов интерфейса также является запросом,imgа такжеscriptизsrcТоже просьба. Эти адреса дойдут до сервера. так почемуjsonpобычно выбираютscriptЭтикетки, во-первых, все знаютscriptзагруженjsМеждоменного ограничения нет, так как загружается скрипт, а неajaxпросить.

Вы можете понять, что предел браузераXMLHttpRequest этот объект, в то время какscriptЭтот объект не используется.

Мало того, что нет предела, есть более важный момент, потому чтоscriptзаключается в выполненииjsМетка сценария, контент, который он запрашивает, будет напрямую использоваться какjsвыполнить.

Также видно, что,jsonpа такжеajaxТребования к возвращаемым параметрам разные,jsonpНужен сервис для возврата сегментаjsсценарий,ajaxЧто нужно вернуть, так это данные.

Следовательно, это требует, чтобы сервер обрабатывалjsonpДля этого запроса общий интерфейс сервера вернет данные ответа через вызов функции.Например, возвращенное содержимоеyd, затем вернитесь кcb('yd')

cb('yd')

Это скрипт, который вызывает функцию черезscriptОна будет выполнена сразу после загрузки метки, если мы определим функцию cb глобально. Затем, когда этот скрипт будет выполнен, будет вызвана определенная нами функция, а параметром в функции будет значение, возвращаемое службой. Интерфейс также можно получить в этой функции.

function cb (data) {
    console.log(data);
}

такjsonpЭто результат общего соглашения между передней и задней частями.

6. CORS

Браузер использует политику одного и того же происхождения, чтобы ограничить междоменную проблему внешнего и внутреннего интерфейса, но также предоставляет соответствующее решение.

Когда сервер возвращает соответствующий URL-адрес, он может установить заголовок ответа, чтобы разрешить, какие URL-адреса запрашивать междоменные запросы, чтобы внешний интерфейс мог успешно получить результат ответа. Так это же подтверждает, что фронтенд не может получить результат не потому что сервер его не возвращает, а браузер не отдает его фронтенду.

Access-Control-Allow-Origin: www.xxxx.com

7. Как прокси веб-пакета решает междоменные проблемы?

Как упоминалось ранее, кроссдоменность возникает из-за ограничений политики браузера в отношении одного и того же источника, и проблема возникает в браузере. Можем ли мы избежать браузера? Я написал статью о том, что должен знать внешний интерфейс.nginx, который вводит обратный прокси-сервер и балансировку нагрузки, что на самом деле похоже на обратный прокси-сервер.

мы используемwebpackПри разработке проекта,webpackизdev-serverМодуль запустит сервер, который не только поможет нам делать автоматические обновления, но также может сделать обратный прокси.

заключается в том, что мы отправляем запрос наwebpack-dev-server, Потомwebpack-dev-serverПерейдите к внутреннему серверу, между запросами между службами нет междоменной проблемы, пока внутренний сервер возвращаетwebpack-dev-serverВы можете получить его, а затем вернуть на переднюю часть.

Ну, в общем, я задавал эти вопросы, начальник сказал, что время интервью контролируется в пределах20минут или около того.