若川的博客

1. 源码共读前言

预计阅读时间: 15 分钟

原先在语雀中，语雀专栏有树形菜单，关注后也有通知，体验可能相对比较好，也相对方便查看，现在同步到掘金专栏【若川视野 x 源码共读】，两边基本会保持同步。

为了能帮助到更多对源码感兴趣、想学会看源码、提升自己写作和前端技术能力的同学。 帮助读者夯实基础，查漏补缺，开阔眼界，拓宽视野，知其然知其所以然。

我倾力组织了每周一起学200行左右的源码共读活动。我写有《学习源码整体架构系列》20余篇，走过路过的小伙伴可以点击关注下这个目前是掘金关注数最多的专栏。

欢迎点此扫码加我微信 ruochuan02 加源码共读微信群交流讨论，参加每周大家一起学习200行左右的源码活动，共同进步。可以持续关注我@若川。

大家没填问卷的，有空抽几分钟来填下源码共读活动问卷~你们的反馈至关重要https://wj.qq.com/s2/9304505/dafa/

2. 常见问题

Q: 如何算参与活动？

A: 流程图一览、简单说就是四步：

按照顺序选择其中一期开始，看任务。
看辅助文章、看源码。
微信群交流讨论，写笔记，写总结、收获。
掘金任务说明文章评论区提交笔记。
图示见第五条，点此跳转查看

Q: 我工作年限比较短，能参与活动吗？会比较吃力吗？

A: 可以。23届（目前大三）的小姐姐都写了7次笔记。一般推荐先读第39期 | 如何发布一个 npm 库，自动化管理版本号、生成 changelog、tag 等，几乎人人都用得上，都不算源码，有问题可以交流讨论。

Q: 我目前不会vue、不会vue3、不会react、不会Node.js 可以参与吗？

A: 可以。跟技术栈不是强相关，主要是原生JS和Node.js。Node.js 基本是每个前端必学，可以边学边查。有不懂的随时在群里提问。

Q: 我现在比较忙，一时没时间参与，交笔记有时间限制吗？

A: 目前没有限制。

Q: 必须交笔记吗？

A: 目前不是必须，但我推荐看完了一期，记笔记。写上当时的收获、总结和感受。

Q: 活动收费吗？有惩罚吗？

A: 目前不收费。目前没有惩罚，后续可能要求每人进群后半个月内至少提交第一次笔记。

3. 如何提交笔记

提交笔记方式简言之：看任务，看辅助文章、看源码，交流讨论，在掘金写笔记，写好后提交到每期任务的评论区。

为了给大家谋福利，另外给大家的文章带来更多阅读量，便于搜索，从2022年3月27日起，笔记可以直接发布在掘金，以《标题自取》标题不限，可以取个好标题，容易被掘金推荐。

笔记文章开头加两句话：

本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。
这是源码共读的第xx期，链接：xxx。

笔记文章最后，建议写上总结、收获、感受等。

开头第一句作用是：方便每月统计评优，掘金赞助送小礼物。顺便帮忙宣传推广，让更多人参与进来，一起学习。
开头第二句作用是：加上是多少期，当前任务说明的链接，方便读者知道这是什么活动。

笔记写完后，到当前期活动的文章评论区留言自己的文章和笔记特点。方便大家查阅学习交流讨论。

往期所有笔记存放在语雀讨论区，因不可抗力原因，【语雀讨论区】升级为私密的【任务】，原语雀讨论区应该访问不了了，所以大家拥抱掘金，在掘金写文章写笔记。

4. 从易到难推荐学习顺序

为了降低难度，促进大家学习。我们从易到难重新整理学习顺序。

推荐大家按顺序循序渐进或者自己挑选感兴趣的学习，查漏补缺，夯实基础。 提高阅读源码的能力，提升前端技术能力。不知道怎么调试的看这两篇文章(基本覆盖绝大多数场景)：新手向：前端程序员必学基本技能——调试JS代码、据说90%的人不知道测试用例(Vitest)可以调试开源项目(Vue3) 源码

4.1 我的其他源码

如果不满足以下这些代码行数比较少的源码，可以选我之前写过感兴趣的源码文章看。这些代码行数相对多一些。

1.学习 jQuery 源码整体架构，打造属于自己的 js 类库
2.学习 underscore 源码整体架构，打造属于自己的函数式编程类库
3.学习 lodash 源码整体架构，打造属于自己的函数式编程类库
4.学习 sentry 源码整体架构，打造属于自己的前端异常监控SDK
5.学习 vuex 源码整体架构，打造属于自己的状态管理库
6.学习 axios 源码整体架构，打造属于自己的请求库
7.学习 koa 源码的整体架构，浅析koa洋葱模型原理和co原理
8.学习 redux 源码整体架构，深入理解 redux 及其中间件原理

4.6 工具库

第26期 classnames
第17期【js-cookie】js-cookie

4.7 Nodejs

第16期【only-allow】: 从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器
第22期【dotenv】面试官：项目中常用的 .env 文件原理是什么？如何实现？
第20期【install-pkg】:Vue团队核心成员开发的39行小工具 install-pkg 安装包，值得一学！
第13期【open】: 每次启动项目的服务时，电脑竟然乖乖的帮我打开了浏览器，100行源码揭秘！
第1期【vue-devtools】: 据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘
第18期【delay】面试官：请手写一个带取消功能的延迟函数，axios 取消功能的原理是什么
第12期【@antfu/ni】: 尤雨溪推荐神器 ni ，能替代 npm/yarn/pnpm ？简单好用！源码揭秘！
44期【open in github button vscode 插件】神器啊，从未想过 VSCode 还能这样直接打开仓库URL，原理揭秘
第27期【read-pkg】从 vue-cli 源码中，我发现27行读取 json 文件有趣的 npm 包
第7期【validate-npm-package-name】: validate-npm-package-name
第10期【configstore】: configstore
第29期【quick-lru】quick-lru
第4期【co】:co
第6期【update-notifier】: update-notifier

4.8 vite

第11期【vue-dev-server】: 尤雨溪几年前开发的“玩具 vite”，才100多行代码，却十分有助于理解 vite 原理
第40期【vite .env】vite 是如何解析用户配置的 .env 的

5. 流程图一览

简单说就是四步：

按照顺序选择其中一期开始，看任务。
看辅助文章、看源码。
微信群交流讨论，写笔记，写总结、收获。
掘金任务说明文章评论区提交笔记。

规则图示

6. 读者评价

简单选择了三个笔记中的感想。

6.1 评价一

川哥组织的这个活动，给我最大的影响就是我对待源码的态度发生了转变。以前源码给我的感觉是“可远观而不可亵玩焉”，但是其实只要你认真读过一期，源码就会变成良师益友。你可以坐下来倾听他的思想，并从中受益良多，甚至可以和他交流，提出自己的想法，直至参与共建让源码更好。

6.2 评价二

川哥举办的源码调试给我带来了什么？

开始尝试写笔记
a. 源码我都懂，让我说出来或者写出来，蒙了。
更注重细节
a. 以前看源码就囫囵吞枣的过一遍
更注重应用场景
a. 以前：原来这个方法是这样实现的啊
b. 现在：看下测试用例，都是怎么使用的，某个判断是为了解决什么问题
总之
是一个老手，那么现在川哥给了你一个交流讨论的机会，去温故而知新。
是一个新手，千里之行始于足下，有群里川哥和大佬们的帮助，勇敢迈出第一步。
写笔记真是一个令人头疼的东西。

6.3 评价三

我最近看了几篇，川哥选的库都很精妙啊，老手可以梳理体系，新手可以了解现代工程化，进阶架构师必经之路啊。
特别是这几篇 create-vue、koa-compose、co、vue-dev-server，我都是熬夜看的，太起劲了。

本文持续更新。

#1. 源码共读前言

#2. 常见问题

#3. 如何提交笔记

#4. 从易到难推荐学习顺序

#4.1 我的其他源码

#4.2 原生JS

#4.3 React

#4.4 面试常考

#4.5 脚手架 && 组件库

#4.6 工具库

#4.7 Nodejs

#4.8 vite

#5. 流程图一览

#6. 读者评价

#6.1 评价一

#6.2 评价二

#6.3 评价三