网易跨境电商web前端面试

记录一次web前端面试经历:春节过后回到学校就开始找工作,简历到处投递,但是回应者寥寥无几,也许是前端开发供大于求,也许是互联网寒冬,也许是就业压力大。这次去网易面试的机会是我偶然看到脉脉上有帮忙内推的我就发了一份简历,结果真的就收到了面试邀请。

面试虽然没有通过,但是每一次面试都是一个学习的过程,必须要总结经验,所以下面是面试中遇到的问题:

自我介绍

我想到小岳岳的一句话:口齿伶俐,表演大方。肚子里有东西但是说不出来就跟没有一样的,说起来有点功利,但是提前打好草稿还是有必要的,先说什么后说什么。重点是什么,都需要提前考虑好的。

面试题目

两列布局:

css实现一个左侧固定(200px),右侧自适应的两列布局:
我首先就想到了前几天在慕课网学习《Vue.js高仿饿了么》时用到的flex布局,html代码如下:

1
2
3
4
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>

flex布局代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.main {
width: 100%;
height: 100%;
display: flex;
}

.left {
flex: 0 0 200px;
background-color: #ff00ff;
height: 100%;
}

.right {
flex: 1;
height: 100%;
background-color: #00ffff;
}

flex布局教程参见阮一峰老师的博客,这里不再赘述。简单写一下flex布局的参数含义:
flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。

1
2
3
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

  • flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
  • flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
  • flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

浮动+IE盒子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.main {
width: 100%;
height: 100%;
}

.left {
width: 200px;
background-color: #ff00ff;
height: 100%;
float: left;
}

.right {
box-sizing: border-box;
width: 100%;
height: 100%;
background-color: #00ffff;
padding-left: 200px;
}

浮动+margin

把div.right的样式改成这样也可以:

1
2
3
4
5
.right {
height: 100%;
background-color: #00ffff;
margin-left: 200px;
}

或者:

1
2
3
4
5
.right {
height: 100%;
background-color: #00ffff;
overflow: auto;
}

垂直+左右居中

HTML代码:

1
2
3
<div class="main">
<div class="content"></div>
</div>

margin+relative+top

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.main {
width: 100%;
height: 100%;
}

.content {
position: relative;
top: 50%;
width: 500px;
height: 500px;
margin: -250px auto 0;
background: #ff00ff;
}

translateY(-50%);

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.main {
width: 100%;
height: 100%;
}

.content {
position: relative;
top: 50%;
width: 500px;
height: 500px;
margin: 0 auto;
background: #ff00ff;
transform: translateY(-50%);
}

flex

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.main {
width: 100%;
height: 100%;
display: flex;
align-items: center;
/*定义body的元素垂直居中*/
justify-content: center;
/*定义body的里的元素水平居中*/
}

.content {
width: 500px;
height: 500px;
background: #ff00ff;
}

http状态码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
100  Continue  继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求,但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后,请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

ajax创建过程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.
(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.
(3)设置响应`HTTP`请求状态变化的函数.
(4)发送`HTTP`请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

}
}

写在最后

由于自己表现的不好,就没有问很深入的问题,最后一项往往是面试官问应聘者有什么问题要问吗,我就来了个套路:我距离这个岗位还有什么不足的地方?得到的回答是:CSS基础不好,js基础也要加强···
内心:gg了

0%