50行 koa-compose,面试常考的中间件原理原来这么简单?

大家好,我是若川。源码共读《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

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

  1. 开始尝试写笔记

    1. 源码我都懂,让我说出来或者写出来,蒙了

  2. 更注重细节

    1. 以前看源码就囫囵吞枣的过一遍

  3. 更注重应用场景

    1. 以前:原来这个方法是这样实现的啊

    2. 现在:看下测试用例,都是怎么使用的,某个判断是为了解决什么问题

总结

  • 是一个老手,那么现在川哥给了你一个交流的平台,去温故而知新。

  • 是一个新手,千里之行始于足下,有群里川哥和大佬们的帮助,勇敢迈出第一步。

  • 写笔记真是一个令人头疼的东西。

最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。


推荐阅读

1个月,200+人,一起读了4周源码
我读源码的经历

老姚浅谈:怎么学JavaScript?

我在阿里招前端,该怎么帮你(可进面试群)

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。

识别方二维码加我微信、拉你进源码共读

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275459.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sqlite3源码编译到Android,实现SQLite跨全平台使用

文/何晓杰Dev(高级Android架构师)著作权归作者所有,转载请联系作者获得授权。初看这个标题你可能会不解,SQLite 本身就是一个跨平台的数据库,在这里再说跨平台有什么意义呢?其实不然,目前我就遇到了一个项目…

illustrator下载_平面设计:16个Illustrator快捷方式可加快工作流程

illustrator下载I know, I know — keyboard shortcuts sound so nerdy, and you’re a graphic designer, not an IT Director, why should you learn keyboard shortcuts?我知道,我知道—键盘快捷键听起来很书呆,而且您是图形设计师,而不是…

手把手教你五分钟扒个源码写个无敌外挂

大家好,我是若川。源码共读《1个月,200人,一起读了4周源码》 活动进行到第五期了,欢迎点链接加我微信 ruochuan12 报名参加。前言前段时间群里分享了一个小游戏,多次怀疑自己的眼睛以后,尝试去写个外挂。中…

Kubernetes 1.14重磅来袭,多项关键特性生产可用

走过了突飞猛进的2018年,Kubernetes在2019年终于迎来了第一个大动作:Kubernetes 1.14版本的正式发布!Kubernetes 本次发布的 1.14 版本,包含了 31 项增强,其中 10 项为 GA,12 项进入 beta 试用阶段&#xf…

open ai gpt_让我们来谈谈将GPT-3 AI推文震撼到核心的那条推文

open ai gpt重点 (Top highlight)“设计师”插件 (The ‘Designer’ plugin) A couple days ago, a tweet shared by Jordan Singer turned the heads of thousands of designers. With the capabilities of GPT-3 (from OpenAI), he shared a sample of what he was able to c…

我历时3年才写了10余篇源码文章,但收获了100w+阅读

你好,我是若川。最近来了一些读者朋友,在这里简单介绍自己的经历,也许对你有些启发。之前发过这篇文章,现在修改下声明原创,方便保护版权。最近组织了源码共读活动1个月,200人,一起读了4周源码&…

第 8 章 容器网络 - 061 - flannel 的连通与隔离

flannel 的连通与隔离 测试 bbox1 和 bbxo2 的连通性: bbox1 能够 ping 到位于不同 subnet 的 bbox2,通过 traceroute 分析一下 bbox1 到 bbox2 的路径。 1) bbox1 与 bbox2 不是一个 subnet,数据包发送给默认网关 10.2.9.1&#…

计算机视觉笔记本推荐_视觉灵感:Mishti笔记本

计算机视觉笔记本推荐The Mishti Notebook is a project close to my heart, wherein I experimented with screen printing techniques at the Print Labs at the National Institute of Design, Ahmedabad. Dating back to the year 2012 when the NID Print Labs was first …

Google工程师:如何看待程序员普遍缺乏数据结构和算法知识?

出处:极客时间《数据结构与算法之美》很多技术人都很迷茫,觉得自己做的项目没有技术含量,成天就是卖苦力。技术的东西,日新月异,有些人总在忙于追求热点新技术,东学学、西学学,平时泛泛地看技术…

android guide 中文版,Sky Guide

Sky Guide是一款能让小伙伴们观察银河的手机软件,尤其是喜欢行星、星座的小伙伴们来讲,这款软件能很好的帮助小伙伴们观看这些,让小伙伴们体验不一样的观星乐趣,因此想要观看的小伙伴们,赶紧来试试吧。软件介绍&#x…

layui选项卡嵌套选项卡_在ProtoPie中使用嵌套组件构建选项卡栏

layui选项卡嵌套选项卡One of the powerful features of ProtoPie is the ability to build fully portable and interactive UI components. We are going to make use of nested components, SVG icons, and layout constraints to build a tab bar UI component that is sel…

50行代码串行Promise,koa洋葱模型原来这么有趣?

1. 前言大家好,我是若川,最近组织了源码共读活动《1个月,200人,一起读了4周源码》,感兴趣的可以加我微信 ruochuan12 参与,长期交流学习。之前写的《学习源码整体架构系列》 包含jQuery、underscore、lodas…

js 用迭代器模式优雅的处理递归问题

2019独角兽企业重金招聘Python工程师标准>>> 什么是迭代器 循环数组或对象内每一项值,在 js 里原生已经提供了一个迭代器。 var arr [1, 2, 3] arr.forEach(function (item) {console.log(item) })实现一个迭代器 var iterator function (arr, cb) {fo…

如何抓取html请求,请求获取网页的response,获取网页的html 怎么那么慢

HttpEntity multipart builder.build();httppost.setEntity(multipart);long start System.currentTimeMillis();// 发送请求response httpclient.execute(httppost);long end System.currentTimeMillis();System.out.println("查询upsfreight消耗的时间是(毫秒):&quo…

Serverless 究竟是什么?

大家好,我是若川。说起 Serverless,我想你应该并不陌生,作为一种云开发的架构模式,在近两年里,伴随着云原生概念的推广愈发火爆。作为一名 Serverless 的拥趸,在跟大家推荐的过程中,我经常能看到…

instagram.apk_评论:Instagram Reels vs.TikTok

instagram.apkWith all the attention to the newly debuted Instagram Reels from Facebook and the hilarious, bizarre world of TikTok, here’s a first impression on the two platforms and how they compare from a designer’s perspective.所有人都在关注Facebook新近…

240多个jQuery常用到的插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼容各种浏览器(IE 6.0, FF 1.5, Safari 2.…

华为首款鸿蒙设备正式入网,华为首款鸿蒙设备正式入网:麒麟9000+挖孔全面屏,价格感人!...

作为国内电子产品领域的巨头之一,华为这两年的快速发展是大众有目共睹的,除了手机业务外,华为的平板业务同样有亮眼表现,无独有偶,在近期各方媒体的不断披露之下,又有一款华为平板被基本确认,这…

myeclipse深色模式_完善深色模式的调色板

myeclipse深色模式Apps largely have a limited color palette which may already map well to dark mode. However, some colors produce optical vibrations when viewed on a dark background, straining the user’s eyes. So, certain apps need to map to a slightly des…

微软悄悄发布了 Web 版的 VsCode

大家好,我是若川,最近组织了源码共读活动《1个月,200人,一起读了4周源码》,感兴趣的可以加我微信 ruochuan12 参与,长期交流学习。在8月31日,微软发了一个介绍他们新发布的功能的帖子介绍&#…