2018秋季面试问题总结

记录一下最近面试遇到的问题

2018-08-18

• 上传图片压缩
  使用canvas.drawImage()方法将图片进行压缩，再使用canvas.toDataURL()方法将canvas画布转为base64格式信息的图片，或把canvas转换成Blob文件，通常用在文件上传中，因为是二进制的，对后端更加友好。

• 高并发时前端的优化
  见上一篇文章。

• 如何使用v-router管理权限
  权限控制的主体思路，前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过router.addRoutes动态挂载路由。但这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。
  不同权限的用户显示不同的侧边栏和限制其所能进入的页面(也做了少许按钮级别的权限控制)，后端则会验证每一个涉及请求的操作，验证其是否有该操作的权限，每一个后台的请求不管是 get 还是 post 都会让前端在请求 header里面携带用户的 token，后端会根据该 token 来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码，前端检测到该状态码，做出相对应的操作。
  具体实现：

  1. 创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
  2. 当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。
  3. 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
  4. 使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。

  具体看https://blog.csdn.net/s8460049/article/details/61190709/

• 闭包是是么？
  所谓闭包就是说，一个函数能够访问其函数外部作用域中的变量。闭包的三大特点为：

  1. 函数嵌套函数

  2. 内部函数可以访问外部函数的变量

  3. 参数和变量不会被回收。
     闭包的作用在于，可以通过闭包，设计私有变量及方法。

总结：
1. 闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
2. 不必纠结到底怎样才算闭包，其实你写的每一个函数都算作闭包，即使是全局函数，你访问函数外部的全局变量时，就是闭包
的体现。

• 原型链是什么？
  简单理解就是原型组成的链，对象的proto它的是原型，而原型也是一个对象，也有proto属性，原型的proto又是原型的原型，就这样可以一直通过proto想上找，这就是原型链，当向上找找到Object的原型的时候，这条原型链就算到头了。

• 原型对象和实例之间有什么作用呢？
  通过一个构造函数创建出来的多个实例，如果都要添加一个方法，给每个实例去添加并不是一个明智的选择。这时就该用上原型了。
  在实例的原型上添加一个方法，这个原型的所有实例便都有了这个方法。

• computed和methods的不同之处？
  computed计算的结果如果不发生改变就不会触发result这个函数。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。
  computed必须返回一个值页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

• webpack的原理
  webpack的核心原理：

  1. 一切皆模块
     正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。
  2. 按需加载
     传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。

• 跨域方法？

  1. proxyTable：vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件。
  2. CORS：CORS即跨源资源共享，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。这个方式解决的跨越问题支持开发和生产环境。但是有一定的安全性问题。需要后端配合。
  3. Nginx：这个方法支持开发环境和生产环境。需要后端配合。

• 触发bfc条件：
  bfc是 块级元素格式化上下文，它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

  块级元素：父级（是一个块元素）
  内容：子元素（是一个块元素）
  其他元素：与内容同级别的兄弟元素
  相互作用：BFC里的元素与外面的元素不会发生影响
  触发条件：1） float的值不为none； 2）overflow的值不为visible；3）display的值为table-cell、tabble-caption和inline-block之一；4）position的值不为static或releative中的任何一个。
  满足以上任意一个都能触发。