目的记录方便自己备课，只记录了大纲，欢迎各位学习猿共同进步，也希望各位boss提供一个面试机会，感谢。
1. 函数式编程的理解？
原理、涉及、编程、优势
- 原理：大问题拆成多个小问题，再利用函数的组合、柯里化（参数复用）、高阶函数方式解决问题。
- 涉及：
- 纯函数：不存在副作用，相同输入对应着相同的输出。
- 高阶函数：值可以把其他函数作为参数的函数称为高阶函数。函数组合柯里化都是高阶函数
- 柯里化函数：将多参数函数拆成相同参数复用的场景，成为函数柯里化。
- 编程：
-原函数-
const funAdd = (p1, p2, p3) => p1 + p2 + p3;
const add_1_2_3 = funAdd(1,2,3) // 6
const add_1_2_4 = funAdd(1,2,4) // 7
const add_1_2_5 = funAdd(1,2,5) // 8
-函数式编程： 柯里化方案-
const funAdd = (p1, p2) => {
return p3 => p1 + p2 +p3
}
const add_1_2 = funAdd(1,2) // p3 => p1 + p2 + p3
add_1_2(3) // 6
add_1_2(4) // 7
add_1_2(5) // 8
-函数式编程： 高阶函数方案-
const funAdda = (p1, p2) => p1 + p2
funAdda(funAdda(1, 2), 3) // 6
- 优势：
- 方便测试
- 方便复用
- 减少bug
2. 前端水印的了解？
方法、优缺点、涉及
-
方法：
- dom覆盖：获取图片位置及像素大小，遍历创建水印内容添加到父元素上。
- canvas：创建canvas画布，添加文案，输出为图片并设置成图片的背景图，全部填充。
- svg：svg比canvas兼容性好，具体实现方式待学习。
-
优缺点：
- 安全性低，对于前端人员只要通过开发者工具去掉对应元素就行，可以通过监听dom api变化实现再次添加水印，或者轮询判断添加定时器。
-
涉及：
- 隐形水印，待学习。
3. 针对请求失败弹出toast? 如何处理指弹出一个。
方法
- 方法：
- 全局定义一个变量用来记录当前是否存在toast，在各自请求中处理错误，弹出前查看变量是否弹toast。
- 统一处理错误，在响应拦截器中或者另外定义一个函数处理。
- 若是一个请求的多次执行，还可以使用promise.all()和防抖或者截流进行处理，防止短时间内多次进行错误弹出toast。
4.如何实现pdf文件预览。
方法
- 方法：
- 利用第三方存储，如腾讯、阿里等。
- 存储服务器，暴露出地址。
- 利用预览插件，pdf.js等。
5.px如何自动转为rem？
方法
- 方法：
- 利用工程化工具提供的配置，如webpack和vite提供的配置
- 在根路径下配置一个css预处理器转换函数，后续定义变量大小均使用该函数
6. 如何实现修改一个npm包？
方法步骤
- 步骤1: 确保本地项目已经安装了对应的npm包
- 步骤2: 将对应的依赖源码复制到本地项目目录下面，并修改package.json对应依赖地址。相当于依赖包来源不再是node_modules,而是本地目录。
- 步骤3: 按照自己的需求修改对应代码。
- 步骤4: 按照项目实际情况，发布依赖到npmjs还是公司私域下面。
- 步骤5: 调整回package.json。
7. 前端跨页面通信有哪些？
不同方法
- 方法1: url传参
- 方法2: localStorage或者sessionStorage传参。
- 方法3: cookies传参
- 方法4: websocket传参
8. 如何拦截web应用的请求？
方法
- 方法1: 在对应的请求前自定义拦截处理。
- 方法2: 利用浏览器的监听进行拦截 server.worker。
- 方法3: 第三方请求包提供的请求拦截器，如axios。
9.SPA项目首页加载慢怎么解决？
原因、解决方案
- 原因
- 网络问题
- 静态资源过大
- 资源重复加载
- 脚本阻塞
- 解决方案
- 静态资源本地缓存
- UI框架要按需加载
- 首页资源减少
- 资源大小压缩
10.vue中为什么v-if的元素不建议使用v-for?
原因
- 原因1: 在vue源码当中v-for的优先级高于v-if，所以说v-if是否为false，都会进行v-for渲染。
- 原因2: vue存在会根基的diff算法会根据key不变不再重新渲染机制，所以在v-if变为true，但是v-for的key不变情况下，可能出现意料之外的情况。
11. css 命名冲突和样式覆盖怎么解决？
方案
- 方案1: 命名空间，定制规则增加命名前缀
- 方案2: 命名规范，快+元素+修饰符， buttom__icon--big
- 方案3: css预处理器，利用层级、变量、函数等
- 方案4: css-in-js
