A few days ago, I went to B station to have an interview with the front end. I am not a senior USER of B station and usually like watching videos in B station. I am really flattered and surprised to get such an interview opportunity. But the limited strength and trifles, and did not do enough preparation, resulting in the interview failure.
(PS: True or a little nervous, play also affected)
After thinking over the interview process, I think it is necessary to summarize, and I hope I can grasp the opportunity better next time.
It’s going to be a lot of content, so I’m going to probably update it in more than one blog post. Here’s the portal
- HTML layout, CSS selector and JS basic comprehensive ability knowledge
- Algorithm: array flat, deduplication and sort
- React Vue Understanding and basics
- Cross-domain problem solution
- HTTP protocol status code
- Cache and update issues
- Webviews interact with native applications
- Server-side knowledge
Ps: This is the outline, subject to change later. For example, server side knowledge, I have not touched, the interviewer did not ask, but it is a big category of questions in the interview process.
The interview feeling
The interview process was very comfortable, the interviewer was very patient, the interview questions were simple and in-depth, and I would give 5 stars for the interview score.
HTML layout, CSS selector and JS basic comprehensive ability knowledge
<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>
Copy the codeRegardless of compatibility and without changing the DOM structure, the requirements are as follows:
- Complete the classic top header, bottom footer, left side sidebar, right side content.
- Remove the · from the front of the list, and arrange the list items horizontally. Note that the br label in the list needs to be wrapped, and that there is a vertical line after every two Li’s.
- Clicking on the list item does not jump to the content in href.
ANSWER 1:
Back in time:
This interview question is a foundation problem, I should show my interviewer garment basic skill, also want to tell the interviewer at the same time, I have a focus on the front is the latest dynamic, since no account of compatibility, I have to use the Grid plan implementation again, and then tell the interviewer I have about 108 different kinds of solutions, 😃 ha ha ha… . Grid display: Grid display: Grid display: Grid When I was thinking about Grid, I wasted too much time. I had to find a simple way to write it first, otherwise I would have to do the basic questions for so long.
Floating solution:
/ * * * calc is a function of CSS * don't understand the classmate I attach link * https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc * /
#side {
/* Set the sidebar to float left */
float: left;
height: calc(100% - 100px);
}
#main {
height: calc(100% - 100px);
}
Copy the codePosition solution:
#app {
/* Parent element set relative positioning */
position: relative;
}
#side {
/* The left sidebar sets absolute positioning */
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
}
#main {
/* Content area set absolute positioning */
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 200px;
}
#footer {
/* footer set absolute positioning */
position: absolute;
bottom: 0;
width: 100%; /* After setting the float, fill in the width */
}
Copy the codeFlex solutions:
❌ I found it difficult to use Flex to implement this requirement due to the inability to change the DOM structure. Or ask for advice.
When I was having dinner in the evening, I suddenly came up with the idea of Flex to solve this problem. Thank you for your help in the comments section.
#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%;
}
Copy the codeGrid solution:
The resources
- MDN Grid is introduced
- Grid Layout tutorial. recommended
This article doesn’t need to cover all of the Grid, so you can get more information on the portal if you need it. I’m going to show you what I used.
#app {
/* App is the container for grid layout, so create grid layout here */
display: grid;
/** This is an abbreviated form equivalent to grid-template-rows: 50px auto 50px; grid-template-columns: 200px auto; Create a 3 × 2 grid with a height of 50px auto and a width of 50px auto */
grid: 50px auto 50px / 200px auto;
}
/* The header is tucked away in the corner, etc. */
#header.#footer {
/** *- *- important -*- grid-column-star: 1; grid-column-end: 3; The grid's children start with the first column line and end with the third column line */
grid-column: 1 / 3;
}
Copy the code#app {
display: grid;
/** Equivalent to grid-template-rows: 50px auto 50px; grid-template-columns: 200px auto; grid-template-areas: "header header" "side main" "footer footer"; Note: Each row is just a string */
grid: "header header" 50px "side main" auto "footer footer" 50px / 200px auto;
}
#header {
/* Note: header does not have double quotation marks */
grid-area: header;
}
#footer {
grid-area: footer;
}
Copy the codeANSWER 2:
Backtracking:
Cancel · No difficulty. The difficulty of this problem lies in the br tag. The layout should be inline or inline-block depending on the situation, instead of using flex layout directly. Vertical lines can be implemented with a combination of pseudo-class selectors and pseudo-class element selectors, but I forgot: nTH-of-type pseudo-class selectors.
ul {
/* remove · */
list-style: none;
}
ul li {
/* horizontal, either */
display: inline;
/* display: inline-block; */
}
Copy the codeThe last requirement for a vertical bar, I wrote it like this.
/* Pseudo-class selector + pseudo-class element selector */
ul li:nth-child(2n)::after {
content: '|';
}
Copy the codeBut only Link2 Link5 behind “|”, will appear because of br tag, failure.
But it could have been done with a few modifications, but it wasn’t done during the interview.
/* Pseudo-class selector + pseudo-class element selector */
ul li:nth-of-type(2n)::after {
content: '|';
}
Copy the codeLater, I asked the interviewer how to solve this problem, and was told that I could consider trying brother selector.
TODO: I haven’t figured out how to handle it yet. Help!
ANSWER 3:
There’s nothing to tell. Bind events to parent elements, saving memory. The point of investigation is some operations on the native DOM.
document.querySelectorAll('ul') [0].addEventListener('click',event => {
if(event.target.tagName === 'A') {
event.preventDefault(); // Prevent default behavior
alert(event.target.getAttribute('href')); }});Copy the codeConclusion:
- The first three are more traditional layouts that do solve the problem, but are more abstract.
- Grid layout is a two-dimensional grid-based layout system that aims to completely change the layout of our grid-based user interfaces. When using this layout, open debug in Chrome and the grid is clearly visible. Compared with the first three, intuitive, convenient and fast.
- Pseudo-class selectors, which may not be used in everyday life, can be a blind spot in an interview.
- With javascript engineered, wheels are used a lot, but you also need to understand the underlying layers.