Всем известно, что «вы не можете забыть свое первоначальное намерение, оно всегда будет у вас», но многие ли знают, что «первоначальное намерение легко получить, но трудно его удержать». Времена меняются, технологии развиваются, а фундамент не меняется. При изучении новой технологии нельзя забывать об основах.
1. Введение
По воле случая я, который был интервьюером бесчисленное количество раз, стал интервьюером, и я также общался с несколькими интервьюерами. Поскольку мне приходится иметь дело с интервьюером, конечно, я должен подготовить вопросы для интервью, чтобы иметь приблизительное представление об уровне интервьюера. В это время также пришло время подробно объяснить темы, которые вы написали. Поскольку название написано мной, а не взято из Интернета, поэтому пункты знаний относительно базовые и не исчерпывающие. Если у вас есть какие-либо предложения по вопросам интервью, пожалуйста, дайте мне знать.
2. Тестовый сайт - объектно-ориентированный
Требования: Определение'я ем горячую кастрюлю’
Процессуальное мышление – это:Действие (я ем горячую кастрюлю)
Реализация кода:
//面向过程
let eat=function(who,someThing){
console.log(`${who}吃${someThing}`);
}
eat('我','火锅');//我吃火锅
Перепишите этот пример объектно-ориентированным способом.
Этот вопрос, я только надеюсь, что здесь есть объектно-ориентированный смысл Ответ, который я ожидаю, таков.
let person={
name:'守候',
eat:function(someThing){
console.log(`${this.name}吃${someThing}`);
}
}
person.eat('火锅');
Для лучшего способа см. следующую статью:JavaScript: несколько распространенных ошибок на собеседованиях. Не буду говорить об этом здесь.
3. Тестовая площадка - предварительный анализ
По следующему коду запишите результат
Я очень впечатлен этим вопросом, потому что больше года назад я увидел, как кто-то из группы Q сказал, что я разбираюсь во многих вещах. Опытные люди, никто не может ответить. Даже если это вопрос интервью, некоторые люди попадают в яму.
Когда я раньше публиковал статью, то упомянул этот вопрос из интервью и меня отругали.Наверное, это имело в виду: Сколько сейчас лет, а ES не знает, сколько версий обновлено.Кто до сих пор пишет такой код? Я не ответил, когда увидел это, и я не планировал ни с кем драться. Но первое, что пришло мне на ум, было: в прошлом на Weibo была новостная статья, в которой говорилось, что 70% пользователей сети выступают за отказ от вступительных экзаменов в колледж по математике, и некоторые люди согласились ответить: «Математика — это используется для устранения этих 70% людей. Здесь я хочу сказать, что хотя написание такого кода обязательно будет подвергнуто критике в разработке, вопросы на собеседовании не только проверяют проблемы, возникающие при разработке, но и проверяют некоторые базовые знания. Этот вопрос — один из них. Более того, сейчас я тоже чувствую, что необходимо знать эти знания.Еще не эпоха, когда ES6 пишут все люди, и эпоха отказа от ES5.
alert(a)
a();
var a=3;
function a(){
alert(10)
}
alert(a)
a=6;
a();
//------------分割线------------------
alert(a)
a();
var a=3;
var a=function(){
alert(10)
}
alert(a)
a=6;
a(); Эта статья была написана раньше, и теперь я присваиваю ее и вставляю.
На самом деле есть два тестовых сайта, первое объявление переменной расширено, а второе объявление функции имеет приоритет над объявлением переменной!
Я кратко проанализирую это ниже.
Первая часть беговых результатов:
1. Объявления функций имеют приоритет над объявлениями переменных, поэтому в началеfunction a(){alert(10)}, вы увидите эту функцию.
2.a(), исполнительная функция, должна появитьсяalert(10)
3. Казненvar a=3;такalert(a)просто покажи3
4. Из-заaЭто больше не функция, поэтому она выполняется доa()Когда возникает ошибка.
Вторая часть беговых результатов:
1.underfind
2. Сообщить об ошибке
Как я уже говорил, подготовка — этоvarа такжеfunctionПредварительное объявление ключевого слова, но без присвоения. Так сначала былоunderfind, а затем сообщается об ошибке, поскольку выполнениеa()когда,aне является функцией.
//函数表达式，和变量声明同等
var a=function(){
alert(10)
}
//函数声明，优于变量声明
function a(){
alert(10)
} 4. Тестовый центр - делегирование мероприятия
Для простого требования, например, если вы хотите добавить событие клика в li под ul, по которому li щелкнули, будет отображаться innerHTML этого li. Это кажется таким простым! код показывает, как показано ниже!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul-test">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById("ul-test");
var oLi=oUl.getElementsByTagName("li");
for(var i=0,len=oLi.length;i<len;i++){
oLi[i].addEventListener("click",function(){
alert(this.innerHTML)
})
}
</script>
</html>
Проблема в:
1. Цикл цикла li, 10 циклов li 10 раз, связывает 10 событий, 100 циклов 100 раз, связывает 100 событий!
2. Если li изначально нет на странице, это будущий элемент, страница загружается, а затем загружается динамически через js, написанное выше недействительно, и нажатие li не будет реагировать!
Как должны быть решены вышеуказанные проблемы?
Тестовый сайт вопроса - это делегирование события, которое должно привязать событие к ul, а затем li можно добавить по желанию. код показывает, как показано ниже
var oUl=document.getElementById("ul-test");
oUl.addEventListener("click",function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
//如果点击的最底层是li元素
if(target.tagName.toLowerCase()==='li'){
alert(target.innerHTML)
}
})
Но некоторые интервьюеры отвечают на этот вопрос с точки зрения vue-использования v-for для привязки. Хотя в проекте нашей компании используется vue, можно так сказать, но я не упомянул vue в этом вопросе.
5. Тестовый сайт — манипулирование DOM
Например, есть требование добавить 10 ли к ул, следующий код
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul-test">
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById("ul-test");
for(var i=0;i<10;i++){
var oLi=document.createElement('li');
oLi.innerHTML=i;
oUl.appendChild(oLi);
}
</script>
</html>
Вопрос: Это эквивалентно 10-кратному выполнению операций с DOM Как можно уменьшить количество операций с DOM? Краткое описание записываемого кода.
В этом вопросе несколько человек все еще решают проблему с точки зрения vue (v-for, data), хотя это не может быть неправильным, я ничего не упомянул о vue в заголовке. Тестовый сайт должен использовать форму innerHTML или фрагменты документа.
код показывает, как показано ниже
innerHTML
var oUl=document.getElementById("ul-test");
//定义临时变量
var _html='';
for(var i=0;i<10;i++){
//保存临时变量
_html+='<li>'+i+'</li>'
}
//添加元素
oUl.innerHTML=_html;
Фрагмент документа — createDocumentFragment
var oUl=document.getElementById("ul-test"),_frag = document.createDocumentFragment();
for(var i=0;i<10;i++){
var oLi=document.createElement('li');
oLi.innerHTML=i;
//把元素添加进文档碎片
_frag.appendChild(oLi);
}
//把文档碎片添加进元素
oUl.appendChild(_frag);
6. Тестовый сайт - глубокая копия объекта
Напишите функцию, реализующую глубокую копию объекта
Требуется реализовать клон функции.
let obj={
name:'小明',
age:24
}
let obj1=clone(obj);
Изменение obj1 не повлияет на значение obj.
Этот вопрос, в OBJ я намеренно пишу только слой, внутри объекта нет вложенного массива или объекта, просто хочу увидеть, что следующие тестеры могут подумать об этом. В результате интервьюер наступил на яму. Но будет оценено, что все нацелены на темы.
В основном ответ примерно такой
function clone(object){
let _obj={}
for(let key in object){
_obj[key]=object[key];
}
return _obj;
}
let obj1=clone(obj);
//-------------------或者-------------
function clone(obj){
let _obj=Object.assign({},object);
return _obj;
}
let obj1=clone(obj);
Целью этого решения является достижение, но если свойства в obj вложены в объекты или массивы, возникает проблема. Таким образом, идеальным решением должно быть это.
function clone(object){
let _obj=JSON.parse(JSON.stringify(obj))
} В этой схеме, если значение свойства должно быть функцией или неопределенным, оно будет отфильтровано. Практика страхования следующая. Принцип также очень прост, то есть проходить по одному, если обнаружено, что ссылочный тип является значением атрибута, он будет проходиться с текущим атрибутом.
function clone(obj){
if(!obj&& typeof obj!== 'object'){
return;
}
var newObj=obj.constructor===Object?{}:[];
for(var key in obj){
newObj[key] =(obj[key]&&typeof obj[key]==='object')?clone(obj[key]):obj[key];
}
return newObj;
}
7. Другие тестовые площадки
Остальные вопросы относятся к относительно общим вопросам, и однозначного решения нет, поэтому я не буду здесь отвечать на них единообразно!
1. Если в дизайне используется нестандартный шрифт, как вы это реализуете?
Вместо изображений, шрифтов, иконок, если английский относительно мелкий шрифт, можно использовать css3 из @font-face.
2. На проекте разработки и знаю, как оптимизировать, повысить производительность и сократить время загрузки страницы, аспекты качества кода, читабельность кода и т.д.
Оптимизация производительности — сжатый код, отложенная загрузка, предварительная загрузка, мерж-реквесты, преобразование небольших изображений в кодировку base64, загрузка ресурсов по запросу и т. д.
Оптимизация качества кода — осмысленные имена, правильные комментарии, отсутствие громоздких функций, избегание сильной связи объектов, четкая логика кода и т. д.
3. Перечислите Es6, некоторые часто используемые новые функции.
Ссылки следующие:
Начало работы с ECMAScript 6
30 минут на освоение ядра ES6/ES2015 (включено)
Освойте основной контент ES6/ES2015 за 30 минут (часть 2)
Пример, чтобы почувствовать общий синтаксис и преимущества es6
Объяснение использования промисов ES6
4. На что следует обратить внимание с точки зрения рендеринга страницы и читабельности кода при верстке Div+css?
Семантика меток, имена классов и идентификаторов значимы и стандартизированы, css избегает глубокой вложенности (вы должны обратить внимание на уровень 3), избегайте подстановочных знаков @import, !important и *, избегайте встроенных стилей и вводите CSS в голову и т. д.
Ссылаться на:
21 продвинутый совет по CSS
Советы по написанию CSS и сводка по оптимизации производительности
5. Расскажите о своем понимании модульной разработки и преимуществах модульной разработки.
Повышайте эффективность разработки, облегчайте командную совместную разработку,
Избегайте загрязнения глобальных переменных, конфликтов имен,
Удобно повторно использовать и поддерживать код.
8. Резюме
Вопросы для интервью — вот эти 10 вопросов, и мои собственные решения готовы. Хотя технологический стек нашей компании в основном использует vue и webpack, во время интервью и общения я также буду задавать сопутствующие вопросы, но я не спрашиваю о vue и webpack в вопросах интервью, поэтому я просто задаю эти статьи. заключается в том, чтобы знать, какова основа интервьюируемого (из-за текущего рынка многие люди сосредотачиваются на изучении популярных фреймворков, библиотек, инструментов и т. д., но оставляют основу позади). Если фундамент хороший, начать работу с каркасом несложно, но если фундамент непрочен, вы знакомы с двумя или тремя каркасами и некоторыми строительными инструментами, и в будущем может возникнуть сопротивление технологическим преобразованиям. Сейчас фронтенд быстро развивается и технология сложна, но фундамент не изменился. При изучении новых технологий рекомендуется не забывать закреплять фундамент.
Наконец, если у вас есть какие-либо предложения по решению вопросов интервью или какие вопросы вы предлагаете, пожалуйста, дайте подсказки.
------------------------- Великолепная разделительная линия --------------------
Хотите узнать больше, обратите внимание на мой публичный аккаунт WeChat: В ожидании книжного магазина