2020年前端面试集锦（DOM HTTP 框架（Vue））

DOM

• 事件委托
  参考答案 :
  简易版 （有缺陷 没有考虑子元素 ）: bug 在于，如果用户点击的是 li 里面的 span，就没法触发 fn，这显然不对

  ul.addEventListener('click',function(e){
  if(e.target.tagName.toLowerCase() === 'li'){
    fn() // 执行某个函数 
    //console.log('您点击了li')
  }
})
。

高级版 ：思路是点击 span 后，递归遍历 span 的祖先元素看其中有没有 ul 里面的 li。

function delegate(element, eventType, selector, fn) {
     element.addEventListener(eventType, e => {
       let el = e.target
       while (!el.matches(selector)) {
         if (element === el) {
           el = null
           break
         }
         el = el.parentNode
       }
       el && fn.call(el, e, el)
     })
     return element
   }

• 用mouse事件 写一个可以拖拽的div
  参考答案 : 该题考察的比较全面 http://js.jirengu.com/mowevogufa/8/edit

//HTML 部分 

// CSS部分 
div{
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}
*{margin:0; padding: 0;}
//JS部分 
//用户按下鼠标标记 判断是否在拖拽 默认没有 
var dragging = false
//上一次的坐标 默认为空 
var position = null

xxx.addEventListener('mousedown',function(e){
//   用户按下鼠标 开始拖拽  
  dragging = true
//   用户按下鼠标的时候 获取xy 
  position = [e.clientX, e.clientY]
})

// 监听鼠标的移动  mousemove 只能监听在document上面
document.addEventListener('mousemove', function(e){
  if(dragging === false){return}
  console.log('hi')
//  获取鼠标坐标 
  const x = e.clientX
  const y = e.clientY
  console.log(x,y)
//   位移 距离 用户鼠标移动的 距离 这一次 减去上一次的 
  const deltaX = x - position[0]
  const deltaY = y - position[1]
//   先换算单位 
  const left = parseInt(xxx.style.left || 0)
  const top = parseInt(xxx.style.top || 0)
//   位移写到div上面
  xxx.style.left = left + deltaX + 'px'
  xxx.style.top = top + deltaY + 'px'
//   这一次的坐标 继承 下一次的开始 
  position = [x, y]
})
document.addEventListener('mouseup', function(e){
  dragging = false
})

HTTP

• HTTP 状态码知道哪些？分别什么意思？
  参考答案 ：
  — 2xx 表示成功
  — 3xx 表示需要进一步操作
  — 4xx 表示浏览器（客户端）方面出错
  — 5xx 表示服务器方面出错
  — 完整参考 http://www.runoob.com/http/http-status-codes.html

• HTTP 缓存有哪几种？
  参考答案：* 需要详细的了解 ETag、CacheControl、Expires 的异同
  -- 参考 https://imweb.io/topic/5795dcb6fb312541492eda8c
  答题要点
  1.ETag 是通过对比浏览器和服务器资源的特征值（如MD5）来决定是否要发送文件内容，如果一样就只发送 304（not modified）
  2.Expires 是设置过期时间（绝对时间），但是如果用户的本地时间错乱了，可能会有问题
  3.CacheControl: max-age=3600 是设置过期时长（相对时间），跟本地时间无关。

• GET 和 POST 的区别 （常考）
  参考答案：（误解颇多 错解，但是能过面试）
  1.GET在浏览器回退时是无害的，而POST会再次提交请求。
  2.GET产生的URL地址可以被加入收藏栏，而POST不可以。
  3.GET请求会被浏览器主动cache，而POST不会，除非手动设置。
  4.GET请求只能进行url编码，而POST支持多种编码方式。
  5.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
  6.GET请求在URL中传送的参数是有长度限制的，而POST么有。
  7.对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
  8.GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
  9.GET参数通过URL传递，POST放在Request body中

正解：就一个区别：语义——GET 用于获取资源，POST 用于提交资源
详细请参考 ： https://zhuanlan.zhihu.com/p/22536382

• Cookie V.S. LocalStorage V.S. SessionStorage V.S. Session
  参考答案：
  1、Cookie V.S. LocalStorage
  主要区别是 Cookie 会被发送到服务器，而 LocalStorage 不会
  Cookie 一般最大 4k，LocalStorage 可以用 5Mb 甚至 10Mb（各浏览器不同）
  2、LocalStorage V.S. SessionStorage
  LocalStorage 一般不会自动过期（除非用户手动清除），而 SessionStorage 在回话结束时过期（如关闭浏览器）
  3、Cookie V.S. Session
  Cookie 存在浏览器的文件里，Session 存在服务器的文件里
  Session 是基于 Cookie 实现的，具体做法就是把 SessionID 存在 Cookie 里

框架Vue

• watch 和 computed 和 methods 区别是什么？
  参考答案：思路：先翻译单词，再阐述作用，最后强行找不同。
  要点：
  1.computed 和 methods 相比，最大区别是 computed 有缓存：如果 computed 属性依赖的属性没有变化，那么 computed 属性就不会重新计算。methods 则是看到一次计算一次。
  2.watch 和 computed 相比，computed 是计算出一个属性（废话），而 watch 则可能是做别的事情（如上报数据）
• Vue有哪些生命周期钩子函数？ 分别有什么作用？
  参考答案：

1. 钩子在文档全都有，看红色的字。
2. 把名字翻译一遍就是满分
3. 要特别说明哪个钩子里请求数据，答案是 mounted

• Vue如何实现组件之间的通信 ？
  参考答案：
  1.父子组件：使用 v-on 通过事件通信
  2.爷孙组件：使用两次 v-on 通过爷爷爸爸通信，爸爸儿子通信实现爷孙通信
  3.任意组件：使用 eventBus = new Vue() 来通信 和 eventBus.$emit 是主要API
  4.任意组件：使用 Vuex 通信
• Vue 数据响应式怎么做到的？
  参考答案：

1. 答案在文档《深入响应式原理》
2. 要点
   1. 使用 Object.defineProperty 把这些属性全部转为 getter/setter
   2. Vue 不能检测到对象属性的添加或删除，解决方法是手动调用 Vue.set 或者 this.$set

• Vue.set 是做什么用的？ 参考答案 同上
• Vuex 你怎么用的？
  背下文档第一句：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
  说出核心概念的名字和作用：State/Getter/Mutation/Action/Module
• VueRouter 你怎么用的？
  背下文档第一句：Vue Router 是 Vue.js 官方的路由管理器。
  说出核心概念的名字和作用：History 模式/导航守卫/路由懒加载
  说出常用 API：router-link/router-view/this.router.replace/this.router.push('/user-admin')
  this.$route.params
• 路由守卫是什么？
  看官方文档的例子，背里面的关键的话

TypeScript

• never 类型是什么？
  不应该出现的类型
• TypeScript 比起 JavaScript 有什么优点？
  提供了类型约束，因此更可控、更容易重构、更适合大型项目、更容易维护

Webpack

1. 必考：有哪些常见 loader 和 plugin，你用过哪些？
2. 英语题：loader 和 plugin 的区别是什么？
3. 必考：如何按需加载代码？
4. 必考：如何提高构建速度？
5. 转义出的文件过大怎么办？

上面五题请看这个不错的参考：https://zhuanlan.zhihu.com/p/44438844

安全

1. 必考：什么是 XSS？如何预防？
   比较复杂，看方方的文章 https://zhuanlan.zhihu.com/p/22500730
2. 必考：什么是 CSRF？如何预防？
   比较复杂，看若愚的文章 https://zhuanlan.zhihu.com/p/22521378

开放题目

1. 必考：你遇到最难的问题是怎样的？
   要点：一波三折。参考 https://www.zhihu.com/question/35323603
2. 你在团队的突出贡献是什么？
   把小事说大。
3. 最近在关注什么新技术
   书、博客、推特、知乎，不要说 CSDN、百度。
4. 有没有看什么源码，看了后有什么记忆深刻的地方，有什么收获
   看过源码说源码，推荐看 underscore.js 的源码
   没看过源码就说同事的代码，代码烂就说哪里烂，代码好就说哪里好
   收获：命名规范、设计模式
   刁钻题目
   代码

1、 [1,2,3].map(parseInt)
答案
 1
 NaN
 NaN
代码
2、 var a = {name: 'a'}
 a.x = a = {}
 问 a.x 是多少？
答案
 undefined
3、(a ==1 && a== 2 && a==3) 可能为 true 吗？
利用 == 会调用 valueOf() 的特性
 var a = {
  value: 1,
  valueOf(){
   return this.value++
  }
 }
 a ==1 && a== 2 && a==3 // true
利用 a 会读取 window.a 的特性
 var value = 1; 
 Object.defineProperty(window, 'a', {
     get(){
         return value++;
     }
 })
 a ==1 && a== 2 && a==3 // true
 // 或者 
 a ===1 && a=== 2 && a===3 // true