持续5个月，200+笔记，3千多人参与，邀请你来学源码~

注意：本文点击文末阅读原文可查看文中所有链接。

我正在参加掘金年度人气作者投票活动，大家有空可以加微信群帮忙投票，感谢大家！

想起今天还没发文，就开放下微信群二维码，大家扫码进群读源码和帮忙投票吧。群里不定期发些红包。

如果群满了就扫码加我微信ruochuan12，回复源码拉你进群。

为了能帮助到更多对源码感兴趣、想学会看源码、提升自己前端技术能力的同学。

1提交笔记

【喜大普奔】笔记可以自己提交到语雀讨论区啦\~^[2]

所有笔记存放在语雀讨论区^[3]。

现在已经有200多份了。

2常见问题

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

A: 可以。23届（目前大三）的小姐姐都写了7次笔记。一般推荐先读Vue3工具函数，相对不难，有问题可以交流讨论。

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

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

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

A: 目前没有限制。

Q: 必须交笔记吗？

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

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

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

3从易到难推荐学习顺序

为了降低难度，促进大家学习。由10组组长倾力从易到难重新整理学习顺序。**推荐大家按顺序循序渐进学习，查漏补缺，夯实基础。**提高阅读源码的能力，提升前端技术能力。不知道怎么调试的看这篇文章：新手向：前端程序员必学基本技能——调试JS代码^[4]

1. 第7期【validate-npm-package-name】: https://www.yuque.com/ruochuan12/notice/p7^[5]

2. 第19期 【axios/utils】axios 源码中10多个工具函数^[6]

1. 第2期【@vuejs/shared】: 初学者也能看懂的 Vue3 源码中那些实用的基础工具函数^[7]

2. 第14期【promisify】: 从22行有趣的源码库中，我学到了 callback promisify 化的 Node.js 源码实现^[8]

3. 第16期【only-allow】: 从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器^[9]

4. 第20期【install-pkg】:Vue团队核心成员开发的39行小工具 install-pkg 安装包，值得一学！^[10]

5. 第3期【vue-next-release】: Vue 3.2 发布了，那尤雨溪是怎么发布 Vue.js 的？^[11]

6. 第6期【update-notifier】: https://www.yuque.com/ruochuan12/notice/p6^[12]

7. 第8期【mitt、tiny-emitter】: 发布订阅^[13]

8. 第10期【configstore】: https://www.yuque.com/ruochuan12/notice/p10^[14]

9. 第13期【open】: 每次启动项目的服务时，电脑竟然乖乖的帮我打开了浏览器，100行源码揭秘！^[15]

10. 第18期【delay】面试官：请手写一个带取消功能的延迟函数，axios 取消功能的原理是什么^[16]

11. 第11期【vue-dev-server】: 尤雨溪几年前开发的“玩具 vite”，才100多行代码，却十分有助于理解 vite 原理^[17]

12. 第9期【create-vue】: Vue 团队公开快如闪电的全新脚手架工具 create-vue，未来将替代 Vue-CLI，才300余行代码，学它！^[18]

13. 第12期【@antfu/ni】: 尤雨溪推荐神器 ni ，能替代 npm/yarn/pnpm ？简单好用！源码揭秘！^[19]

14. 第1期【vue-devtools】: 据说 99\% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘^[20]

15. 第15期【element-new】: 每次新增页面复制粘贴？100多行源码的 element-ui 新增组件功能告诉你减少重复工作^[21]

16. 第17期 【js-cookie】https://www.yuque.com/ruochuan12/notice/p17^[22]

17. 第5期【koa-compose】：50行代码串行Promise，koa洋葱模型原来是这么实现？^[23]

18. 第4期【co】: https://www.yuque.com/ruochuan12/notice/p4^[24]

4流程图一览

简单说就是四步：

1. 按照顺序选择其中一期开始，看任务。

2. 看辅助文章、看源码。

1. 微信群交流讨论，写笔记，写总结、收获。

2. 语雀讨论区提交笔记。

5读者评价

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

评价一

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

评价二

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

1. 开始尝试写笔记
   a. 源码我都懂，让我说出来或者写出来，蒙了。

2. 更注重细节
   a. 以前看源码就囫囵吞枣的过一遍

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

评价三

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

本文持续更新。点击阅读原文查看链接。

参考资料有省略

[1]

具体投票方式点此查看。: https://www.yuque.com/ruochuan12/notice/juejin

[2]

【喜大普奔】笔记可以自己提交到语雀讨论区啦~: https://www.yuque.com/ruochuan12/topics/2

[3]

语雀讨论区: https://yuque.com/ruochuan12/topics

[4]

新手向：前端程序员必学基本技能——调试JS代码: https://juejin.cn/post/7030584939020042254