大家好，我是若川。源碼共讀《1個月，200+人，一起讀了4周源碼》 活動第五期是學習 koa 源碼的整體架構，淺析koa洋蔥模型原理和co原理中的koa-compose源碼原理，閱讀不到50行的koa-compose源碼。

這篇是izjing小哥哥的投稿。izjing小哥哥的筆記截圖非常細致，可謂是手把手教如何通過測試用例調試學源碼。文末izjing小哥哥也對比了參與源碼共讀前后的收獲。文章不長，建議收藏，自己動手調試學習。

不知不覺，源碼共讀已經進行了一個多月，很多小伙伴表示對面試和工作很有幫助，學完立馬能用。如果你也感興趣可以加我微信 ruochuan12 參加。

---

開啟傻瓜式調試模式

1. 下載項目

git?clone?https://github.com/lxchuan12/koa-compose-analysis.git cd?koa-compose/compose npm?i

2. 找到并打開test.js

image.png

3. 在test.js中第45行打一個斷點

點擊紅框位置，你會發現有一個紅點出現了，這樣就打好斷點了 為什么要在這里打斷點，因為compose函數在這里調用了，我們想看看這個 函數里面究竟做了什么

4. 找到package.json

5. 你驚喜的發現，竟然跳到你打斷點的哪里了

我是誰，我要干嘛，我干脆進去看看吧！（根據箭頭指示進入函數）

6. compose干了什么

這時你發現進入到了函數內部，看到傳進來的參數是什么后 你狂按下一步（箭頭2標記的單步跳過，快捷鍵F10）

7. 遇到循環了，太煩了，一直點一直循環，我該怎么辦？

image.png

8. 咦，咋又回去了，我是誰我要干嘛？

image.png

9. 這下對勁了，我懂了，我會了，我知道要干嘛了

10. dispatch解讀

image.png

川哥舉辦的源碼調試給我帶來了什么？

開始嘗試寫筆記

源碼我都懂，讓我說出來或者寫出來，蒙了

更注重細節

以前看源碼就囫圇吞棗的過一遍

更注重應用場景

以前：原來這個方法是這樣實現的啊

現在：看下測試用例，都是怎么使用的，某個判斷是為了解決什么問題

總結

• 是一個老手，那么現在川哥給了你一個交流的平臺，去溫故而知新。

• 是一個新手，千里之行始于足下，有群里川哥和大佬們的幫助，勇敢邁出第一步。

• 寫筆記真是一個令人頭疼的東西。

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信 江西?拉你進群。

---

推薦閱讀

1個月，200+人，一起讀了4周源碼
我讀源碼的經歷

老姚淺談：怎么學JavaScript？

我在阿里招前端，該怎么幫你（可進面試群）

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》多篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，活躍在知乎@若川，掘金@若川。致力于分享前端開發經驗，愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。歡迎分享、收藏、點贊、在看我的公眾號文章~

總結

以上是生活随笔為你收集整理的50行 koa-compose，面试常考的中间件原理原来这么简单？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。