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

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

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

---

開啟傻瓜式調(diào)試模式

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行打一個斷點

點擊紅框位置，你會發(fā)現(xiàn)有一個紅點出現(xiàn)了，這樣就打好斷點了 為什么要在這里打斷點，因為compose函數(shù)在這里調(diào)用了，我們想看看這個 函數(shù)里面究竟做了什么

4. 找到package.json

5. 你驚喜的發(fā)現(xiàn)，竟然跳到你打斷點的哪里了

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

6. compose干了什么

這時你發(fā)現(xiàn)進入到了函數(shù)內(nèi)部，看到傳進來的參數(shù)是什么后 你狂按下一步（箭頭2標記的單步跳過，快捷鍵F10）

7. 遇到循環(huán)了，太煩了，一直點一直循環(huán)，我該怎么辦？

image.png

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

image.png

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

10. dispatch解讀

image.png

川哥舉辦的源碼調(diào)試給我?guī)砹耸裁?#xff1f;

開始嘗試寫筆記

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

更注重細節(jié)

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

更注重應用場景

以前：原來這個方法是這樣實現(xiàn)的啊

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

總結(jié)

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

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

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

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

---

推薦閱讀

1個月，200+人，一起讀了4周源碼
我讀源碼的經(jīng)歷

老姚淺談：怎么學JavaScript？

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

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

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

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

今日話題

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。