Оригинальный автор: Harshal PatilFollow
Переводчик: Джоти, UC International R&D
Спереди написано: Добро пожаловать в официальный аккаунт «UC International Technology», мы предоставим вам качественные технические статьи, связанные с клиентом, сервером, алгоритмом, тестированием, данными, интерфейсом и т. д., не ограничиваясь оригинальностью и перевод.
С появлением спецификации JavaScript ES2015 все изменилось. Спецификация огромна — благодаря встроенной поддержке модулей и развитию функционального программирования новый язык JavaScript возрождается. И продолжайте запускать ES2016, ES2017 каждый год...
Тем не менее, когда дело доходит до собеседования или найма разработчиков интерфейса, существует огромный разрыв между ожиданиями, реальностью и потребностями. Как сказала Лори Восс в видео NPM:
97% кода современных веб-приложений исходит от NPM.
Адрес видео: https://www.youtube.com/watch?time_continue=238&v=Qa4dxW-Qi2s
Пишем ли мы на самом деле код или просто складываем код, как блоки Lego?
В конце 2018 года большинство опрошенных все еще использовали jQuery, когда их спрашивали об AJAX. Вот несколько типичных примеров, иллюстрирующих этот разрыв:
CSS Grid и Flexbox уже широко поддерживаются. Однако во время интервью еще велась дискуссия о том, как сделать плавающие элементы в CSS для достижения многоколоночной компоновки и центрирования встроенных блочных элементов.
Сборщик модулей — это спецификация, разработанная для крупномасштабных приложений. Однако когда дело доходит до архитектуры, мы снова говорим о минификации и конкатенации. Сколько раз в интервью мы обсуждали Webpack?
Если 97% кода исходит из NPM, но интервью сосредоточено на сортировке массивов или переборе объектов. Более того, все еще интересно узнать значение typeof null . Почему бы не подойти рационально к выбору подходящей библиотеки, фреймворка или инструмента?
Мы по-прежнему будем просить интервьюируемого делать классическое наследование поверх прототипа, но не для подтверждения необходимости этих ложных идей. У нас больше шаблонов методов. Конечно, классы JavaScript, недавно введенные частные и статические свойства также заслуживают обсуждения. Это помогает нам лучше понять, что думает интервьюер, думает о ключевых решениях и т. д.
Обсуждение кэширования по-прежнему ограничивается заголовками управления кэшированием и CDN. Такие технологии, как IndexDB, HTTP/2 или Service Workers, просто прохожие.
Количество интервьюируемых бесконечно, но разрыв между оценкой на собеседовании и фактическими потребностями работы далек. С одной стороны, наши передовые технологии сделали огромный скачок вперед, а с другой стороны, наше большое сообщество еще не приняло эти новые технологии. Разрушенные районы никогда не бывают хорошим знаком. Это путь катастрофы. Разрыв всегда порождает что-то новое, достаточно мощное, чтобы разрушить все, что мы создали до сих пор. Я не могу представить, чтобы разработчик Java написал еще один Facebook с использованием GWT.
Интервью — отличный способ внести изменения и объединить таланты. Как интервьюер, если вы относитесь к интервью просто как к «интервью», то можете только раздуть себя и ничего не получить в итоге.
Чтобы собеседование прошло успешно, его необходимо обсудить. Это должно быть место для обмена идеями. Это должно побудить людей к объективному осмыслению и анализу данной проблемы. Это должно помочь нам понять, как люди принимают решения. Это должно помочь нам понять страсть человека к технологиям и решению проблем. Это означает знакомство с потенциальными будущими коллегами. Все эти головоломки, трюки или typeof null нельзя назвать интервью.
Вот некоторые из вопросов, которые мы задавали во время интервью. Мы надеемся, что это поможет интервьюерам и интервьюируемым точно увидеть ожидания, потребности и реалии.
Слишком долго читать версию: сначала мы должны думать о себе как о интервьюере.
Основные вопросы по JavaScript
1. Заставьте следующий код работать правильно:
2. Следующий код возвращает false в JavaScript. Пожалуйста, объясните, почему:
3. Какие существуют типы данных в JavaScript?
Подсказка: существует только два типа — первичные типы данных и ссылочные типы (объекты). Существует шесть основных типов.
4. Решите следующие проблемы с асинхронным кодом.
Извлекает и вычисляет средний балл для каждого учащегося, принадлежащего к одному и тому же классу, в данном случае с идентификатором класса 75. Каждый студент может пройти один или несколько курсов в год. Для получения необходимых данных можно использовать следующие API.
Напишите функцию, которая принимает идентификатор класса и вычисляет среднее значение для каждого ученика в этом классе на основе этой функции. Конечным результатом этой функции должен быть список студентов со средними баллами:
[
{ "id": 1, "name": "John", "average": 70.5 },
{ "id": 3, "name": "Lois", "average": 67 },
}Напишите необходимые функции, используя обычные обратные вызовы, промисы, наблюдаемые, генераторы или асинхронное ожидание. Попробуйте решить эту проблему, используя как минимум 3 разных метода.
5. Используйте JavaScript Proxy для реализации простой привязки данных
Совет: ES Proxy позволяет перехватывать вызовы любого свойства или метода объекта. Во-первых, DOM следует обновлять всякий раз, когда изменяется базовый объект привязки.
6. Объясните модель параллелизма JavaScript
Знакомы ли вы с какими-либо другими моделями параллелизма, используемыми в других языках программирования, таких как Elixir, Clojure, Java и т. д.?
Подсказка: цикл событий, очередь задач, стек вызовов, куча и т. д.
7. Что делает ключевое слово «новое» в JavaScript?
Совет: В JavaScript new — это оператор, используемый для создания экземпляров объектов. Цель здесь состоит в том, чтобы понять широту знаний и памяти.
Также обратите внимание на [[Construct]] и [[Call]].
8. Какие существуют шаблоны вызова функций в JavaScript? объясни подробно.
Подсказка: есть четыре режима: вызов функции, вызов метода, .call() и .apply().
9. Объясните любые новые предложения ECMAScript, которые будут выпущены в ближайшее время.
Совет: например, BigInt, частичная функция, оператор конвейера и т. д. в 2018 году.
10. Что такое итераторы и итераторы в JavaScript? Вы знаете, что такое встроенный итератор?
11. Как сериализовать следующие объекты в JSON?
Что произойдет, если мы преобразуем следующий объект в строку JSON?
12. Знакомы ли вы с типизированными массивами? Если вы знакомы, объясните, как они соотносятся с традиционными массивами в JavaScript?
13. Как работают параметры по умолчанию?
Если нам нужно использовать значение тайм-аута по умолчанию при вызове функции makeAPIRequest, каков правильный синтаксис?
14. Объясните TCO — оптимизация обратных вызовов. Существуют ли какие-либо механизмы JavaScript, поддерживающие оптимизацию хвостовых вызовов?
Совет: по состоянию на 2018 год нет.
Проблемы с дизайном интерфейсных приложений JavaScript
1. Объясните односторонний поток данных и двустороннюю привязку данных.
Angular 1.x основан на двусторонней привязке данных, тогда как React, Vue, Elm и т. д. основаны на архитектуре одностороннего потока данных.
2. Какие аспекты архитектуры однонаправленного потока данных подходят для MVC?
MVC имеет долгую историю, насчитывающую около 50 лет, и превратилась в MVP, MVVM и MV*. Каковы отношения между ними? Если MVC — это архитектурный шаблон, что такое однонаправленный поток данных? Решают ли эти конкурирующие модели одну и ту же проблему?
3. Чем клиентский MVC отличается от серверного или классического MVC?
Совет: Классический MVC — это Smalltalk MVC для настольных приложений. В веб-приложении есть как минимум два разных цикла данных MVC.
4. Каковы ключевые факторы, отличающие функциональное программирование от объектно-ориентированного или императивного программирования?
Подсказки: каррирование, бесточечные функции, частичное применение функций, функции высшего порядка, чистые функции, независимые побочные эффекты, типы записей (объединения, алгебраические типы данных) и т. д.
5. Как функциональное программирование связано с реактивным программированием в контексте JavaScript и внешнего интерфейса?
Подсказка: правильного ответа нет. Но грубо говоря, функциональное программирование — это небольшой код, написание чистых функций, а реактивное программирование — это большой код, то есть поток данных между модулями, соединяющий компоненты, написанные в стиле FP. FRP — функциональное реактивное программирование ( Функциональное реактивное программирование) — еще одна другая, но родственная концепция.
6. Какие проблемы решают неизменяемые структуры данных?
Есть ли какие-либо последствия для производительности неизменяемых структур? Какие библиотеки в экосистеме JS предоставляют неизменяемые структуры данных? Каковы преимущества и недостатки этих библиотек?
Подсказки: безопасность потоков (нам действительно нужно беспокоиться об этом в браузерном JavaScript?), функции без побочных эффектов, лучшее управление состоянием и т. д.
7. Должны ли большие приложения использовать статическую типизацию?
Как вы сравниваете TypeScript/Flow с языками преобразования JS, такими как Elm/ReasonML/PureScript? Каковы преимущества и недостатки этих методов?
Какими должны быть основные критерии выбора того или иного типа системы?
Что такое вывод типа?
В чем разница между статически типизированным языком и строго типизированным языком? В чем суть JavaScript в этом отношении?
Известны ли вам слабо типизированные, но статически типизированные языки? Знаете ли вы динамически типизированный, но строго типизированный язык? Пример один или два.
Подсказка: структурные и номинальные системы типов, надежность типов, поддержка инструментов/экосистемы, правильность важнее удобства.
8. Каковы известные модульные системы в JavaScript? Оцените модульную систему ES.
Перечислите некоторые сложности, связанные с реализацией взаимодействия между различными модульными системами (в основном заинтересованы в модулях ES и взаимодействии с CommonJS).
9. Как HTTP/2 повлияет на упаковку приложений JavaScript?
Перечислите основные различия между HTTP/2 и его предшественником.
10. Какие улучшения есть у Fetch API по сравнению с традиционным Ajax?
Есть ли недостатки/трудности в использовании Fetch API?
Что может Ajax такого, чего не может получить?
11. Обсудите вопросы, связанные с обещаниями.
Подсказки: ранняя оценка, неудобные механизмы отмены, маскировка map() и flatMap() методами then() и т. д.
Основы интерфейса и теоретические вопросы
1. Какова цель Doctype в HTML?
В частности, что происходит в каждой из следующих ситуаций:
- Тип документа не существует.
- Используется тип документа HTML4, но HTML-страница использует теги HTML5, такие как
- Используется недопустимый тип документа.
2. В чем разница между DOM и BOM?
Подсказка: BOM, DOM, ECMAScript и JavaScript — разные вещи.
3. Как работает обработка событий в JavaScript?
Как показано на изображении ниже, у нас есть три элемента div. Каждый div имеет связанный с ним обработчик кликов. Обработчик выполняет следующие задачи:
- Обработчик кликов Outer div выводит приветствие на консоль.
- Обработчик Inner div выводит приветствие на консоль.
- Самый внутренний обработчик щелчка div выводит на консоль приветствие.
Напишите фрагмент кода для назначения этих задач, чтобы вы всегда печатали следующую последовательность при нажатии InnerMost Div?
привет внутренний → привет внутренний → привет внешний
Всплывание и захват событий
Совет: захват событий и пузырьковое распространение событий
4. Какие есть способы загрузки файлов на сервер с помощью одностраничного приложения?
Подсказки: XMLHttpRequest2 (потоковая передача), выборка (не потоковая передача), File API
5. В чем разница между CSS reflow и repaint?
Какие свойства CSS вызывают перекомпоновку и перерисовку?
6. Что такое вес селектора CSS и как он работает?
7. Чем пиксель в CSS отличается от пикселя в оборудовании/физике?
Подсказка: пиксели не пиксели не пиксели — ppk.
8. Каков алгоритм секционирования?
Подсказка: он также известен как алгоритм структуры HTML5. Особенно важно при построении сайта со смысловой структурой.
9. Если вы использовали макет CSS Flex / CSS Grid (сетку), объясните, почему вы его используете? Какую проблему он решает для вас?
Используя CSS Grid, в чем разница между процентами и единицами fr?
С CSS flexbox иногда flex-элементы/дети не учитывают ширину/высоту, установленную flex-контейнером? Почему это происходит?
Можно ли создать макет Masonry с помощью CSS Grid? Если да, то как?
Объясните термины CSS Grid и CSS flexbox?
Как плавающие элементы (float: left | right;) отображаются в CSS Grid и flexbox?
Советы: столбцы одинаковой высоты, центрирование по вертикали, сложные сетки и т. д.
10. Когда я должен использовать анимацию CSS вместо CSS-переходов? Каковы ваши критерии для принятия этого решения?
11. Если вы просматриваете код CSS, с какими проблемами вы часто сталкиваетесь в своем коде?
Примеры: используйте магические числа, такие как width: 67px, или используйте em вместо единиц rem, пишите медиа-запросы перед общим кодом, злоупотребляйте идентификаторами и классами и т. д.
12. Как обнаружить сенсорные события в JavaScript?
Вы не оптимистичны в отношении обнаружения поддержки устройств сенсорными событиями? Если да, то почему? Сравните события касания и события щелчка.
Когда устройство поддерживает как события касания, так и события мыши, как вы думаете, каким должен быть правильный порядок событий для этих событий?
13. Для чего используются атрибуты `async` и `defer`, определенные для тегов скрипта?
Теперь у нас есть модули HTTP / 2 и ES, которые действительно полезны?
Составленный список — это всего лишь беглый взгляд на бесконечное количество вопросов, которые мы могли бы обсудить в интервью. Есть много вещей, таких как веб-компоненты, CORS, безопасность, файлы cookie, преобразования CSS, веб-сборка, сервис-воркеры, PWA, архитектура CSS и т. д., которые мы не рассмотрели. Мы также не рассматриваем конкретные проблемы с фреймворками или библиотеками.
Я надеюсь, что это руководство поможет сообществу найти свой путь в интервью.
Английский оригинал:
https://blog.webf.zone/front-end-javascript-interviews-in-2018-19-e17b0b10514
«UC International Technology» стремится делиться с вами высококачественными техническими статьями.
Добро пожаловать, чтобы подписаться на наш официальный аккаунт и поделиться статьей с друзьями