阅读好的框架的源码有很多好处,从大神的视角去理解整个框架的设计思想。大到架构设计,小到可取的命名风格,还有设计模式、实现某类功能使用到的数据结构和算法等等。

使用koa

其实某个框架阅读源码的时候,首先我们要会去用这个框架,因为用了我们才知道,某个API是怎么用,哪里有坑,哪里设计的精妙。

下面我们就简单用一下koa这个框架,如下代码


const Koa = require('koa')
const app = new Koa()
app.use(async (ctx, next) => {
ctx.body = 'Hello World'
})
app.listen(4002)

运行结果

瓦特??这个服务会涉及到从请求到响应返回数据,就这几行代码?? 是的,你没有看错,就是单单这几行代码就可以搭建了一个服务器。

下面我们看看一探究竟。

阅读源码

去到node_modules文件夹下找到koa模块,先喵几眼README.md文件,里面介绍了koa的一些安装、用法、插件等等,这里我们跳过,然后转到package.json如下图

看到package.json里面的"main": "lib/application.js"没错,这就是我们的入口,在lib文件夹下面,我们看到里面有application.jscontext.jsrequrest.jsresponse.js。下面经过我修改简化去掉注释application.js就只有68行代码。阅读起来可以说是非常简单了。如下图:

第一步是我们引入各种主要依赖

// 引入有很多 我只挑我阅读主要框架的代码模块

const response = require('./response'); // 处理response对象
const compose = require('koa-compose'); // 合并处理中间件函数
const context = require('./context'); // 整合处理context对象
const request = require('./request'); // 整合处理request对象
const http = require('http'); // node的 http原生模块

以上就是我们的主要依赖

Application的对象中,有constructor函数,这个主要是初始化Application对象,生成context对象、request对象、response对象

module.exports = class Application extends Emitter {
// 初始化 Application
constructor() {
super(); // 继承Emitter
this.middleware = []; // 初始化middleware为空数组
this.context = Object.create(context); // 生成context对象
this.request = Object.create(request); // 生成request对象
this.response = Object.create(response); // 生成response对象
}
}

阅读源码,我们先不要去扣细节,比如说Object.create(context)生产的对象是什么?this.request对象下面又有什么东西???,我们现在主要知道的是、this.context是能获取或者设置请求和响应的信息的一个对象,。this.request是请求的对象、里面可以设置或者获取请求信息的一个对象、this.response是响应请求对象、里面可以设置或者获取响应参数和值的一个对象。大概先了解就可以了。继续往下看。

在上面运用的时候,用到了app.use(fn)app.listen(4002) 我们看看,源码里面试这样子的


module.exports = class Application extends Emitter {
// 初始化 Application
constructor() {
...
}
listen(...args) {
const server = http.createServer(this.callback());
return server.listen(...args);
}
use(fn) {
this.middleware.push(fn);
return this;
}

上面的代码很简单 use函数就是把传入的fn 推入到this.middleware的数组中,然后返回this,方便链式调用。

然后在listen里面用node原生的http模块创建一个server,在这里顺便说一下,原生 http创建一个服务是这样子滴

const http = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('okay');
});
http.listen(8000)

继续看代码 ,在创建服务的时候,参数里面调用了一个this.callback()函数,下面我们看看这个函数究竟是怎么样子的。


module.exports = class Application extends Emitter {
// 初始化 Application
constructor() {
...
}
listen(...args) {
...
}
use(fn) {
...
} callback() {
const fn = compose(this.middleware); // 集中处理中间件数组
const handleRequest = (req, res) => {
const ctx = this.createContext(req, res); // 整合req、res、context、request、response
return this.handleRequest(ctx, fn); // 返回handleRequest
};
return handleRequest;
} handleRequest(ctx, fnMiddleware) {
const handleResponse = () => respond(ctx); // 最终响应函数
return fnMiddleware(ctx).then(handleResponse) // 处理完中间件,然后传到下一响应函数
}
// 创建整合新的 context.
createContext(req, res) {
const context = Object.create(this.context);
const request = context.request = Object.create(this.request);
const response = context.response = Object.create(this.response);
context.app = request.app = response.app = this;
context.req = request.req = response.req = req;
context.res = request.res = response.res = res;
request.ctx = response.ctx = context;
request.response = response;
response.request = request;
context.originalUrl = request.originalUrl = req.url;
context.cookies = new Cookies(req, res, {
keys: this.keys,
secure: request.secure
});
request.ip = request.ips[0] || req.socket.remoteAddress || '';
context.accept = request.accept = accepts(req);
context.state = {};
return context;
}
};

上面我们可以看出在callback函数里面有一个const fn = compose(this.middleware); 这个函数就是把this.middleware数组传进去,然后集中处理中间件,然后会返回处理完中间件的fn。

继续下一行

const handleRequest = (req, res) => {
const ctx = this.createContext(req, res);
return this.handleRequest(ctx, fn);
};

继续进入到handleRequest函数里面的const ctx = this.createContext(req, res);这个把原生的http的请求对象req响应对象res作为参数传进去,然后在createContext函数(看上面最大那坨代码)在里面,把this.requestthis.responsethis.context请求对象req响应对象res都整,做各种整合、处理得到新的context对象返回出去。

也就是强大的ctx,得到ctx之后,下一行返回return this.handleRequest(ctx, fn);

this.handleRequest(ctx, fn)代码如下


handleRequest(ctx, fnMiddleware) {
const handleResponse = () => respond(ctx);
return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}

这个函数 就是处理完中间件处理之后的返回的函数把ctx传下去,最后流通到respond(ctx);这个函数,

那么我们看看这个函数被我简化后是怎么样子的,如下

// 一些容错判断或者提示我全部删了
function respond(ctx) {
const res = ctx.res;
let body = ctx.body;
res.end(body);
}

通过ctx拿到响应对象,和响应值、通过end方法会通知服务器,所有响应头和响应主体都已被发送,即服务器将其视为已完成。看上面原生的http的服务方法。

最后附上一个流程图

这个只是介绍application整个流程,还有很多细节都没有一一介绍到,比如、创建contextrequestresponse对象是怎么样子的呀?中间件是如何集中层层深入处理然后返回的呀?等等这些细节都会在下一篇会讲到(最近公司业务非常忙,不知道到猴年马月)。

写的不好的地方,让大家贱笑了。

然后最后安利一波博客,喜欢的小哥哥小姐姐可以star 哟

websit: https://github.com/naihe138/naice-blog

一步步去阅读koa源码,整体架构分析的更多相关文章

  1. jquery源码 整体架构

    一.对外提供接口 对外提供了jQuery. //可以通过jQuery或者$来找到jQuery (function(window,undefined){ //(21,94) 定义了一些变量和函数 jQu ...

  2. leveldb 源码--总体架构分析

    一 本文目的 对leveldb的总体设计框架分析(关于leveldb基本原理,此文不做阐述,读者可以自行检索文章阅读即可),对leveldb中底层数据存储数据格式,内存数据模型,compact,版本管 ...

  3. 阅读nsq源码 ---初步架构设计图

     

  4. Koa源码解析,带你实现一个迷你版的Koa

    前言 本文是我在阅读 Koa 源码后,并实现迷你版 Koa 的过程.如果你使用过 Koa 但不知道内部的原理,我想这篇文章应该能够帮助到你,实现一个迷你版的 Koa 不会很难. 本文会循序渐进的解析内 ...

  5. koa源码阅读[3]-koa-send与它的衍生(static)

    koa源码阅读的第四篇,涉及到向接口请求方提供文件数据. 第一篇:koa源码阅读-0第二篇:koa源码阅读-1-koa与koa-compose第三篇:koa源码阅读-2-koa-router 处理静态 ...

  6. koa源码阅读[2]-koa-router

    koa源码阅读[2]-koa-router 第三篇,有关koa生态中比较重要的一个中间件:koa-router 第一篇:koa源码阅读-0第二篇:koa源码阅读-1-koa与koa-compose k ...

  7. koa源码阅读[0]

    koa源码阅读[0] Node.js也是写了两三年的时间了,刚开始学习Node的时候,hello world就是创建一个HttpServer,后来在工作中也是经历过Express.Koa1.x.Koa ...

  8. 如何阅读Java源码?

    阅读本文大概需要 3.6 分钟. 阅读Java源码的前提条件: 1.技术基础 在阅读源码之前,我们要有一定程度的技术基础的支持. 假如你从来都没有学过Java,也没有其它编程语言的基础,上来就啃< ...

  9. 阅读 Android源码的一些姿势

    日常开发中怎么阅读源码 找到正确的源码 IDE 是日常经常用的东西,Eclipse 就不说了,直接从 Android Studio(基于 IntelliJ Community 版本改造)开始. 我们平 ...

随机推荐

  1. Python - 使用 PostgreSQL 数据库

    基本用法 # -*- coding: utf-8 -*- # !/usr/bin/python # 需要安装下面的驱动包 import psycopg2 # 连接到一个现有的数据库,如果数据库不存在, ...

  2. 算法笔记4.2哈希 问题 A: 谁是你的潜在朋友

    题目描述 "臭味相投"--这是我们描述朋友时喜欢用的词汇.两个人是朋友通常意味着他们存在着许多共同的兴趣.然而作为一个宅男,你发现自己与他人相互了解的机会 并不太多.幸运的是,你意 ...

  3. 96)PHP,文件上传(2)

    (1)那么既然看到文件即使上传成功,但是只是在脚本周期内有效,脚本只要结束(脚本结束其实很快的),文件就会自动消失,那么怎么才能永久存储文件呢: 函数: Move_uploaded_file(上传临时 ...

  4. Win7如何查看nvidia显卡(GPU)的利用率

    1.在文件夹C:\Program Files\NVIDIA Corporation\NVSMI里找到文件nvidia-smi.exe2.把该文件拖到命令提示符窗口(win+R,再输入‘CMD’进入), ...

  5. XGBoost使用篇(未完成)

    1.截止到本文(20191104)sklearn没有集成xgboost算法,需要单独安装xgboost库,然后导入使用 xgboost官网安装说明 Pre-built binary wheel for ...

  6. Facebook要做约会服务,国内社交眼红吗?

    看看现在的各种相亲趣事就能深深感悟到,中国还是以家庭为重的国家.在传统文化的浸染下,国人始终是将家庭摆在第一位.而对于欧美等发达国家来说,他们固然也以家庭为重,但更注重的是男女之间的关系定位--恋爱也 ...

  7. 四、RabbitMQ Exchange类型

    RabbitMQ整体上是一个生产者与消费者模型,主要负责接收.存储和转发消息.可以把消息传递的过程想象成:当你将一个包裹送到邮局,邮局会暂存并最终将邮件通过邮递员送到收件人的手上,RabbitMQ就好 ...

  8. cs231n spring 2017 lecture2 Image Classification

    1. 相比于传统的人工提取特征(边.角等),深度学习是一种Data-Driven Approach.深度学习有统一的框架,喂不同的数据集,可以训练识别不同的物体.而人工提取特征的方式很脆弱,换一个物体 ...

  9. t分布|F分布|点估计与区间估计联系|

    应用统计学 推断统计需要样本形容总体,就要有统计量.注意必须总体是正态分布,否则统计量的分布不能得到.卡方分布和t分布只要样本大于30都近似于正态分布. t分布和F分布推导及应用(图): 总体比例是π ...

  10. 设置Fiddler来抓取Android接口数据

    1.下载安装fiddler,安装包可自行百度.安装完成打开fiddler 2.将Fiddler设置远程访问PC 选择Fiddler->Tools->Fiddler Option 3.选择C ...