[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","shineliuhzz","page",1,"limit",20,"total","id","21815","avatar_url","https://avatars2.githubusercontent.com/u/5803957?v=4","githubUsername","create_at","2016-04-03 15:35:03.228","score",30,"topic_count",0,"reply_count",6,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":34,"_48":34,"_31":49,"_50":51,"_25":52,"_53":54},"17819","author_id","14439","tab","share","content","半小时掌握koa\r\n-----\r\n* [koa分析与实现](#koa分析与实现)\r\n\t* [从一个例子开始](#example) \r\n\t* [koa之流程](#abstract)\r\n\t* [app对象分析](#appObjectAnalyse)\r\n\t* [callback实现](#callback)\r\n\t* [其他function](#otherFn)\r\n* [koa与他的小伙伴](#koaCompoment)\r\n\t* [koa-router](#koa-router) \r\n\t\t* [内存模型](#router-memory)\r\n\t\t* [请求处理流程](#router-flow)\r\n\t\t* [router.verb](#router.verb)\r\n\t\t* [router.use](#router.use) \r\n\t\t* [router.param](#router.param)\r\n\t* [koa-body](#koa-body) \r\n\t\r\n

koa分析与实现

\r\n\r\n

1.从一个例子开始

\r\n\r\n```js\r\n'use strict';\r\n\r\nlet Application = require('koa');\r\n\r\nlet app = new Application();\r\n\r\napp.use(function*(next) {\r\n console.log('东方红');\r\n yield next;\r\n console.log('太阳升');\r\n console.log();\r\n});\r\n\r\napp.use(function*(next) {\r\n console.log('-1979年,');\r\n yield next;\r\n console.log('-那是一个春天');\r\n});\r\n\r\napp.use(function*() {\r\n let message = '--我爱北京,天安门';\r\n console.log(message);\r\n this.body = 'hello world';\r\n});\r\n\r\nconst PORT = 8888;\r\napp.listen(PORT);\r\n\r\nconsole.log('start at ' + PORT);\r\n\r\n```\r\n上面代码，先后添加了3个middleware。请求的结果如下： \r\n

\r\n东方红  \r\n-1979年,  \r\n--我爱北京,天安门  \r\n-那是一个春天  \r\n太阳升  \r\n

\r\n\r\n

2.koa之流程

\r\n\r\n![GitHub](http://7xovlo.com1.z0.glb.clouddn.com/koa_study_img1.jpg \"图片找不到了\")\r\n\r\n* 每一个请求到达服务器后，初始化请求上下文对象\r\n* 将上下文对象按照顺序，在每个中间件中运行一遍\r\n\t* 执行中间件1，next前的逻辑\r\n\t* next\r\n\t\t* 执行中间件2的逻辑 \r\n\t* 执行中间件1，next后的逻辑 \r\n* 将body返回给客户端\r\n\r\n上面的过程就是创建http服务器的时候，callback参数应该做的事情。\r\n\r\n

3.app对象分析

\r\n\r\n* 属性：由于这里只是简单的山寨一下koa，所以只需要一个middleware数组，用来存储中间件。如果感兴趣，想完善的话可以添加其他的属性，实现相关功能。\r\n* 公共方法：从开始的例子可以轻松看出有如下2个方法。\r\n\t* use\r\n\t* listen \r\n* 私有方法：\r\n\t* callback：创建http服务器的时候需要提供的回调函数\r\n\t* response：相应函数\r\n \r\n\r\n

4.callback实现

\r\n\r\n先从callback下手。因为，解决了这个函数，其他函数的实现就是轻松加愉快。 \r\n不过，开始我们就会发现一个问题。回调函数是node底层调用的，我们没有办法把middleware参数传递进。 \r\n这个时候，闭包玩的比较熟练的同学也许就会心中窃喜了。 \r\n没错解决这个问题的常用手段就是使用高阶函数，利用js的闭包这一特性。\r\n \r\n```js\r\nfunction callback(middleware) {\r\n\treturn function (req, res) {\r\n\t}\r\n}\r\n```\r\n\r\n解决了上边的问题，我们顺着流程写就好了。 \r\n \r\n首先构造上下文对象\r\n\r\n```js\r\nfunction callback(middleware) {\r\n\treturn function (req, res) {\r\n\t\tlet ctx = {\r\n\t req: req,\r\n\t res: res\r\n\t };\r\n\t}\r\n}\r\n```\r\n\r\n之后需要做的事情就是，顺序调用每一个middleware。但是我们手中有的数据结构只是一个generator function array，显然完成不了任务。因此，考虑将它map一下，让它变成一个类似function链表一样的东西。\r\n\r\n代码如下：\r\n\r\n```js\r\nlet next = function*(){};\r\n\r\nvar i = middleware.length;\r\nwhile (i--) {\r\n\tnext = middleware[i].call(ctx, next);\r\n}\r\n```\r\n\r\nps: 这里有一点不知道大家发现了没有！！在每一个请求到来的时候，都需要进行一次这种map。也就是说，挂载的中间件越多，性能就会越差。我觉得这也是，koa1在性能上比express差的一个原因吧。 [性能测试](#http://17koa.com/koa-benchmark/)\r\n\r\n\r\n接着，调用一下链表头的function，就可以实现middleware的调用。\r\n\r\n```js\r\nfunction callback(middleware) {\r\n return function (req, res) {\r\n let ctx = {\r\n req: req,\r\n res: res\r\n };\r\n co(function *() {\r\n let next = function*(){};\r\n\r\n var i = middleware.length;\r\n while (i--) {\r\n next = middleware[i].call(ctx, next);\r\n }\r\n return yield next;\r\n })\r\n }\r\n}\r\n```\r\n\r\n最后，就是将上下文的body返回给前端。\r\n```js\r\nfunction callback(middleware) {\r\n return function (req, res) {\r\n let ctx = {\r\n req: req,\r\n res: res\r\n };\r\n co(function *() {\r\n let next = function*(){};\r\n\r\n var i = middleware.length;\r\n while (i--) {\r\n next = middleware[i].call(ctx, next);\r\n }\r\n return yield next;\r\n }).then(() => response.call(ctx))\r\n .catch(e => console.log(e.stack));\r\n }\r\n}\r\n```\r\n\r\n以上就是整个callback的代码，不过错误处理比较粗糙。大家可以自己完善一下^-^。\r\n\r\n

5.其他function

\r\n\r\n其他function就比较简单了。分别写在下面\r\n\r\n```js\r\napp.listen = function () {\r\n var server = http.createServer(callback(this.middleware));\r\n return server.listen.apply(server, arguments);\r\n};\r\n```\r\n\r\n```js\r\napp.use = function (fn) {\r\n this.middleware.push(fn);\r\n};\r\n```\r\n\r\n```js\r\nfunction response() {\r\n this.res.writeHead(200, {\r\n 'Content-Type': 'text/plain'\r\n });\r\n this.res.end(this.body);\r\n}\r\n```\r\n\r\n最后整个myKoa的代码\r\n\r\n```js\r\n'use strict';\r\n\r\nlet co = require('co');\r\nlet http = require('http');\r\n\r\nfunction Application() {\r\n this.middleware = [];\r\n}\r\n\r\nvar app = Application.prototype;\r\n\r\n\r\napp.listen = function () {\r\n var server = http.createServer(callback(this.middleware));\r\n return server.listen.apply(server, arguments);\r\n};\r\n\r\napp.use = function (fn) {\r\n this.middleware.push(fn);\r\n};\r\n\r\n\r\nfunction callback(middleware) {\r\n return function (req, res) {\r\n let ctx = {\r\n req: req,\r\n res: res\r\n };\r\n co(function *() {\r\n let next = function*(){};\r\n\r\n var i = middleware.length;\r\n while (i--) {\r\n next = middleware[i].call(ctx, next);\r\n }\r\n return yield next;\r\n }).then(() => response.call(ctx))\r\n .catch(e => console.log(e.stack));\r\n }\r\n}\r\n\r\n//------private function\r\nfunction response() {\r\n this.res.writeHead(200, {\r\n 'Content-Type': 'text/plain'\r\n });\r\n this.res.end(this.body);\r\n}\r\n\r\nmodule.exports = Application;\r\n \r\n```\r\n\r\n

koa与他的小伙伴

\r\n\r\n

koa-router

\r\n\r\n

1.内存模型

\r\n\r\n![GitHub](http://7xovlo.com1.z0.glb.clouddn.com/koa-router-memory.jpg \"图片找不到了\")\r\n上图是一个简化的koa-router的内存快照。 \r\n1个router最主要的属性就是stack，他是一个layer的数组。每当我们调用一次router.verb或者router.use就会有一个layer被创造出来，放到这个数组中。 \r\n如上图所示，每个layer主要有4个属性。 \r\n请大家，务必记住这个内存模型，后文的讨论都会围绕这张图进行。 \r\n\r\n\r\n

2.请求处理流程

\r\n\r\n在上一部分曾经说过，koa的每一个中间件都是一个generator function，koa-router也不能免俗。别看他代码比koa要多，但是他就是一个函数而已。 \r\n接下来我们就看一下当请求到达服务器后这个函数都干了些什么。 \r\n \r\n* 首先便利router的stack数组，通过每一个layer的正则版本的路径检查当前请求的path是否符合这则表达式。\r\n* 通过了第一步的检查的layer，进入了第二阶段的筛选。这个阶段的标准是layer的methods属性，methods为空数组或者methods数组中有当前请求的verb便通过筛选。\r\n* 通过筛选的layer会被放入一个叫做pathAndMethod的数组中\r\n* 我们下载可以看下下我们又有的数据结构-->一个fn*的二维数组。是否有种似曾相识的感觉囊。那么，下一步就是讲数组变成fn链表，然后调用一下开头的fn。\r\n\r\n以上就是koa-router的整个流程。\r\n\r\n\r\n

3.verb

\r\n相信大家对于这个方法的用法应该很熟悉了吧，我就在这里不多说了。 \r\n这里，我想强调的是。每次使用这个方法的时候就会增加一个layer。也就是说筛选合适的layer的操作消耗的时间就会变多。在设计跟优化程序的时候应该注意这个特征。 \r\n另外，推荐一种性能更好的使用方法 \r\n\r\n```js\r\n//method1\r\nrouter.get('/blabla',fn1,fn2,...)\r\n\r\n//method2\r\nrouter.use('/blabla',fn1)\r\nrouter.get('/blabla',fn2)\r\n```\r\nmethod1和2可以实现相同的功能，但是method1只会创建一个layer，这个layer会有两个middleware。不难发现method1的效率会更高一些。 \r\n好了verb就说到这了吧。\r\n\r\n

3.use

\r\n关于这个方法，我想说的是，use不但可以use一个自己写的中间件，而且还可以use一个router。这种方法可以让我们实现用文件夹定义url的效果，我个人觉得这是一种有没得方法。 \r\n\r\n```js\r\nvar forums = new Router();\r\nvar posts = new Router();\r\n\r\nposts.get('/', function *(next) {...});\r\nposts.get('/:pid', function *(next) {...});\r\nforums.use('/forums/:fid/posts', posts.routes(), posts.allowedMethods());\r\n\r\n// responds to \"/forums/123/posts\" and \"/forums/123/posts/123\"\r\napp.use(forums.routes());\r\n\r\n```\r\n\r\n我想，也许有人会好奇这个功能是怎么实现的吧，当时看到api文档的时候我也很好奇。下面我就来说一下吧。 \r\n直接上源代码：\r\n\r\n```js\r\nmiddleware = middleware.filter(function (fn) {\r\n if (fn.router) {\r\n fn.router.stack.forEach(function (layer) {\r\n if (path) layer.setPrefix(path);\r\n if (router.opts.prefix) layer.setPrefix(router.opts.prefix);\r\n router.stack.push(layer);\r\n });\r\n\r\n if (router.params) {\r\n Object.keys(router.params).forEach(function (key) {\r\n fn.router.param(key, router.params[key]);\r\n });\r\n }\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n });\r\n\r\n```\r\n从上面可以很轻易的看出，作者是先检测了一下这个fn，发现如果是router，那么读取这个router的所有layer，把每一个layer设置一下前缀，然后直接放到父router的stack中。机智吧^-^.\r\n\r\n

3.param

\r\n最后要说的是param这个方法。\r\n\r\n```js\r\nrouter\r\n .param('user', function *(id, next) {\r\n this.user = users[id];\r\n if (!this.user) return this.status = 404;\r\n yield next;\r\n })\r\n .get('/users/:user', function *(next) {\r\n this.body = this.user;\r\n })\r\n .get('/users/:user/friends', function *(next) {\r\n this.body = yield this.user.getFriends();\r\n })\r\n // /users/3 => {\"id\": 3, \"name\": \"Alex\"}\r\n // /users/3/friends => [{\"id\": 4, \"name\": \"TJ\"}]\r\n```\r\n当时，看到这段代码的时候，确实激动了一把。如作者说的，这个功能可以很方便的实现auto-loading作者是validation。 \r\n但是，但是，但是！！！！！！！同志们一定要注意，这里面有一个小小的坑。\r\n闲言碎语不要说，我们直接上代码\r\n\r\n```js\r\nvar app = require('koa')();\r\nvar router = require('koa-router')();\r\n \r\nrouter\r\n .get('/test/:id', function *() {\r\n console.log('get', this.test);\r\n this.body = 'hello world';\r\n })\r\n .use('/test/:id', function*(next) {\r\n console.log('use', this.test)\r\n yield next;\r\n })\r\n .param('id', function * (id, next) {\r\n this.test = this.test || 0;\r\n this.test = this.test + id;\r\n yield next;\r\n });\r\n\r\napp.use(router.routes())\r\n .use(router.allowedMethods());\r\n\r\napp.listen(8888);\r\n\r\n/**\r\n输出结果\r\nuse 01\r\nget 011\r\n**/\r\n\r\n```\r\n相信眼尖的通知们已经知道发生了什么！没错，param对应的fn执行了两遍，这是因为param会把中间件放到layer的middleware数组中。 \r\n好了，虽然有点小小的瑕疵，但是，用的时候注意就好了。这个功能还是很好用的，吼吼吼。\r\n\r\n以上就是koa-router我想说的全部内容，至于怎么用的话，看一下api文档就好了，我只能说作者设计的很简洁，一切说明都是废话。 \r\n\r\n希望我也能早日设计出这么有没得api。\r\n\r\n\r\n

koa-body

\r\n\r\n这个组件使用起来也是非常方便的，在这里说一下的目的是，由于前一阵子公司使用的body parse用起来难用的不要不要的。所以在这里推荐一下吧。 \r\n\r\n下面的内容基本就是readme的翻译，没兴趣的可以直接不看。\r\n\r\n

1.简介

\r\nkoa-body支持multipart, urlencoded 和 json 请求体，提供跟express的multer一样的功能。他是对co-body和formidable的封装。 \r\n\r\n

2.使用方法

\r\nkoa-body可以向multer一样使用，非常简单，因为你可以从ctx.request.body 或者 ctx.req.body 中获得fields和files\r\n\r\n```js\r\nvar app = require('koa')(),\r\n koaBody = require('koa-body');\r\n\r\napp.use(koaBody({formidable:{uploadDir: __dirname}}));\r\napp.use(function *(next) {\r\n if (this.request.method == 'POST') {\r\n console.log(this.request.body);\r\n // => POST body\r\n this.body = JSON.stringify(this.request.body);\r\n }\r\n yield next;\r\n});\r\napp.listen(3131)\r\n```\r\n\r\nkoa-body还可以跟koa-router一起使用\r\n\r\n```js\r\nvar app = require('koa')(),\r\n router = require('koa-router')(),\r\n koaBody = require('koa-body')();\r\n\r\nrouter.post('/users', koaBody,\r\n function *(next) {\r\n console.log(this.request.body);\r\n // => POST body\r\n this.body = JSON.stringify(this.request.body);\r\n }\r\n);\r\n\r\napp.use(router.routes());\r\n```\r\n\r\n

3.参数

\r\n* patchNode bool 把request的body给node的ctx.req，默认为false。\r\n* patchKoa bool 把request的body给koa的ctx.req，默认为false。\r\n* jsonLimit String|Integer json body的最大byte数，默认为1mb\r\n* formLimit String|Integer form body的最大byte数，默认为56kb\r\n* textLimit String|Integer text body的最大byte数，默认为56kb\r\n* encoding String 设置field的编码，默认为utf-8\r\n* multipart Boolean 是否解析multipart body，默认为false\r\n* formidable Object 床底给formidable的设置项\r\n* strict bool 如果激活，koa-body不会解析GET,HEAD,DELETE请求，默认为true","title","半小时掌握koa（koa源码分析）更新啦~更新啦","last_reply_at","2017-03-28 01:34:57.068","good","top",14,"visit_count",11852,"2016-05-09 11:39:01.935","author",{"_13":55,"_22":56},"Acceptedlc","https://avatars3.githubusercontent.com/u/8042759?v=4"]