在学习koa源码之前你必须是很了解koa,准确的来说是已经阅读过了koa的文档,已经很清楚Koa这个框架的使用。源码学习对初入门koa的同学来说是提升的非常有效的方式。这里我就讲两种koa里面极其重要也是基础的--Emitter和Debug。
感觉对koa不是很清楚的童鞋们,可以戳戳戳!
koa基础知识文档
阮一峰的网络日志 koa框架
koa中文文档
- 新建一个文件夹,我的叫koa_code
- 初始化项目 npm init -y
- 新建一个文件夹叫app.js
const Koa=require('./koa') //引入koa模块
const app=new Koa() //koa是个类,new一个对象app
// 每个中间件都会获得一个上下文环境
const main=ctx=>{
ctx.body='hello world'
}
app.use(main) //中间件使用
app.listen(3001) //监听3000端口
我们这时候就要建一个koa文件夹了,我们现在是要自己写koa哦!
// 事件触发与事件监听功能的封装
const Emitter=require('events') //从事件模块events引入Emitter
const http=require('http') //引入http模块
const debug=require('debug') //引入debug模块
//向外暴露这个类
module.exports=class Application extends Emitter{
//继承于Emitter类,所以子类必须声明constructor类,来自es6语法
constructor(){
super()
// 放中间件的数组
this.middleware=[]
}
// 启用中间件 中间件就是函数
use(fn){
console.log(fn)
//把fn(函数)这个参数放入中间件数组
this.middleware.push(fn)
// chain链式调用
return this
}
//listen函数实现
// 运用...reset,es6语法。里面参数有端口号,回调函数等等
listen(...args){
//开始监听
debug('listen')
// 将http的server封装一下
const server=http.createServer(this.callback())
return server.listen(...args)
}
//创建服务server回调函数的实现。
callback(){
const handleRequest=(req,res)=>{
res.end('hello world')
}
return handleRequest
}
}
已经抛出了Emitter和Debug了。在这里实现了监听函数和中间件函数。在代码中每一步都有注释,可以很清楚的理解。
现在访问3001端口,页面上就显示出了:
koa是基于事件机制的web框架 只是事件起源在用户端,结束在服务器端。
emitter是node.js对事件订阅及发布机制的抽像对象,原生实现了emit方法,可以在框架内部随意添加事件。emitter使得事件一切皆可订阅一切皆可触发。
下面来看看emitter的厉害之处,新建一个文件夹Emitter,建一个文件test.js
const Emitter=require('events') //引入Node.js事件模块 events
const EventEmitter=Emitter.EventEmitter; //引入Emitter模块中的EventEmitter模块
const event=new EventEmitter() //new 一个对象event
// 订阅 就像click.on一样
event.on('some_event',function(){
console.log('some_event事件触发');
})
setTimeout(function(){
// 调用 事件执行
//'some_event要执行的事件
event.emit('some_event')
},1000)
这里充分说明了Emitter的事件机制,在控制台能够输出:
emit与自定义事件有关,我们知道,父组件是使用props传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件! 对emit不太理解的童鞋戳戳戳👉:vue组件之emit
debug框架中常用的工具,debug提示当前程序执行到哪里.在项目中总是要用到对项目的调试,就要用到debug.
现在开始讲debug模块:
1.新建一个文件夹debug,新建两个文件:test.js work.js
2.yarn add debug
3.新建终端,切到debug,
npm init -y
yarn add debug
//引入debug模块,并且打印debug出处
// ('http')里面http标签表示打印debug出处
var debug=require('debug')('http'),
http=require('http'), //引入http模块
name='My App' //字符串
// %o指向对象
debug('booting %o',name) //debug运行,打印
//创建http请求服务
http.createServer((req,res)=>{
//debug打印请求的方法和url
debug(req.method+''+req.url)
//请求返回字符串
res.end('hello\n')
}).listen(8080,function(){
debug('listening') //开始监听
})
// cross-env跨环境执行环境变量
require('./work') //引入文件work.js
这时候package.json文件中的"scripts"中设置:
"dev":"cross-env DEBUG=http nodemon test.js"打开控制台,可以看到控制台输出debug信息:
cross-env 跨环境设置环境变量。在package.json文件中的"scripts"中设置:"dev":"cross-env DEBUG=标签 nodemon test.js"
更好的理解cross-env戳戳戳👉:cross-env解决跨平台设置NODE_ENV问题
var a = require('debug')('worker:a')
var b = require('debug')('worker:b')
// debug函数
function work() {
a('doing lots of uninteresting work')
// 使得能够一直执行
setTimeout(work, Math.random()*1000)
}
work()
// debug函数
function workb() {
b('doing some work');
// Math.random()*2000每隔两秒取一个随机数使它能够一直执行
setTimeout(workb, Math.random()*2000)
}
workb()
这时候package.json文件中的"scripts"中设置:
"dev":"cross-env DEBUG=* nodemon test.js"控制台上输出:
Koa使用了ES6规范的generator和异步编程是一个更轻量级Web开发的框架,需要深入理解其底层实现,对koa源码的学习要慢慢的深入。
各位大佬们有什么建议欢迎提出哦🙂



