📒 为什么不建议用 switch...case 实现策略模式
相比 if...else 来说，switch...case 已经有了明显提升，但还是不适合用来编写策略模式。
这是因为 switch...case 实际上违背了 开闭原则，即对扩展开放，对修改封闭。例如当我们需要增加规则的时候，就需要靠修改代码来实现。
从这一点来说，用 JS 对象或者 Map 对象来实现策略模式就要灵活很多，可以动态扩展规则。
📒 Vite 打包流程
首先调用 rollup 方法（Rollup 的编程式 API）编译出 bundle 添加到 build 数组中，接下来就是遍历它，进行 bundle 的写操作（即输出到硬盘上），因为 vite 使用的是 Rollup 完成文件的打包，所以这里调用的是 bundle.write 来将文件输出到硬盘上。
for (const build of builds) {
const bundle = await build.bundle;
const { output } = await bundle[write ? 'write' : 'generate']({
dir: resolvedAssetsPath,
format: 'es',
sourcemap,
entryFileNames: `[name].[hash].js`,
chunkFileNames: `[name].[hash].js`,
assetFileNames: `[name].[hash].[ext]`,
...config.rollupOutputOptions
});
build.html = await renderIndex(output);
build.assets = output
await postBuildHooks.reduce(
(queue, hook) => queue.then(() => hook(build as any)),
Promise.resolve();
)
}
注意 Vite 2.x 源码结构稍有不同，但是整体流程还是类似的：
这里有一个值得学习的地方，这边 postBuildHooks 的类型定义是 ((build: any) => Promise<any>)[]，如何保证调用顺序，即上一次调用完成后进行下一次调用？
通常我们用 reduce 做管道操作都是不能用于 Promise，因为管道操作需要将上一次调用的返回值，作为参数传入下一次调用，但 Promise 的话很可能是 pending，根本拿不到上一次调用的返回值。所以一般来说我们只能将 reduce 改成普通 FOR 循环：
let initialValue = Promise.resolve();
for (const hooks of postBuildHooks) {
initialValue = await hook(build);
}
而源码中对 reducer 函数进行了包装，将 hook 的执行放到 then 方法回调中，这样就可以保证调用顺序：
await postBuildHooks.reduce(
(queue, hook) => queue.then(() => hook(build as any)),
Promise.resolve();
)
vite 不支持 ie 11？configureBuild Hook 帮你定制 bundle 打包过程
📒 VS Code 如何快速定位到问题代码
在 TS 项目中，经常会因为类型问题出现报错，因此需要快速定位到问题代码。
在 VS Code 中可以使用 Ctrl + Shift + M 快捷键打开问题面板，可以看到当前文件中所有的 errors 和 warnings。此时，按 F8 可以依次跳转查看当前文件中的问题。
⭐️ 从arco-design的collapse组件分析如何吸收开源项目的知识
📒 模块联邦浅析
📒 【第2631期】浅谈 Atomic CSS 的发展背景与 Tailwind CSS
📒 通过 JS 运行时堆快照进行 Web 爬虫
当网站提供的接口无法满足需求的时候（甚至可能连接口都没有），爬虫可能是一种不太理想的解决方案。虽然 Puppeteer 和 Playwright 使控制无头浏览器变得容易，但是获取你需要的数据，还是会很复杂。如果你可以从网站的页面堆中提取数据呢？Puppeteer Heap Snapshot 是这个实验的最终结果。
https://www.adriancooney.ie/blog/web-scraping-via-javascript-heap-snapshots
📒 JS 清空数组的方式
以下两种清空数组的方式有何区别：
let arr = [...];
// 这种是 immutable 的方式
// 即创建一个空数组，用该空数组指针替换原数组的指针
// 不影响其他引用原数组内存地址的变量
arr = [];
// 这种是 mutable 的方式
// 即直接修改原数组，不创建新数组，仍然是原数组指针
// 会影响其他引用原数组内存地址的变量
arr.length = 0;
📒 Map 对象小技巧
Map 对象可以记住键值对插入顺序，那么如何获取顺序呢？答案是通过迭代器接口。然后迭代器接口可以直接遍历，也可以转为数组，这样就变成获取数组第一个元素了。
按照这个思路，实际上也可以用 Map 实现队列
📒 Chrome 如何调试移动端 H5 页面
chrome://inspect/#devices
📒 支付宝体验科技 Umi 系列文章
📒 如何回滚 Git 分支代码
# 找到需要回滚的版本哈希，执行 git reset
$ git reset --hard HEAD^
# 然后强制 push
$ git push -f -u origin pre
📒 如何华丽的实现一套脚手架 - 以umicli和转转zzcli为例
📒 深入浅出 npm & yarn & pnpm 包管理机制
📒 你还在手动部署埋点吗？从0到1开发Babel埋点自动植入插件
📒 一个三小时的 React Native 速成课
📒 使用 Three.js：一款流行的 3D JavaScript 库
📒 Next.js 后续规划的 RFC：即将到来的重大变化
📒 2022 年 React 状态管理库综述
React 的优势在于它可以灵活地适应不同的开发方式，其中也包括状态管理方面。这篇文章总结了几个流行的状态管理库，包括 Zustand、Recoil（来自 Facebook）、XState，当然还有 Redux。
https://www.albertgao.xyz/2022/02/19/react-state-management-libraries-2022/
⭐️ ⭐️ 现代 Monorepo 工程技术选型，聊聊我的思考
总结一下：
- 使用 PNPM 作为 monorepo 项目的包管理工具
- 使用 Changesets 作为 monorepo 项目的发包工具
- 使用 Turborepo 作为 monorepo 项目多包任务执行工具