Автор оригинала: Daniel Borowski.
JavaScript является официальным языком Все современные веб-браузеры Отказ Как таковой, вопросы JavaScript приходят во всех видах интервью разработчиков.
Эта статья не о новейших библиотеках JavaScript, общих практик развития или любой из новых Функции ES6 . Скорее, это около 3 вещей, которые обычно поднимаются в интервью при обсуждении JavaScript. Я сам задавал эти вопросы, и мои друзья сказали мне, что они их тоже просили.
Конечно, это не единственные 3 вещи, которые вы должны учиться перед интервью JavaScript – есть множество способы Вы может Лучше подготовиться к предстоящему интервью – но внизу 3 вопроса, что интервьюер может попросить судить, насколько хорошо вы знаете и понимаете язык JavaScript и Дом Отказ
Так что давайте начнем! Обратите внимание, что мы собираемся использовать ванильный JavaScript в приведенные ниже примеры, поскольку ваш интервьюер обычно хочет увидеть, насколько хорошо вы понимаете JavaScript и DOM без помощи библиотек, таких как jQuery.
Вопрос № 1: делегация событий
При создании приложения иногда вам нужно прикрепить слушателей событий к кнопкам, тексту или изображениям на странице, чтобы выполнить некоторые действия, когда пользователь взаимодействует с элементом.
Если мы простым списком TODO в качестве примера, интервьюер может сказать вам, что они хотят, чтобы действие произошло, когда пользователь нажимает один из элементов списка. И они хотят вы реализовать эту функциональность в JavaScript, при условии следующего HTML-код:
- Walk the dog
- Pay bills
- Make dinner
- Code for one hour
Вы можете сделать что-то вроде следующего, чтобы прикрепить слушателей событий к элементам:
document.addEventListener('DOMContentLoaded', function() {
let app = document.getElementById('todo-app');
let items = app.getElementsByClassName('item');
// attach event listener to each item
for (let item of items) {
item.addEventListener('click', function() {
alert('you clicked on item: ' + item.innerHTML);
});
}
});Хотя это технически работает, проблема в том, что вы подключите слушатель событий каждому отдельному элементу индивидуально. Это хорошо для 4 элементов, но что, если кто-то добавляет 10 000 предметов (они могут иметь много чего делать) в их список TodDo? Затем ваша функция создаст 10 000 отдельных слушателей событий и прикрепите каждому из них до DOM. Это не очень эффективно Отказ
В интервью лучше всего спросить интервьюеру, какое максимальное количество элементов может войти пользователь. Если это никогда не может быть более 10, например, то вышеуказанный код будет работать нормально. Но если нет ограничений на количество элементов, пользователь может войти, то вы хотите использовать более эффективное решение.
Если ваше приложение может в конечном итоге сотнями слушателей событий, тем более эффективное решение будет на самом деле прикрепить один Прослушиватель событий на весь контейнер, а затем сможет получить доступ к каждому элементу, когда он на самом деле нажал. Это называется Делегация событий И это намного эффективнее, чем прикрепление отдельных обработчиков событий.
Вот код для делегации событий:
document.addEventListener('DOMContentLoaded', function() {
let app = document.getElementById('todo-app');
// attach event listener to whole container
app.addEventListener('click', function(e) {
if (e.target && e.target.nodeName === 'LI') {
let item = e.target;
alert('you clicked on item: ' + item.innerHTML);
}
});
});Вопрос № 2: Использование закрытия в цикле
Закрытия иногда воспитываются в интервью, так что интервьюер может оценить, насколько вы знакомы с языком, и знаете ли вы, когда реализовать закрытие.
Закрытие в основном, когда Внутренняя функция имеет доступ переменные вне его объема. Закрытия могут быть использованы для таких вещей, как Реализация конфиденциальности и создание Функциональные фабрики Отказ Общий вопрос интервью в отношении использования закрытий – это что-то подобное:
Напишите функцию, которая будет включать в себя список целых чисел и распечатать индекс каждого элемента после 3-секундной задержки.
Общая (неверная) реализация, которую я видел для этой проблемы, выглядит что-то подобное:
const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
setTimeout(function() {
console.log('The index of this number is: ' + i);
}, 3000);
}Если вы запустите это, вы увидите, что вы на самом деле получите 4 напечатано каждый раз вместо ожидаемого 0, 1, 2, 3 после 3 секунды задержки.
Чтобы правильно идентифицировать, почему это происходит, было бы полезно иметь понимание того, почему это происходит в JavaScript, что именно то, что интервьюер пытается проверить.
Причина этого – потому что Сетримс Функция создает функцию (замыкание), которая имеет доступ к ее внешнему объему, который является циклом, который содержит индекс i . Через 3 секунды пройдите, функция выполнена, и она распечатает значение Я , который в конце цикла находится в 4, потому что он цикл 0, 1, 2, 3, 4 и петля, наконец, останавливается в 4.
Есть на самом деле несколько способов правильно написать Функция для этой проблемы. Вот два из них:
const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
// pass in the variable i so that each function
// has access to the correct index
setTimeout(function(i_local) {
return function() {
console.log('The index of this number is: ' + i_local);
}
}(i), 3000);
}const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
// using the ES6 let syntax, it creates a new binding
// every single time the function is called
// read more here: http://exploringjs.com/es6/ch_variables.html#sec_let-const-loop-heads
setTimeout(function() {
console.log('The index of this number is: ' + i);
}, 3000);
}Вопрос № 3: Дебация
Существуют некоторые события браузера, которые могут одновременно стрелять в короткие сроки, такие как изменение размера окна или прокрутка на страницу. Если вы присоедините слушатель события к событию прокрутки окна, и пользователь постоянно прокручивает страницу очень быстро, ваше событие может огорчить тысячи раз в течение 3 секунд. Это может вызвать некоторые серьезные проблемы с производительностью.
Если вы обсуждаете создание приложения в интервью, а события, такие как прокрутка, изменение визуализации окна или нажатие клавиши, обязательно упомянуйте дебактирующие и/или дросселирование как способ улучшения скорости и производительности страницы. Реальный пример, взятый из этого Гостевой пост на CSS-Tricks :
Debounce – это один из способов решить эту проблему, ограничивая время, которое необходимо пройти до тех пор, пока функция снова вызывается. Поэтому правильная реализация дебансинга будет Группа Несколько функций звонит в один и выполняют его только один раз, после истечения некоторого времени. Вот реализация в простом JavaScript, который использует такие темы, как Область , замыкание, это и Сроки мероприятий :
// debounce function that will wrap our event
function debounce(fn, delay) {
// maintain a timer
let timer = null;
// closure function that has access to timer
return function() {
// get the scope and parameters of the function
// via 'this' and 'arguments'
let context = this;
let args = arguments;
// if event is called, clear the timer and start over
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
}Эта функция – при обернувании вокруг события – будет выполняться только после истечения определенного времени.
Вы бы использовали эту функцию так:
// function to be called when user scrolls
function foo() {
console.log('You are scrolling!');
}
// wrap our function in a debounce to fire once 2 seconds have gone by
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));Дросселинг – это еще одна техника, которая аналогична дебанеру, за исключением того, что вместо того, чтобы ждать некоторого времени, чтобы пройти до того, как вызовы функции, дросселирование просто распространяется на функциональные вызовы через более длительный интервал времени. Таким образом, если событие происходит в 10 раз в течение 100 миллисекунд, дросселирование может распространиться на каждую из функций вызовов для выполнения один раз каждые 2 секунды вместо всего обжига в пределах 100 миллисекунд.
Для получения дополнительной информации о разоблачении и дросселировании следующие статьи и учебные пособия могут быть полезны:
- Дросселирование и деконформирование в JavaScript
- Разница между дросселированием и разоблачением
- Примеры дросселирования и отчаяния
- Пост блогов Remy Sharp на вызовах функции дросселирования
Если вам понравилось прочитать эту статью, вы можете понравиться чтению учебных пособий JavaScript и решать некоторые проблемы кодирования JavaScript, на которых я проводлю Coderbyte. . Я хотел бы услышать, что вы думаете!
Оригинал: “https://www.freecodecamp.org/news/3-questions-to-watch-out-for-in-a-javascript-interview-725012834ccb/”