1. git pull 、git fetch区别

• git fetch 拉取远程更新，不merge
• git pull 拉取远程更新并merge到本地(相当于git fetch & git merge FETCH_HEAD)

2. git merge操作

• git checkout master 切换到主分支
• git pull 拉取远程最新代码
• git checkout yourBranch 切换自己的分支
• git merge master合并主分支新内容到自己的分支

3. express洋葱模型

app.use(function middleware1(req, res, next) {
  console.log('A middleware1 开始')
  next()
  console.log('B middleware1 结束')
})

app.use(function middleware2(req, res, next) {
  console.log('C middleware2 开始')
  next()
  console.log('D middleware2 结束')
})

app.use(function middleware3(req, res, next) {
  console.log('E middleware3 开始')
  next()
  console.log('F middleware3 结束')
})

app.get('/', function handler(req, res) {
  res.send('ok')
  console.log('======= G =======')
})

// A middleware1 开始
// C middleware2 开始
// E middleware3 开始
// ======= G =======
// F middleware3 结束
// D middleware2 结束
// B middleware1 结束

            --------------------------------------
            |            middleware1              |
            |    ----------------------------     |
            |    |       middleware2         |    |
            |    |    -------------------    |    |
            |    |    |  middleware3    |    |    |
            |    |    |                 |    |    |
          next next next  ———————————   |    |    |
请求 ——————————————————> |  handler  | — 收尾工作->|
响应 <—————————————————  |     G     |  |    |    |
            | A  | C  | E ——————————— F |  D |  B |
            |    |    |                 |    |    |
            |    |    -------------------    |    |
            |    ----------------------------     |
            --------------------------------------


顺序 A -> C -> E -> G -> F -> D -> B
    \---------------/   \----------/
            ↓                ↓
        请求响应完毕        收尾工作

4. plugin和loader区别

• loader译为加载器，主要用于加载资源文件，webpack默认只支持加载js文件，使用loader可以实现css,less等文件的资源转化
• plugin主要用于拓展webpack的功能，例如打包压缩，定义环境变量等功能

5. axios拦截器实现

• 定义一个拦截器类

  // 拦截器
  class Interceptor {
  constructor() {
    this.handlers = [];// 保存拦截器传入的回调
  }
  use(resolveHandler, rejectHandler) {
    this.handlers.push({
      resolveHandler,
      rejectHandler
    })
  }
  }
  export default Interceptor

• 在请求前和返回结果后分别触发请求拦截和响应拦截，使用promise实现传值

  /* this代表axios实例指向 */
  let promise = Promise.resolve(configs);
  // 触发请求拦截器内的所有回调
  this.interceptors.request.handlers.forEach(handler => {
  promise = promise.then(handler.resolveHandler, handler.rejectHandler);
  })
  // 发请求
  promise = promise.then(this.dispatch, undefined);
  // 触发响应拦截器所有回调
  this.interceptors.response.handlers.forEach(handler => {
  promise = promise.then(handler.resolveHandler, handler.rejectHandler);
  })

6. 怎样捕获全站的错误

监听window点error事件

window.onerror = function (event, source, line, col, err) {
  console.log(event, '\n', source, '\n', line, '\n', col, '\n', err)
}
const a = 1;
a = 0;
//  Uncaught TypeError: Assignment to constant variable. 
//  http://127.0.0.1:5500/test.html 
//  16 
//  7 
//  TypeError: Assignment to constant variable.

7. svn和git优缺点

svn

• 集中式版本控制，易管理
• 适合人数不多的项目
• 不做快照的情况下所有历史版本记录都在服务器，服务器硬盘故障可能导致历史数据永久丢失
• commit直接提交到中心库
• 必须连接在服务器上，否则基本不能工作、提交、对比、还原等
• 服务器压力较大

git

• 分布式版本控制，每个人都有一份代码和历史记录
• 适合多人协作
• 除了pull和push需要联网，其余操作均可本地完成
• 良好的分支机制，可以让主干代码保持干净
• 速度快， 成熟的架构，开发灵活

8. 使用z-index失效的情况

• 父元素position是relative
• 元素是static定位
• 该元素设置了float浮动

9. 为什么要有同源策略

提高安全性，防止获取窃取不同源的资源实现非法操作（例如在网站中嵌入一个iframe，里面是淘宝的登陆页面，如果没有同源策略，用户登录后就可以通过操作iframe获取cookie等身份校验信息从而实现非法操作）

10. 清除float浮动

清除浮动的几种方式

.parent{
    zoom:1;
}
.parent:after{
    content:"";
    clear:both;
    display: block;
    visibility: hidden;
}

11. compute和watch哪个性能好

• computed使用场景：多个数据影响一个数据

• watch使用场景：一个数据影响多个数据

• 性能比较，哪位大神来说说

12. 计算机网络各层

通俗易懂的讲计算机网络5层结构

• 物理层：将各个物理设备连接起来，规定了网络电气特性，负责传送0和1的信号
• 链路层：确定了物理层数据分组方式，以帧为单位，每一帧包含了Head（18字节）和Data，Head中包含MAC地址等信息，在子网中以广播的形式确定接收方，若不在同一子网，则为接收端网关的MAC地址
• 网络层：建立主机到主机的通信，使用IP地址，以路由方式确定接收设备所在子网，以IP数据包为单位，包含Head（20-60字节）和Data，Head包含了源IP、目的IP等信息，IP数据包最大为1500字节，多出将被分组发送
• 传输层：建立端口到端口的通信，使用TCP或者UDP传输数据，数据包也包含Head和Data，Head中包含了标志位，源端口、目的端口等信息
• 应用层：规定应用程序的数据格式，应用层收到传输层的数据，根据格式使用不同的应用程序进行解读
  

13. Object.keys()和for in区别

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.hobbies = ['eat'];
let p = new Person;
// 不遍历原型上的属性
console.log(Object.keys(p));// [ 'name', 'age' ]
// 可遍历原型链上的可枚举属性
for (let item in p) {
  console.log(item);// name age hobbies
}

14. map和forEach区别

map可以用来遍历并返回一个由return值组成的新数组，forEach只用来遍历，返回值为undefined

let arr = [1, 2, 3];
let newArr = arr.forEach(function (item, index) {
  return item * item;
});
console.log(arr, newArr);// [ 1, 2, 3 ] undefined

arr = [1, 2, 3];
newArr = arr.map(function (item, index) {
  return item * item;
});
console.log(arr, newArr);// [ 1, 2, 3 ] [ 1, 4, 9 ]