Несколько дней назад я пошел на начальное интервью на станцию B. Я не старший пользователь станции B. Обычно мне нравится смотреть видео на станции B. Я очень польщен такой возможностью интервью. Однако из-за ограниченных сил и мелочей я не сделал достаточной подготовки, что привело к провалу интервью.
(ps: правда, я все еще немного нервничаю, и это также влияет на мою производительность)
Подумав об этом процессе интервью, я чувствую, что необходимо подвести итоги, и я надеюсь, что, когда у меня будет такая возможность в следующий раз, я смогу понять это лучше.
Поскольку контента много, можно обновлять контент в нескольких блогах, вот портал
- Макет HTML, селектор CSS и базовые исчерпывающие знания JS
- Основы алгоритма: плоский массив, дедупликация и сортировка
- реагировать vue понимание и базовые знания
- Междоменное решение проблемы
- код состояния http-протокола
- Проблемы с кэшем и обновлением
- веб-просмотр взаимодействует с родным приложением
- Знание серверной части
P.S. Это наброски, в будущем могут быть изменения. Например, знания о сервере мне не рассказывали, и интервьюер не спрашивал, но это действительно большой тип вопросов в процессе интервью.
Чувство интервью
В целом процесс собеседования очень удобен, интервьюер очень терпелив, вопросы интервью варьируются от поверхностных до глубоких, и если интервью будет оценено, я поставлю 5 звезд.
Макет HTML, селектор CSS и базовые исчерпывающие знания JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
margin: 0;
padding: 0;
height: 100%;
}
#header, #footer {
height: 50px;
line-height: 50px;
text-align: center;
background: #555;
color: #fff;
}
#side {
width: 200px;
background: #eee;
}
/* css here */
</style>
</head>
<body>
<div id="app">
<header id="header">header</header>
<aside id="side">side</aside>
<div id="main">
<ul>
<li><a href="https://www.bilibili.com/1">Link1</a></li>
<li><a href="https://www.bilibili.com/1">Link2</a></li>
<li><a href="https://www.bilibili.com/1">Link3</a></li>
<br>
<li><a href="https://www.bilibili.com/1">Link4</a></li>
<li><a href="https://www.bilibili.com/1">Link5</a></li>
</ul>
</div>
<footer id="footer">footer</footer>
</div>
<script>
// JS here
</script>
</body>
</html>
Вне зависимости от совместимости и структуры dom менять нельзя, требования следующие:
- Заполните классический верхний заголовок, нижний колонтитул, боковую панель слева и содержимое справа.
- Удалите · перед списком, и элементы списка будут расположены горизонтально.Обратите внимание, что тег br внутри должен быть обернут, и после каждых двух li есть вертикальная черта.
- Нажатие на элемент списка не прыгает, а содержимое в Href появляется.
ОТВЕТ 1:
Назад во времени:
Этот вопрос на собеседовании является базовым. Я должен показать интервьюеру больше о своих базовых навыках. В то же время я должен также сказать интервьюеру, что обращаю внимание на последние разработки в области интерфейса. Поскольку совместимость не учитывается, я Сначала нужно использовать Grid.План реализуется один раз, а затем я говорю интервьюеру, что у меня есть около 108 различных решений, 😃 Ха-ха-ха.... Потом Grid давно не писали кроме display:grid, чуть не забыл. Когда я думал о гриде, я терял слишком много времени, мне нужно было быстро найти простой способ написать его и отправить первым, иначе основные вопросы пришлось бы решать так долго, и впечатление точно не было бы хорошо.
Плавающее решение:
/**
* calc 是 css的一个函数
* 不明白的同学我附上链接
* https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
*/
#side {
/* 设置 侧边栏 左浮动 */
float: left;
height: calc(100% - 100px);
}
#main {
height: calc(100% - 100px);
}
Позиционное решение:
#app {
/* 父级元素 设置 相对定位 */
position: relative;
}
#side {
/* 左边栏 设置 绝对定位 */
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
}
#main {
/* 内容区 设置 绝对定位 */
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 200px;
}
#footer {
/* footer 设置 绝对定位 */
position: absolute;
bottom: 0;
width: 100%; /* 设置浮动后，补上宽度 */
}
Гибкие решения:
❌ Ограниченная структура DOM не может быть изменена, мне трудно использовать Flex для достижения этого спроса. Двенадцать экспертных советов или запросов.
За ужином мне вдруг пришла в голову идея Flex для решения этой проблемы, поблагодарите студентов в области комментариев за их помощь.
#app {
display: flex;
flex-wrap: wrap;
}
#header {
flex-basis: 100%;
}
#side {
height: calc(100% - 100px);
}
#main {
flex: 1;
height: calc(100% - 100px);
}
#footer {
flex-basis: 100%;
}
Сетевое решение:
использованная литература
В этой статье не будет повторяться весь контент Grid, нуждающиеся друзья могут узнать о нем больше через портал. Ниже я опишу части, которые я использую.
#app {
/* app 为 grid 布局的容器，所以在此处创建 grid 布局 */
display: grid;
/**
这是一种缩略的写法 等价于
grid-template-rows: 50px auto 50px;
grid-template-columns: 200px auto;
创建了一个 3 * 2 的格子
高度是 50px 自动 50px
宽度是 200px 自动
*/
grid: 50px auto 50px / 200px auto;
}
/* 这个时候其实打开页面看着很奇怪，header 缩在角落，等等 */
#header, #footer {
/**
-*- 重要 -*-
下面的写法 等价于
grid-column-star: 1;
grid-column-end: 3;
该 grid 的子项
开始与 第一根 column 线
结束与 第三根 column 线
*/
grid-column: 1 / 3;
}
#app {
display: grid;
/**
等价于
grid-template-rows: 50px auto 50px;
grid-template-columns: 200px auto;
grid-template-areas:
"header header"
"side main"
"footer footer";
注意： 每一 row 只是一个字符串
*/
grid: "header header" 50px "side main" auto "footer footer" 50px / 200px auto;
}
#header {
/* 注意： header 没有双引号 */
grid-area: header;
}
#footer {
grid-area: footer;
}
ОТВЕТ 2:
Назад во времени:
Отменить · Нет проблем. Сложность этой темы заключается в теге br, который можно использовать непосредственно во flex-верстке, теперь, в зависимости от ситуации, он должен располагаться только горизонтально inline или inline-block. Добавление вертикальных полос может быть достигнуто комбинацией селекторов псевдоклассов и селекторов элементов псевдокласса, но я забыл селектор псевдокласса :nth-of-type.
ul {
/* 去掉 · */
list-style: none;
}
ul li {
/* 水平排列，两个都行*/
display: inline;
/* display: inline-block; */
}
В то время последнее требование для добавления вертикальной полосы было написано так.
/* 伪类选择器 + 伪类元素选择器 */
ul li:nth-child(2n)::after {
content: '|';
}
Но только за Link2 Link5 следует "|", что не удается из-за тега br.
Но это можно сделать с небольшой модификацией, но не во время интервью.
/* 伪类选择器 + 伪类元素选择器 */
ul li:nth-of-type(2n)::after {
content: '|';
}
Позже я спросил интервьюеру, как решить эту проблему и узнал, что мы можем рассмотреть селектор брата, чтобы попробовать.
TODO: 我目前还没有想出来如何处理。 Помощь!
ОТВЕТ 3:
Нечего сказать. Привязывайте события к родительским элементам для экономии памяти. Точка осмотра - некоторые операции родного дома.
document.querySelectorAll('ul')[0].addEventListener('click',event => {
if(event.target.tagName === 'A') {
event.preventDefault(); // 阻止默认行为
alert(event.target.getAttribute('href'));
}
});
Суммировать:
- Первые три метода являются относительно традиционными методами компоновки, которые действительно могут решить проблему, но являются более абстрактными.
- Grid Layout — это двухмерная система компоновки на основе сетки, цель которой — полностью изменить способ компоновки наших пользовательских интерфейсов на основе сетки. При использовании этого макета откройте отладку в хроме, и вы сможете четко увидеть наличие сетки. По сравнению с первыми тремя он интуитивно понятен и удобен.
- Селекторы псевдоклассов, которые обычно не используются в повседневной жизни, могут быть слепыми пятнами в интервью.
- После разработки javascript больше используются колеса, но необходимо понимать нижний слой.