面试复盘（二）：重拾自信

福大命大
1,257 阅读9分钟

前言

面试的第三家公司，题目难度比昨天好很多，挽回了那么一丢丢信心😂，周末好好复习下面试过的题目✊。

情况说明

本菜2年经验，投的多为2-3年经验要求的。

概况

  • 公司：坐标深圳。
  • 面试官：还行。
  • 面试结果：过了，考虑中。
  • 面试感受：题目不是太难，再加上昨天面试做了复盘，相同的题目都回答出来了。

面试题

  1. npm私有仓库搭建【简历有写】。
  2. ui组件库开发，版本不兼容怎么处理
  3. 系统权限设计，接口权限那里配置的【简历有写】。
  4. 介绍下WebSocket
  5. 大文件上传怎么做的【简历有写】。
  6. 小程序分包，支付流程，手机号码，setData大数据优化手段
  7. this的指向
  8. call、bind、apply
  9. 做过app内嵌h5没，js和原生通信如何处理的？
  10. 介绍下vue keep-live
  11. vue数据响应式原理
  12. 做过vue3的项目没【简历有写】。
  13. 介绍下vue3 composition-api
  14. ref和reactive有什么不一样
  15. JS数据类型
  16. 过什么es6语法
  17. 数据类型判断
  18. 深拷贝
  19. Promise有几种状态
  20. EventLoop
  21. 原型链是什么
  22. 项目里面做过什么优化
  23. 前后端如何联调
  24. 短链接平台如何实现【简历有写】。

npm私有仓库搭建

使用verdaccio 搭建私有npm 服务器

系统权限设计，接口权限那里配置的

  1. 系统权限设计，根据自己接触的项目回答的。

    • 一共四个表，接口表、菜单表、用户组表、用户表。

    • 数据库录入每一个需要权限的接口，并分配一个唯一id。

    • 数据库录入菜单，并分配一个唯一id。

    • 创建用户组，给用户组非配接口和菜单权限。

    • 给用户分配用户组。

    • 用户登录的时候拿到菜单权限，通过addRoutes动态生成菜单。

    • 拿到接口权限，通过自定义指令控制按钮权限。

    • 后端返回权限给前端时，同时在redis里面存一份方便权限查询，然后在中间件进行请求拦截。

    之前写的一个小玩意，用到了这种权限管理方法，感兴趣的可以看看 github.com/taosiqi/uni…

  2. 接口权限哪里配置的

    有超级管理员账户，他拥有配置权限的权限。

ui组件库开发，版本不兼容怎么处理

不兼容提升组件库大版本就行

vue组件库及文档开发

介绍下WebSocket

主要讲了他两三个特点，以及工作中哪里用到了它。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

其他特点包括：

  • 建立在 TCP 协议之上，服务器端的实现比较容易。
  • 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
  • 数据格式比较轻量，性能开销小，通信高效。
  • 可以发送文本，也可以发送二进制数据。
  • 没有同源限制，客户端可以与任意服务器通信。
  • 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
  • 阮一峰WebSocket 教程

大文件上传怎么做的

前端大文件上传

小程序分包，支付流程，手机号码，setData大数据优化手段

感觉简历写了小程序，这几个问题都有可能问到。

小程序分包 文档直达

支付流程 文档直达

手机号码 文档直达

setData大数据优化手段，可以只修改变化了的数据(^^) 微信小程序setData数据太大解决方案

this的指向

  • 默认绑定(非严格模式下this指向全局对象, 严格模式下this会绑定到undefined)
  • 隐式绑定(当函数引用有上下文对象时, 如 obj.foo()的调用方式, foo内的this指向obj)
  • 显示绑定(通过call()或者apply()方法直接指定this的绑定对象, 如foo.call(obj))
  • new绑定
  • 箭头函数绑定(this的指向由外层作用域决定的)

call、bind、apply

相同点

  • 都是改变this指向
  • 第一个参数都是 this 的指向对象。

不同点

  • call 和bind 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 。
  • apply 的所有参数都放在一个数组里面 obj.myFun.apply(db,['成都', ..., 'string' ])。
  • bind 返回的是一个函数，需要手动调用执行，其他参数和 call 一样。

做过app内嵌h5没，js和原生通信如何处理的？

做过

原生通信不太懂，也没找到写的很好的文章，期待你的回答

介绍下vue keep-live

  1. Props：
  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。
  1. 用法:
  • <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
  • 它有 activated 和 deactivated 两个生命周期。如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，切换到组件B，这时组件A的deactivated的生命周期函数会被触发；在切换回组件A，组件A的activated生命周期函数会被触发，但是它的created生命周期函数不会被触发了。

vue官方文档介绍

vue数据响应式原理

一文搞懂Vue2和Vue3的Proxy

做过vue3的项目没

目前在写vue3+ts的脚手架工具

github.com/taosiqi/v3t…

介绍下vue3 composition-api

vue3官方文档 composition-api

ref和reactive有什么不一样

ref、reactive是Vue3中实现响应式数据的方法 ，Vue2中通过defineProperty实现，Vue3通过ES6的Proxy实现的。
reactive

  • 接受引用类型的参数，返回其Proxy，无法响应对整个Proxy的赋值。
      let person = reactive({ name: 'Tom' })
      person = { name: 'Tony' } //视图不会更新
      person.name = 'Tony'  //会更新
  • 使用场景： 不需要赋值操作的数据，结构较深的引用类型（建议）。
  • 两者在引用类型的处理上，区别在ref拥有value的包裹，内部则一致。 ref
  • 接受一个any类型的参数，返回{value:''}包裹的Proxy，可以通过改变value属性实现响应式的赋值操作。
  • ref的底层本质还是reactive，系统会根据给ref传入的值将它转换成reactive({value:data})。
  • 在Vue template中可以直接使用ref,Vue会自动添加.value，在Js中使用ref需要.value。
  • 使用场景：适用于需要赋值操作的数据，基本类型（必须）、结构较浅的引用类型（建议）。

vue3的ref和reactive的使用

JS 数据类型

这里可以了解一下js的包装类

  1. Boolean
  2. String
  3. Number 原始值不能有属性和方法，当给它们添加属性的时候系统会自动进行包装类并销毁。
let str = new String("小猪佩奇");
let str2="小猪佩奇"
console.log(str.length);  //输出4 .length是String自带的属性。
console.log(str2.length); //输出4  会先new String('小猪佩奇)再取.length; 然后delete;

image.png

JS数据类型分类和判断

用过什么es6语法

  • Class
  • 模块import和export
  • 箭头函数
  • 函数默认参数
  • ...扩展运输符允许展开数组
  • 解构
  • 字符串模版
  • Promise
  • let const
  • Proxy、Map、Set

数据类型判断

第2篇: JS数据类型之问——检测篇

深拷贝

第23篇: 能不能写一个完整的深拷贝？

Promise有几种状态

总结：

  1. Promise的状态一经改变就不能再改变。
  2. .then和.catch都会返回一个新的Promise。
  3. catch不管被连接到哪里，都能捕获上层未捕捉过的错误。
  4. 在Promise中，返回任意一个非 promise 的值都会被包裹成 promise 对象，例如return 2会被包装为return Promise.resolve(2)。
  5. Promise 的 .then 或者 .catch 可以被调用多次, 但如果Promise内部的状态一经改变，并且有了一个值，那么后续每次调用.then或者.catch的时候都会直接拿到该值。
  6. .then 或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获。
  7. .then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。
  8. .then 或者 .catch 的参数期望是函数，传入非函数则会发生值透传。
  9. .then方法是能接收两个参数的，第一个是处理成功的函数，第二个是处理失败的函数，再某些时候你可以认为`catch是.then第二个参数的简便写法。
  10. .finally方法也是返回一个Promise，他在Promise结束的时候，无论结果为resolved还是rejected，都会执行里面的回调函数。

【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理)

EventLoop

第28篇：如何理解EventLoop——宏任务和微任务篇

原型链是什么

第5篇: 谈谈你对原型链的理解

项目里面做过什么优化

  • 优化首页加载时间 面试复盘（一）：认清现实
  • 编译打包打包使用vue-cli-plugin-dll优化
  • 提前预加载提高切换路由的体验 preload
  • 开启gzip压缩，需要服务端支持
  • runtime.js 处理策略 打包成一个单独的文件放进index.html
  • 全局scss变量，不需要每个文件import了

前后端如何联调

使用Swagger

短链接平台如何实现

找一个短点域名做中转，携带8为随机字符串进行匹配。62个字符生成随机8位有多少个 62^8=218340105584896

结语

首发于语雀文档@is_tao

面试复盘（一）：认清现实
面试复盘（二）：重拾自信
面试复盘（三）：好心态好状态

avatar
文章
阅读
粉丝