2019-09 下旬 ✅
- 创建于:2019-09-21
- 更新于:2020-04-02
# 2019-09-30: 常见的前端错误监控软件,了解 sentry 和 fundebug. ✅
好好想想先 😌
参考链接
一句话
- 上传 sourcemap 到 sentry 定位错误位置
# 2019-09-29: 如何实现大文件上传?断点续传? ✅
好好想想先 😌
参考链接
一句话
- 客户端使用 slice 方法对文件进行分片
- 服务端通过流式合并文件
- 根据 md5 判断片段是否已上传
# 2019-09-28: jest 快照测试有什么作用?原理是什么? ✅
好好想想先 😌
参考链接
一句话
- 把某一时刻的标准状态拍个快照,生成一段纯 html 文本
- 传入相同的 props,判断 html 文本是否变化
# 2019-09-27: 什么是测试覆盖率?如何计算出来的? ✅
好好想想先 😌
参考链接
一句话
- 语句覆盖:又称行覆盖(LineCoverage),段覆盖(SegmentCoverage),基本块覆盖(BasicBlockCoverage),这是最常用也是最常见的一种覆盖方式,就是度量被测代码中每个可执行语句是否被执行到了
- 判定覆盖
- 条件覆盖
- 路径覆盖
# 2019-09-26: 什么是命名捕获组 ✅
好好想想先 😌
参考链接
一句话
- 命名捕获分组自身的语法是 (?<name>...),比普通的分组多了一个 ?<name> 字样
function toLocalDate(date) { return date.replace( /(?<month>\d{2})-(?<day>\d{2})-(?<year>\d{4})/, '$<day>-$<month>-$<year>' ) }
- 在 match 中
const groups = '04-25-2017'.match( /(?<month>\d{2})-(?<day>\d{2})-(?<year>\d{4})/ ).groups // {month: "04", day: "25", year: "2017"}
- 在 exec 中
;/(\d{2})-(\d{2})-(\d{4})/.exec('04-25-2017').groups // undefined,因为没有命名分组
- 在 replace 中
'04-25-2017'.replace( /(?<month>\d{2})-(?<day>\d{2})-(?<year>\d{4})/, (...args) => { const groups = args.slice(-1)[0] const { day, month, year } = groups return `${day}-${month}-${year}` } ) // "25-04-2017"
- 反向引用,使用 \k<name> 标识前面一个命名捕获组
/(?<quote>('|"))\w+\k<quote>/.test(`'aaa'`) // true /(?<quote>('|"))\w+\k<quote>/.test(`"aaa"`) // true /(?<quote>('|"))\w+\k<quote>/.test(`'aaa"`) // false // 等同于 /('|")\w+\1/.test(`'aaa'`) // true
# 2019-09-25: 浏览器事件循环和 Node 事件循环区别 ✅
好好想想先 😌
参考链接
一句话
- 浏览器分为
- GUI 渲染线程
- JavaScript 引擎线程
- 定时触发器线程
- 事件触发线程
- 异步 http 请求线程
- Node 中的 Event Loop 和浏览器中的是完全不相同的东西。Node.js 采用 V8 作为 js 的解析引擎,而 I/O 处理方面使用了自己设计的 libuv
- timers 阶段:这个阶段执行 timer(setTimeout、setInterval)的回调
- I/O callbacks 阶段:处理一些上一轮循环中的少数未执行的 I/O 回调
- idle, prepare 阶段:仅 node 内部使用
- poll 阶段:获取新的 I/O 事件, 适当的条件下 node 将阻塞在这里
- check 阶段:执行 setImmediate() 的回调
- close callbacks 阶段:执行 socket 的 close 事件回调
- 浏览器环境下,microtask 的任务队列是每个 macrotask 执行完之后执行。而在 Node.js 中,microtask 会在事件循环的各个阶段之间执行,也就是一个阶段执行完毕,就会去执行 microtask 队列的任务。
- Node 端,microtask 在事件循环的各个阶段之间执行
- 浏览器端,microtask 在事件循环的 macrotask 执行完之后执行
- process.nextTick
- 这个函数其实是独立于 Event Loop 之外的,它有一个自己的队列,当每个阶段完成后,如果存在 nextTick 队列,就会清空队列中的所有回调函数,并且优先于其他 microtask 执行。
- 浏览器分为
# 2019-09-24: js 正则反向应用(回溯引用) ✅
好好想想先 😌
参考链接
一句话
- 回溯引用指的是模式的后半部分引用在前半部分中定义的捕获
- \1 表示引用第 1 个捕获,\2 表示引用第 2 个捕获,以此类推
# 2019-09-23: 水平垂直居中的所有方法 ✅
好好想想先 😌
参考链接
一句话
- absolute + margin
- absolute + transform
- absolute + calc
- inline-block + vertical-align + text-align
- flex
- grid
# 2019-09-22: mvc 中的 controller 负责做什么?和 router 有何区别? ✅
好好想想先 😌
- 一句话
- Controller 是 Model 和 View 的桥梁
- Express 中没有 Controller 的概念,一切皆是中间件
- Express 硬要添加 Controller 的话,可以作为比 Router 更底层的数据处理层
# 2019-09-21: 什么是 cdn ✅
好好想想先 😌
- 一句话
- CDN 的全称是 Content Delivery Network,即内容分发网络。CDN 是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。