Yapi 由 YMFE开源，旨在为开发、产品、测试人员提供更优雅的接口管理服务，可以帮助开发者轻松创建、发布、维护API。
动态路由（前端后端控制）
Vue 大量数据展示卡顿解决方案（长列表优化）
需求分析（长列表展示）
页面某处需要渲染 1w+ 条数据，并需要滚动展示，这时如果直接把这些数据渲染到页面上，会导致系统内存大量被占用，导致页面卡顿或崩溃
我们都知道，每次 DOM 修改，浏览器都会重新计算元素布局，再重新渲染（回流 / 重绘）。如果数据量很大，页面计算时间就会加成，造成页面卡顿
Webpack（优化和问题）
Vue 中使用 Upload 组件上传图片
vue 中使用 Element 的 upload 组件上传 Excel，大致可以分两种情况
使用
action上传到服务器如下不讨论使用 action 上传服务器，如需了解可以参考：Vue 中使用 Upload 组件上传 Excel
使用
axios上传到服务器这里主要阐述如下两种情况
- 使用 FormData 上传
- 使用 base64 上传
Vue 处理文件的下载（后端Excel导出）
大概有两种方法（通常对应的是需要不需要携带 token），原理都是通过 a 标签下载
- 通过 Ajax 请求，拿到
response，转换为 blob 格式（主要是为了处理 type），为其生成下载链接，下载即可 - 直接拼接 URL，拼出来对应请求链接，直接访问即可（不需要二次 token 认证）
JS 检测数据类型的四种方式
JavaScript 有八种数据类型：
基本数据类型：Boolean、Number、String、null、undefined、Symbol(ES6新增)、BigInt（ES2020引入）
引用数据类型：Object
Symbol：表示独一无二的值
BigInt：用来解决 JavaScript 中数字只能到 53 个二进制位，大于这个范围的整数，无法精确表示
JS 继承的四种方式
类三大特性
JS 本身是基于面向对象开发的编程语言。类：封装、继承、多态
封装：类是一个函数，把实现一个功能的代码进行封装，以此实现 “低耦合高内聚”
多态：主要就是重载、重写两点
重写：子类重写父类上的方法（伴随着继承运行）
重载：相同的方法，由于参数或返回值不同，具备了不同的功能（JS 中不具备严格意义的重载；JS 中的重载，同一个方法内，根据传参不同实现不同的功能）
1
2
3
4
5
6
7
8
9
10
11
12// 函数重载（两个函数名称相同，参数个数/类型不同）
function add(...rest: number[]): number
function add(...rest: string[]): string
function add(...rest: any[]): any {
let first = rest[0]
if (typeof first === 'string') {
return rest.join('')
}
if (typeof first === 'number') {
return rest.reduce((pre, cur) => pre + cur)
}
}继承：子类继承父类的方法
其它语言的继承跟生活中的继承很相似，子基因修改了但不会影响父（单独拷贝一份）
Axios 取消请求
应用场景
取消请求偶尔会用到，以下是两个工作中可能用到的场景
- 如果一个数据请求量比较大（可能会请求错误），还没请求完就切换路由，可能会出现错误的提示框（响应拦截器中配置错误提示）
- 导出文件或下载文件时，中途取消
- 一个请求请求量比较大，发送新请求时需要取消上一个请求
HTTP网络层性能优化
客户端和服务端之间的信息通信
- ajax / fetch 数据交互
- 跨域处理方案：ajax、fetch、jsonp、postMessage
- 资源获取【html|、css、js、image、音视频】
- webscoket