webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add：react入门介绍

Browse Source
This commit is contained in:
qianguyihao
2019-02-08 20:10:20 +08:00
parent 96b58c88bb
commit 766e865455
55 changed files with 215 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
15-面试题积累/01-我的面试经历 by smyhvae.md Normal file
View File

@@ -0,0 +1,213 @@
## 20180323
### 什么是闭包，闭包有什么作用。
### ES6的新特性有哪些。
作用域、函数扩展（扩展运算符、默认参数、箭头函数）、异步promise、模块化。
### 追问：const常量有什么作用？确定不能修改吗？修改之后会报错吗？你有没有试过？
当时我的答案是斩钉截铁地说不能改，其实我说错了。后来查了一下，准确答案是：
- 如果是值类型，值不可变
- 如果是引用类型，地址不可变
所以说，虽然我不能修改引用类型的指向，但是我可以修改引用类型里的属性值。
参考链接：<https://segmentfault.com/q/1010000012836140?sort=created>
### 追问：const的原理是什么？
面试官问：如果你定义了const，什么是常量？是它的值还是引用？比如说，我定义了一个const 的array，那我能往里面插入数据吗？
### 箭头函数和匿名函数有什么区别吗？
箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
普通函数的this指向是动态作用域；箭头函数的this指向是依据词法作用域。
参考链接：<https://zhuanlan.zhihu.com/p/25093389>
### 可以讲一下promise的状态吗？
### 追问：如果我写setTimeout（0），再写一个promise，哪个先执行？
我回答错了。
正确答案是：任务队列可以有多个，promise的任务队列，优先级更高。具体答案还需要再仔细看看。
### http有了解吗？
- 可以讲一下它的握手过程吗？
- http的缓存有了解吗？
- get和post区别
### 做过CDN吗？
答得不具体。
百度百科的解释是：其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
### Vue相关
- vue的双向绑定怎么实现的？我是说怎么实现？
我当时是回答MVVM模式。其实还需要答出Object.defineProperty( )的细节，以及虚拟DOM。
- Vue里还有什么呢？
数据驱动、组件化。
### 事件绑定：onClick和addEventListener的区别
### 说一下DOM里的事件冒泡
### 用Webpack做过哪些功能？
### 追问：ES6转成ES5，改动代码，发现页面自动刷新。你说一下整个流程。
问的是webpack 自动刷新的流程。我没回答好。
### 追问：既然webpack可以用来配置服务器，如果我要联调，怎么办？
问：启动了webpack，就可以直接连接到后端吗？
### 说一下跨域
### gzip压缩有了解吗
### 你做过什么项目？说一下？
答：我做过电商网站。
追问：遇到过什么问题吗？
答：我遇到了性能的问题。
追问：那你说一下性能的问题
我就答出了性能相关的五大点。
### node和express有了解吗？
### 追问requireJS，是异步的吗？
是异步的。
### Vue你是怎么用的？是把所有的代码都写在一个页面里的吗
答：我是模块化写的。
问：怎么分类？
追问：vuex的的作用
### 移动端的触摸事件了解吗？
- touchstart touchmove touchend touchcancel（touchcancel当触点由于某些原因被中断时触发）
- 模拟 swipe 事件：记录两次 touchmove 的位置差，如果后一次在前一次的右边，说明向右滑了。
### 移动端的浏览器和电脑浏览器的 touch事件，有区别吗？
我说我没了解过。
追问：移动端默认会有0.2秒的延迟。
我后来查了一下：
点击延迟：是指移动端浏览器在 touchend 和 click 之间存在 300ms ～ 350ms 的延迟。
为了判断用户是否是进行双击操作。因为移动端双击是放大文字的手势操作。
主要是从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。这是因为浏览器想看看你是不是要进行双击（double tap）操作。
解决方法：
- 将click事件换成touch end事件
- FastClick：FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉。
事件发生顺序：在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click。
### 如何自定义事件
自定义事件的代码如下：
```javascript
var myEvent = new Event('clickTest');
element.addEventListener('clickTest', function () {
console.log('smyhvae');
});
//元素注册事件
element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
```
### 说一下状态码
### 手机端的web开发，怎么和原生做交互？
问：比如web网页，想调用手机的拍照功能，怎么做？再比如怎么分享到朋友圈？
### vue的生命周期，有了解吗
create和mount有什么区别吗
什么时候执行update

331
15-面试题积累/02-HTML和CSS相关.md Normal file
View File

@@ -0,0 +1,331 @@
## HTML 相关
### 你是如何理解 HTML 语义化的？
**语义化**：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。
**举例**：段落用 p，边栏用 aside，主要内容用 main 标签。
**好处：**
- 便于开发者阅读和维护
- 有利于SEO：让浏览器的爬虫和辅助技术更好的解析，
**语义化标签介绍**：
在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是`div`本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。
20180322_1120.jpg
参考链接：
- [初探 · HTML5语义化](https://zhuanlan.zhihu.com/p/32570423)
### meta viewport 是做什么用的，怎么写？
```html
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
```
控制页面在移动端不要缩小显示。
### canvas 元素是干什么的？
看 MDN 的 [canvas 入门手册](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)。
## 说一下CSS盒模型
可以参考本人的另外一篇文章：[CSS盒模型及BFC](https://github.com/smyhvae/Web/blob/master/18/02-CSS%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%8F%8ABFC.md)
### css reset 和 Normalize.css 有什么区别
> 此题考英文。
二者都是用来**统一**浏览器的默认样式：
- reset：重置。相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。（一刀切）
- `Normalize.css` ：标准化。相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。（去伪存真）
参考链接：
- [Normalize.css 与传统的 CSS Reset 有哪些区别？](https://p.baidu.com/question/ab496162636234613761335c00)
- [CSS3初始化代码Normalize.css中文版](http://www.bbsxiaomi.com/html_css/html5_css3/177.html)
- [谈谈一些有趣的 CSS 话题](https://github.com/chokcoco/iCSS)
- [前端面试之CSS总结(上)](https://segmentfault.com/a/1190000006890725)
## 如何居中（必考）
### 水平居中
1、**行内元素：**（文字、图片等水平居中）
给父亲设置：
```
text-align: center;
```
另外，**让文字的行高 等于 盒子的高度**，可以让单行文本垂直居中。
2、**块级元素：**（让标准流中的盒子水平居中）
给元素设置：（让当前元素在父亲里剧中）
```
//方式一
margin: auto;
方式二
margin: 0 auto;
```
上面的代码， `margin: auto`相当于`margin: auto auto auto auto`。`margin: 0 auto`相当于`margin: 0 auto 0 auto`，四个值分别对应上右下左。
- 垂直方向：根据规范，margin-top: auto 和 margin-bottom: auto，其计算值为0。
- 水平方向：水平方向的 auto，其计算值取决于可用空间（**剩余空间**）。
参考链接：<https://www.zhihu.com/question/21644198/answer/22392394>
### 垂直居中/水平居中（元素的高度已知）
方法：绝对定位 + margin-top
如果盒子是绝对定位的，此时已经脱标了，`margin:auto`无效。如果还想让其居中（位于父亲的正中间），可以这样做：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent {
height: 300px; /*高度已知*/
position: relative;
border: 1px solid red;
}
.child {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -50px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
</div>
</div>
</body>
</html>
```
如上方代码所示，我们先让这个高度为100px的盒子，上边线居中，然后向上移动宽度的一半(50px)，就达到了垂直居中的效果。水平居中的原理类似。
效果：
![](http://img.smyhvae.com/20180322_1843.png)
### 垂直居中/水平居中（元素的高度未知）
**方法1：**模拟表格法
将父元素设置为display:table，然后将子元素也（就是要垂直居中显示的元素）设置为display:table-cell，然后加上vertical-align:middle来实现。
html代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent {
display: table;
width: 300px;
height: 300px;
border: 10px solid pink;
}
.child {
display: table-cell;
vertical-align: middle; /*来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/
height: 200px; /*此处的宽高设置无效*/
width: 200px;
border: 10px solid blue;
}
/*实现的效果：让单元格(.child)里的内容(.content)垂直居中*/
.content {
width: 100px;
height: 100px;
border: 10px solid green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="content">
<p>测试垂直居中效果测试垂直居中效果测试垂直居中效果测试垂直居中效果</p>
</div>
</div>
</div>
</body>
</html>
```
效果：
![](http://img.smyhvae.com/20180322_1833.png)
**方式二：**绝对定位 + `margin:auto`
```css
.element {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
```
代码两个关键点：
- 上下左右均0位置定位；
- margin: auto
**方式三：**用绝对定位 + translate 位移来做
```css
div {
background-color: red;
position: absolute; 绝对定位的盒子
top: 50%; 首先，让上边线居中
transform: translateY(-50%); 然后，利用translate，往上走自己宽度的一半【推荐写法】
}
```
**方式四：**flex 布局
```css
.parent{
display: flex;/*Flex布局*/
display: -webkit-flex; /* Safari */
align-items: center;/*设置子元素在侧轴方向上的布局*/
}
```
参考链接：
- [七种方式实现垂直居中](https://jscode.me/t/topic/1936)
- [margin:auto实现绝对定位元素的水平垂直居中](http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/)
## 选择器的优先级如何确定
- 选择器越具体，优先级越高。 #xxx 大于 .yyy
- 同样优先级，写在后面的覆盖前面的。
- color: red !important; 优先级最高。
## BFC 是什么
overflow:hidden ：取消父子 margin 合并。 （另一种推荐做法：`padding-top: 0.1px;`）
## 如何清除浮动
（1）overflow: hidden
（2）.clearfix 清除浮动写在爸爸身上
```css
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 兼容 IE */
.clearfix {
zoom: 1;
}
```
## 参考链接
- [互联网公司招聘启事的正确阅读方式](https://zhuanlan.zhihu.com/p/33998813)

361
15-面试题积累/03-JS相关.md Normal file
View File

@@ -0,0 +1,361 @@
## JS 有哪些数据类型
- 基本数据类型：string number bool undefined null
- 引用数据类型：object、symbol。
另外，object 包括：数组、函数、正则、日期等对象。NaN属于number类型。
注意，数据类型里，没有数组。因为数组属于object（一旦说数组、函数、正则、日期、NaN是数据类型，直接0分）。
## Promise 怎么使用
then：
```javascript
$.ajax(...).then(成功函数, 失败函数)
```
链式 then：
```javascript
$.ajax(...).then(成功函数, 失败函数).then(成功函数2, 失败函数2)
```
如何自己生成 Promise 对象：
```javascript
function xxx(){
return new Promise(function(resolve, reject){
setTimeout(()=>{
resolve() 或者 reject()
},3000)
})
}
xxx().then(...)
```
## ajax手写
```javascript
let xhr = new XMLHttpRequest();
xhr.open('POST', '/xxxx');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}
xhr.send('a=1&b=2');
```
## 闭包是什么
```javascript
function fn1() {
var a = 2
function fn2() {
a++
console.log(a)
}
return fn2;
}
var f = fn1(); //执行外部函数fn1，返回的是内部函数fn2
f() // 3 //执行fn2
f() // 4 //再次执行fn2
console.log(a); // 会报错：a is not defined
```
参考链接：
- [JS 中的闭包是什么？](https://zhuanlan.zhihu.com/p/22486908)
## 这段代码里的 this 是什么？
1、fn() 里面的 this 就是 window
2、fn() 是 strict mode，this 就是 undefined
3、a.b.c.fn() 里面的 this 就是 a.b.c
4、new F() 里面的 this 就是新生成的实例
5、() => console.log(this) ，这个this指的是外面的 this。
参考链接：
- [this 的值到底是什么？](https://zhuanlan.zhihu.com/p/23804247)
## 什么是立即执行函数？作用是？
立即执行函数：
（1）声明一个匿名函数，（2）马上调用这个匿名函数。如下：
```javascript
(function(a, b) {
var name; //声明一个局部变量
console.log("a = " + a);
console.log("b = " + b);
})(123, 456);
```
**作用：**创建一个独立的作用域，防止污染全局变量。
因为我们只能通过函数的形式声明一个局部变量。当有了ES6之后，我们可以通过let来定义一个局部变量：
```javascript
{
let name
}
```
上面这段代码，就相当于立即执行函数。有了let，立即执行函数就毫无意义。
参考链接：
## ES6 新特性
## async/await 语法了解吗？目的是什么？
目的：把异步代码写成同步代码的形式。
我们知道，promise是这样写的：
```javascript
let promise = new Promise((resolve, reject) => {
//进来之后，状态为pending
console.log('111'); //这一行代码是同步的
//开始执行异步操作（这里开始，写异步的代码，比如ajax请求 or 开启定时器）
if (异步的ajax请求成功) {
console.log('333');
resolve();//如果请求成功了，请写resolve()，此时，promise的状态会被自动修改为fullfilled
} else {
reject();//如果请求失败了，请写reject()，此时，promise的状态会被自动修改为rejected
}
})
console.log('222');
//调用promise的then()
promise.then(() => {
//如果promise的状态为fullfilled，则执行这里的代码
console.log('成功了');
}
, () => {
//如果promise的状态为rejected，则执行这里的代码
console.log('失败了');
}
)
```
有了await之后，可以直接替换掉then。如下：
```javascript
function returnPromise(){
return new Promise( function(resolve, reject){
setTimeout(()=>{
resolve('success')
},3000)
})
}
returnPromise().then((result)=>{
result === 'success'
})
var result = await returnPromise()
result === 'success'
```
## 如何实现深拷贝
### 方式一：JSON 来深拷贝
```javascript
var a = {...};
var b = JSON.parse(JSON.stringify(a)); //先将对象转成json字符串，然后再转成对象
```
缺点：JSON 不支持函数、引用、undefined、RegExp、Date……
### 方式二：递归拷贝
```javascript
function clone(object){
var object2
if(! (object instanceof Object) ){
return object
}else if(object instanceof Array){
object2 = []
}else if(object instanceof Function){
object2 = eval(object.toString())
}else if(object instanceof Object){
object2 = {}
}
你也可以把 Array Function Object 都当做 Object 来看待，参考 https://juejin.im/post/587dab348d6d810058d87a0a
for(let key in object){
object2[key] = clone(object[key])
}
return object2
}
```
## 如何实现数组去重
### 方式1：计数排序的逻辑（只能针对正整数）
```javascript
var a = [4,2,5,6,3,4,5]
var hashTab = {}
for(let i=0; i<a.length;i++){
if(a[i] in hashTab){
// 什么也不做
}else{
hashTab[ a[i] ] = true
}
}
//hashTab: {4: true, 2: true, 5: true, 6:true, 3: true}
console.log(Object.keys(hashTab)) // ['4','2','5','6','3']
```
### 方式二：set
```javascript
Array.from(new Set(a));
```
###方式三
## 如何用正则实现 string.trim()
```javascript
function trim(string) {
return string.replace(/^\s+|\s+$/g, '')
}
```
## JS 原型是什么？
参考链接：
- [什么是 JS 原型链？](https://zhuanlan.zhihu.com/p/23090041)
## ES 6 中的 class 了解吗？
参考链接：
- <https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes>
## 如何实现继承
- 构造函数
- 原型链
- extends
```javascript
```
```javascript
```
```javascript
```
```javascript
```

65
15-面试题积累/03-http.md Normal file
View File

@@ -0,0 +1,65 @@
## HTTP 状态码知道哪些？
301 和 302 的区别：
- 301 永久重定向，浏览器会记住（有缓存）
- 302 临时重定向（无缓存）
## HTTP 缓存怎么做？
强缓存：
- **`Expires`**或**`Cache-Control`**
协商缓存：
- 第一对：`Last-Modified`、`If-Modified-Since`
- 第二对：`ETag`、`If-None-Match`
## Cookie 是什么？Session 是什么？
### Cookie
- HTTP响应通过 Set-Cookie 设置 Cookie
- 浏览器访问指定域名是必须带上 Cookie 作为 Request Header
- Cookie 一般用来记录用户信息
### Session
- Session 是服务器端的内存（数据）
- session 一般通过在 Cookie 里记录 SessionID 实现
- SessionID 一般是随机数
## LocalStorage 和 Cookie 的区别是什么？
- Cookie 会随请求被发到服务器上，而 LocalStorage 不会
- Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右
## GET 和 POST 的区别是什么？
GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
需要注意的是，web 中的 get/post 只是 http 中的 get/post 的子集。http 中的 get 与 post 只是单纯的名字上的区别，get 请求的数据也可以放在 request body 中，只是浏览器没有实现它，但是 get 并不只是在 web 中使用
参考链接：
- <http://www.cnblogs.com/zichi/p/5229108.html>
- <https://zhuanlan.zhihu.com/p/22536382>

360
15-面试题积累/04-变量提升的题目.md Normal file
View File

@@ -0,0 +1,360 @@
## 变量提升
先说三句总结性的话：
- let 的「创建」过程被提升了，但是初始化没有提升。
- var 的「创建」和「初始化」都被提升了。
- function 的「创建」「初始化」和「赋值」都被提升了。
### 变量提升的规律
在进入一个执行上下文后，先把 var 和 function 声明的变量前置，再去顺序执行代码。
PS：作用域分为全局作用域和函数作用域，用var声明的变量，只在自己所在的所用域有效。
我们举例来看看下面的代码。
**代码 1：**
```javascript
console.log(fn);
var fn = 1;
function fn() {
}
console.log(fn);
```
相当于：
```javascript
var fn = undefined;
function fn() {
}
console.log(fn);
fn = 1;
console.log(fn);
```
打印结果：
![](http://img.smyhvae.com/20180321_1810.png)
**代码 2：**
```javascript
console.log(i);
for (var i = 0; i < 3; i++) {
console.log(i)
}
```
相当于：
```javascript
var i = undefined;
console.log(i);
for (i = 0; i < 3; i++) {
console.log(i);
}
```
打印结果：
![](http://img.smyhvae.com/20180321_1817.png)
**代码 3：**
```javascript
var a = 1;
function fn() {
a = 2;
console.log(a)
var a = 3;
console.log(a)
}
fn();
console.log(a);
```
相当于：
```javascript
var a = undefined;
function fn() {
var a
a = 2
console.log(a)
a = 3
console.log(a)
};
a = 1;
fn();
console.log(a);
```
打印结果：
![](http://img.smyhvae.com/20180321_1827.png)
参考链接：<https://github.com/jirengu/javascript-tutorial>
### 声明时的重名问题
假设`a`被声明为变量，紧接着`a`又被声明为函数，原则是：声明会被覆盖（先来后到，就近原则）。
PS：
- 如果`a`已经有值，再用 var 声明是无效的。
- 如果`a`已经有值，紧接着又被赋值，则**赋值会被覆盖**。
举例1：
```javascript
var fn; //fn被声明为变量
function fn() {// fn被声明为function，就近原则
}
console.log(fn); //打印结果：function fn(){}
```
举例2：
```javascript
function fn() {} //fn被声明为function，且此时fn已经被赋值，这个值就是function的对象
var fn; //fn已经在上一行被声明且已经有值， 再 var 无效，并不会重置为 undefined
console.log(fn) //打印结果：function fn(){}
```
既然再var无效，但是再function，是有效的：
```javascript
function fn() {} //fn被声明为function，且此时fn已经有值，这个值就是function的对象
function fn() { //此时fn被重复赋值，会覆盖上一行的值
console.log('smyhvae');
}
console.log(fn)
```
打印结果：
![](http://img.smyhvae.com/20180321_1845.png)
### 函数作用域中的变量提升（两点提醒）
**提醒1：**
在函数作用域也有声明提前的特性：
- 使用var关键字声明的变量，是在函数作用域内有效，而且会在函数中所有的代码执行之前被声明
- 函数声明也会在函数中所有的代码执行之前执行
因此，在函数中，没有var声明的变量都会成为**全局变量**，而且并不会提前声明。
举例1：
```javascript
var a = 1;
function foo() {
console.log(a);
a = 2; // 此处的a相当于window.a
}
foo();
console.log(a); //打印结果是2
```
上方代码中，foo()的打印结果是`1`。如果去掉第一行代码，打印结果是`Uncaught ReferenceError: a is not defined`
**提醒2：**定义形参就相当于在函数作用域中声明了变量。
```
function fun6(e) {
console.log(e);
}
fun6(); //打印结果为 undefined
fun6(123);//打印结果为123
```
### 其他题目
**20180321面试题：**
```javascript
var a = 1;
if (a > 0) {
console.log(a);
var a = 2;
}
console.log(a);
```
打印结果：
```
1
2
```
上方代码中，不存在块级作用域的概念。if语句中用var定义的变量，让然是全局变量。
顺便延伸一下，用let定义的变量，是在块级作用域内有效。
```javascript
```
```javascript
```
```javascript
```
```javascript
```
```javascript
```

5
15-面试题积累/05-BAT爱考的JS面试题.md Normal file
View File

@@ -0,0 +1,5 @@
## this 在各个场景下的指向

167
15-面试题积累/20180116-博客园：一年经验初探阿里巴巴前端社招.md Normal file
View File

@@ -0,0 +1,167 @@
博客园：一年经验初探阿里巴巴前端社招
文章来源：<https://www.cnblogs.com/fsyz/p/8298921.html>
一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。
虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己经验不足，然后给boss说我是16届的，只有一年经验，然后就没有然后了。这次我依然这么回复，但是这boss说，没关系，他喜欢基础好的，让我可以试一试，于是我也抱着试一试的心态发了简历。
简历发过去之后，boss就给我打了电话，让我简单的介绍一下自己，我就噼里啪啦说了一些，还说了一些题外话。然后boss就开始问我问题。
由于面了四轮，所以最开始的面试记忆有点模糊了，细细回想，又感觉记忆犹新。
1.电话初探
1.说一下你了解CSS盒模型。
我就说了一下IE的怪异盒模型和标注浏览器的盒模型，然后可以通过box-sizing属性控制两种盒模型的变换。
2.说一下box-sizing的应用场景。
这个也不难，简单说了一两个应用场景，具体就不一一细说了。
3.说一下你了解的弹性FLEX布局.
这个我也比较了解，各种概念和属性能想到的说了一大堆，也扯到了Grid布局，基本这个也没啥问题。
4.说一下一个未知宽高元素怎么上下左右垂直居中。
说了一下flex弹性布局的实现，说了一下兼容性，扯到了postcss的一些东西，然后说了一下常规的兼容性比较好的实现。
5.说一下原型链，对象，构造函数之间的一些联系。
这个我之前写过相关的文章，自己也有比较深入的理解，所以这个也不在话下，噼里啪啦说了一大堆，也不知道面试官听得咋样。
6.DOM事件的绑定的几种方式
说了三种，然后说了一些冒泡，默认事件，以及DOM2，DOM3级的一些标准。
7.说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的。
这个因人而异，开放性问题，主要考察平时项目的一些积累吧，这个我回答感觉也比较ok。
8.有没有了解http2.0,websocket,https，说一下你的理解以及你所了解的特性。
这个我看过一些文章，但是没有什么印象，扯了一些概念，但是回答的不是很深。
第一轮电话初探，大约面了50分钟，就记起来这么多，还有一些细节问题可能淡忘了，总体来说，面的都是以基础为主，然后boss说把我简历推荐给内部，进行正式的社招流程。
一轮技术面
然后当天晚上一个女的面试官就给我打电话了，说八点半进行下一轮技术面试，没想到效率这么快，我都没怎么准备。
这次就直接省略自我介绍了。
1.webpack的入口文件怎么配置，多个入口怎么分割啥的，我也没太听清楚。
这个自己就说了一下自己的理解，以及自己用node写的多入口怎么配置，然后面试官说不是多入口配置，然后我又说了一下自己的理解，然后这题就过了。
2.我看到你的项目用到了Babel的一个插件：transform-runtime以及stage-2，你说一下他们的作用。
这个我也还算比较了解，就说了一下ES的一些API，比如generator啥的默认不转换，只转换语法，需要这个来转换，然后说profill啥的，扯了一下stage-1，stage-2，stage-3，这个问题回答还算清楚。
3.我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin这个插件，有没有觉得压缩速度很慢，有什么办法提升速度。
这个我主要回答了一下，我之前也没怎么了解，一个想到是缓存原理，压缩只重新压缩改变的，还有就是减少冗余的代码，压缩只用于生产阶段，然后面试官问还有呢？我就说，还可以从硬件上提升，可以得到质的飞跃，比如换台I9处理器的电脑。。。。
4.简历上看见你了解http协议。说一下200和304的理解和区别
这个噼里啪啦说了一堆，协商缓存和强制缓存的区别，流程，还有一些细节，提到了expires,Cache-Control,If-none-match,Etag,last-Modified的匹配和特征，这一块之前有过比较详细的了解，所以还是应答如流。
5.DOM事件中target和currentTarget的区别
这个没答上来。。。
6.说一下你平时怎么解决跨域的。以及后续JSONP的原理和实现以及cors怎么设置。
我就说了一下Jason和cors,然后问我JSONP的原理以及cors怎么设置，这一块自己也实践过，所以还是对答如流的。
7.说一下深拷贝的实现原理。
这个也还好，就是考虑的细节不是很周全，先是说了一种JSON.stringify和JSON.parse的实现，以及这种实现的缺点，主要就是非标准JSOn格式无法拷贝以及兼容性问题，然后问了我有么有用过IE8的一个什么JSON框架，我也不记得是什么了，因为我压根没听过，然后说了一下尾递归实现深拷贝的原理，还问了我typeof null是啥，这个当然是Object。。。
8.说一下项目中觉得可以改进的地方以及做的很优秀的地方？
这个也是因人而异，开放性问题，大致扯了一下自己的经历，也还OK。
最后问了有什么需要问的地方，面试到这里基本就结束了，大约面了一个多钟头，还是蛮累的。总体来说，回答的广度和深度以及细节都还算OK，觉得这轮面试基本没什么悬念。
二轮技术面
过了几天，接到阿里另一个面试官的电话，上一轮面试通过了，这次是二轮技术面，说估计一个钟头。这次依然跳过自我介绍之类的，直奔主题。
1.有没有自己写过webpack的loader,他的原理以及啥的，记得也不太清楚。
这个我就说了一下，然后loader配置啥的，也还ok。
2.有没有去研究webpack的一些原理和机制，怎么实现的。
这个我简单说了一下我自己了解的，因为这一块我也没深入去研究，所以说的应该比较浅。
3.babel把ES6转成ES5或者ES3之类的原理是什么，有没有去研究。
这一块我说了一下自己的思路，大致也还OK，我也没去深入研究怎么转换的，之前好像看过类似的文章，自己也只观察过转换之后的代码是啥样的，至于怎么转换的规则，真的没去深入观察。
4.git大型项目的团队合作，以及持续集成啥的。
这里我就说了一下自己了解的git flow方面的东西，因为没有实战经验，所以我就选择性说明了这一块的不熟练，然后面试官也没细问。
5.什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？
这个我就说了一下函数柯里化一些了解，以及在函数式编程的应用，最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。
6.ES6的箭头函数this问题，以及拓展运算符。
这一块主要是API和概念的问题，扯了一些规范以及严格模式下其他情况this只想问题。
7.JS模块化Commonjs,UMD,CMD规范的了解，以及ES6的模块化跟其他几种的区别，以及出现的意义。
这个也是说了一下自己的理解和认知，自己对模块化历史以及一些规范都有所涉猎，这一块也还凑合。
8.说一下Vue实现双向数据绑定的原理，以及vue.js和react.js异同点，如果让你选框架，你怎么怎么权衡这两个框架，分析一下。
主要是发布订阅的设计模式，还有就是ES5的Object.defineProperty的getter和setter机制，然后顺便扯了一下Angular的脏检测，以及alvon.js最先用到这种方式。然后扯了一下vue.js和react.js异同点，权衡框架选择，调研分析之类，噼里啪啦说了一大堆。
9.我看你也写博客，说一下草稿的交互细节以及实现原理。
这一款就按照自己用过简书或者掘金，SG这类草稿的体验，详细说了一下，这个开放性问题，说到点基本就OK。
最后面试官问我有什么想问的吗，面试到这里基本就结束了，差不多面了一个小时，说过几天就会给答复，如果过了就会去阿里园区进行下一轮的技术面。
三轮技术面
上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。
因为阿里西溪园区距离我不到十公里，我就踩着共享单车一点钟就出发了，天气比较热，飘在路上，百感交集，身边一辆法拉利轰鸣而过，又一辆兰博基尼呼啸而过，我心里一万头草泥马奔腾，MLGB，心里暗想，为神马开这车的人不是此刻看文章的你？
走到半路了，面试官给我打电话了，说我怎么还没到，说约定的是两点钟，我一下子就懵逼了，短信只有一个游客访问ID，并没有通知我具体时间，反正不管谁的疏忽，我肯定是要迟到了，于是我快马加鞭，踩着贼难骑的共享单车，背着微风，一路狂奔，到阿里园区已是汗流浃背，油光满面，气喘乎乎。。。
面试迟到了，印象肯定不好，加上满头大汗的形象也不太好，加上自己饥渴难耐，这面是估计要GG了，一进来就直奔主题，这次是两个大Boss面试我。
第一个面试官
1.先自我介绍一下，说一下项目的技术栈，以及项目中遇到的一些问题啥的。
这个问题就是个开场白，简要说明一下，问题都不大，这个面试官就是第一次打电话给我面试的那个boss，所以技术那块boss心里也有个底细，所以没再问技术问题。
2.一个业务场景，面对产品不断迭代，以及需求的变动该怎么应对，具体技术方案实现。
具体业务场景，我就不一一描述，Boss在白板上画了一个大致的模块图，然后做了一些需求描述。
然后需求一层一层的改变，然后往下挖，主要是考察应对产品能力，以及对代码的可维护性和可拓展性这些考察，开放性问题，我觉得还考察一些沟通交流方面的能力，因为有些地方面试官故意说得很含糊，反正就是一个综合能力，以及对产品的理解，中间谈到怎么实现，也问到了一些具体的点，记得问到的有一下几个。
① 怎么获取一个元素到视图顶部的距离。
② getBoundingClientRect获取的top和offsetTop获取的top区别
③事件委托
第二个面试官
1.业务场景：比如说百度的一个服务不想让阿里使用，如果识别到是阿里的请求，然后跳转到404或者拒绝服务之类的？
主要是考察http协议头Referer，然后怎么判断是阿里的ip或者啥的，我也不太清楚。
2.二分查找的时间复杂度怎么求，是多少
。。。排序的还算清楚一点，查找真的不知所措，没回答上来，也没猜，意义不大，不会就是不会。
3.XSS是什么，攻击原理，怎么预防。
这个很简单，跨站脚本攻击XSS(cross site scripting)，攻击类型主要有两种：反射型和存储型，简单说了一下如何防御：
①转义
②DOM解析白名单
③第三方库
④CSP
自己对web安全这块系统学习过，前前后后大约了解了很多，对于XSS,CSRF,点击劫持，Cookie安全，HTTP窃听篡改，密码安全，SQL注入，社会工程学都有一定了解，所以这个自然也不在话下。
4.线性顺序存储结构和链式存储结构有什么区别？以及优缺点。
我是类比JS数组和对象来回答的，反正还算凑合吧，自己都数据结构这块多少还是有些印象，所以入了前端，对数据结构和算法确实一直淡忘了。
5.分析一下移动端日历，PC端日历以及桌面日历的一些不同和需要注意的地方。
这个我能想到的大致都说了一遍，不同的场景交互和细节以及功能都有所偏差，以及功能的侧重都可能不同。
6.白板写代码，用最简洁的代码实现数组去重。
我写了两种实现方式：
ES6实现：
[...new Set([1,2,3,1,'a',1,'a'])]
ES5实现：
[1,2,3,1,'a',1,'a'].filter(function(ele,index,array){
return index===array.indexOf(ele)
})
7.怎么实现草稿，多终端同步，以及冲突问题？
这个回答的不算好，本来也想到类比git的处理方式，但是说的时候往另外一个方面说了，导致与面试官想要的结果不一样。
最后说目前的工作经验达不到P6水平，业务类稍弱，阿里现在社招只要P6的高级工程师，但是可以以第二梯队进去，就是以第三方签署就业协议，一年后可以转正，就是俗称的外包。多少还是有点遗憾，面了四轮面了个外包，最后放弃这份工作了。
最后，感谢boss一直以来的关照和器重。
学习前端的同学们，欢迎加入前端学习交流群
前端学习交流QQ群：461593224

16
15-面试题积累/函数.md Normal file
View File

@@ -0,0 +1,16 @@
```
var arr = [1, 2, 3];
fun(arr);
console.log(arr);
function fun(a) {
a = [];
}
```
上方代码的打印结果是：[1,2,3]

35
15-面试题积累/异步.md Normal file
View File

@@ -0,0 +1,35 @@
## 面试题
### 20180321面试题
```javascript
console.log(1);
setTimeout(function () {
console.log(2);
}, 1000);
setTimeout(function () {
console.log(3);
}, 0);
console.log(4);
```
### 20180321面试题
```javascript
var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
setTimeout(function () {
console.log(i);
}, 0);
}
```
打印结果：3，3，3

21
15-面试题积累/清单.md Normal file
View File

@@ -0,0 +1,21 @@
01.md
### CommonJS、RequireJS(AMD) SeaJS（CMD）区别
### Webpack 打包
### WebSocket
### ES6
会 ES6 是应该的部分，不算加分项。

63
15-面试题积累/面经链接推荐.md Normal file
View File

@@ -0,0 +1,63 @@
### 2018-01-25
- [有时在面试时，我都替候选人着急——候选人完全可以在面试前准备](https://www.cnblogs.com/JavaArchitect/p/8353578.html)
### 2018-01-26
- [转眼人到中年：前端老程序员无法忘怀的一次百度电话面试](https://www.cnblogs.com/chyingp/p/a-telephone-interview-long-age.html)
八年前的面经，咋记得这么清楚？
### 2018-01-27
- [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html)
### 2018-02-04
- [2018秋招前端总结](https://www.cnblogs.com/Mr-stockings/archive/2018/02/02/8407295.html)
### 2018-02-25
- [前端开发面试题(CSS)](http://www.bijishequ.com/detail/379621)
- [超过20家的前端面试题](https://www.jianshu.com/p/8b68f4df749e)
- [来聊聊前端工程师的面试套路](https://baijiahao.baidu.com/s?id=1570338146494165&wfr=spider&for=pc)
- [我的前端进阶之路（面试题）](https://www.cnblogs.com/libin-1/p/6864344.html)
这几个链接里讲到了 less。听说面试爱问 less 和 Sass的区别。
### 2018-03-02
- [记录前端的面试日常(持续更新)](https://www.cnblogs.com/fangdongdemao/p/8492563.html)
### 2018-03-06
- [我遇到的前端面试题2017](https://segmentfault.com/a/1190000011091907)
里面有很多面试跳槽里的内容。