本期看点

• 浏览器 observer api
• LRU JS 实现
• 字符在计算机的存储形式
• 手写 Promise
• queueMicrotask 实现微任务
• 前端依赖管理的痛点
• 手写 parseInt

文章 #

浏览器的 5 种 Observer，你用过几种？ #

网页处理用户交互，可添加 click、mousemove 等事件，但有些操作不是由用户直接触发的，那么就要使用 observer api 了。

IntersectionObserver：

监听元素和可视区域相交比例。使用场景：埋点数据采集（当前元素是否可见以及可见比例）、图片懒加载。

MutationObserver：

监听元素属性的修改、以及子节点的增删改。使用场景：防止用户使用 devTool 去水印。

ResizeObserver：

监听大小的改变，当 width、height 被修改时触发。

PerformanceObserver：

监听记录 performance 数据的行为，一旦记录了就会触发回调，可在回调里把这些数据进行上报。

ReportingObserver：

浏览器遇到过时 api 会打印警告，在一些情况下还会对网页进行干预，此 api 可监听这些动作。

蚂蚁金服在线笔试：设计和实现一个LRU缓存机制 #

LRU 是 Least Recently Used 的缩写，是一种常用的页面置换算法，页面置换与CPU、内存、磁盘有关，你可以简单理解为这是一种缓存算法，但有容量限制。

本文解决了力扣上的 LRU缓存 题目。Vue 中也使用了此算法，可参考：LRU 缓存-keep-alive 实现原理

淦，为什么 "𠮷𠮷𠮷" .length !== 3 #

字符串的 length 属性不能完全正确的表示字符串长度，他的深层原因涉及字符编码，推荐看下文中作者关于编码的前两篇文章，这样看本文的时候能便于理解一些。简单讲就是 JavaScript 字符串使用 utf 16 编码，这种编码的产物只可能是2字节或4字节，JavaScript由于历史原因，认为2字节的 length 就是1，所以 '💩' 的占了4个字节，那么他的length就是2，slice, split, substr 等等方法对于 length 的处理也存在同样的问题。为啥 '💩' 就占4个字节了呢？再简单讲就是这个字符使用了Unicode对应表，可在unicode-table中查询对应值，就是这个字符对应了一个数字，数字就可以用二进制表示，因为数字太大了，所以2个字节不够用，就得占4个字节啦。

深入分析 Promise 实现细节 #

手写 Promise 应该是现在面试炽手可热的题目了（想当年我也被这个挂过🤫），本文由浅入深介绍了如何手写 Promise，先实现同步版本的，再实现异步，最后在加上 then 以及其他处理，逐步练习，比较有成就感。

在 JavaScript 中通过 queueMicrotask() 使用微任务 #

上篇手写 Promise 使用了 queueMicrotask，我居然都没听过这个函数😑。本文介绍了一些微任务的特性和 queueMicrotask 的示例，你可以理解为它就想 Promise.resolve().then 一样，就是添加一个微任务，但它比 Promise.resolve 要好得多。其中这3点很新奇：

1. 微任务自身可以产生微任务，并且事件循环会一直处理微任务队列，所以你递归增加微任务的话一定要谨慎，否则可能出现微任务一直执行不完的情况。
2. 如果可能的话，大多数开发者不应该过多使用微任务。
3. 使用微任务的典型场景：实在没有其他办法了、创建框架或库时需要使用微任务完成功能。

（吐槽下，不知道是翻译的原因吗？读着有点难懂🥺）

关于依赖管理的真相 — 前端包管理器探究 #

关于前端依赖管理，已经有很多不错的文章解释了，但这篇最近的文章给出了准确的分类，丰富了一些细节，如：

1. 不确定性：不用 lock 的话，你本地安装的 node_modules 和线上重新安装的是可能不同的，那么就会造成你本地开发没有问题，但是线上有问题的情况，你要在新增一个依赖后本地删除 node_modules，再重新安装才能解决，这明显是没必要的，
2. 当你安装了多个同版本的包在 node_modules 中时，会破坏单例模式以及引起 TS 的 types冲突（这点我真的没想到过）
3. Yarn v2 Plug'n'Play 原理，以及劣势：脱离Node现存生态，兼容性不好
4. pnpm 的硬链接与符号链接
5. cnpm/tnpm 的解决方案（我原以为cnpm就是做了个国内存储呢😂，原理还干了其他的事情）
6. Deno 的链接引包

被字节”装“到了，只要你能看”完“这题目，就算你过？ #

类似手写 parseInt，文中使用正则实现的，比较简洁（正则的时间复杂度咋算呀？🤔）。

想法 #

we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly.

原文链接

好的学习方式应该是有成就感的、开心的、舒服的、由浅入深逐步递进的。

2022-02-27 ~ 2022-03-19（第 8 期）

最近鸽的有点厉害😣，还是尽量每周一篇吧。