半小时掌握koa

作者: AcceptedLc | 来源:发表于2016-07-17 09:29 被阅读1731次

    半小时掌握koa

    <h3 id="koa分析与实现">koa分析与实现</h3>

    <h4 id="example">1.从一个例子开始</h4>

    'use strict';
    
    let Application = require('koa');
    
    let app = new Application();
    
    app.use(function*(next) {
      console.log('东方红');
      yield next;
      console.log('太阳升');
      console.log();
    });
    
    app.use(function*(next) {
      console.log('-1979年,');
      yield next;
      console.log('-那是一个春天');
    });
    
    app.use(function*() {
      let message = '--我爱北京,天安门';
      console.log(message);
      this.body = 'hello world';
    });
    
    const PORT = 8888;
    app.listen(PORT);
    
    console.log('start at ' + PORT);
    
    

    上面代码,先后添加了3个middleware。请求的结果如下:
    <pre>
    东方红
    -1979年,
    --我爱北京,天安门
    -那是一个春天
    太阳升
    </pre>

    <h4 id="abstract">2.koa之流程</h4>

    GitHubGitHub
    • 每一个请求到达服务器后,初始化请求上下文对象
    • 将上下文对象按照顺序,在每个中间件中运行一遍
      • 执行中间件1,next前的逻辑
      • next
        • 执行中间件2的逻辑
      • 执行中间件1,next后的逻辑
    • 将body返回给客户端

    上面的过程就是创建http服务器的时候,callback参数应该做的事情。

    <h4 id="appObjectAnalyse">3.app对象分析</h4>

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

    <h4 id="callback">4.callback实现</h4>

    先从callback下手。因为,解决了这个函数,其他函数的实现就是轻松加愉快。
    不过,开始我们就会发现一个问题。回调函数是node底层调用的,我们没有办法把middleware参数传递进。
    这个时候,闭包玩的比较熟练的同学也许就会心中窃喜了。
    没错解决这个问题的常用手段就是使用高阶函数,利用js的闭包这一特性。

    function callback(middleware) {
        return function (req, res) {
        }
    }
    

    解决了上边的问题,我们顺着流程写就好了。

    首先构造上下文对象

    function callback(middleware) {
        return function (req, res) {
            let ctx = {
              req: req,
              res: res
            };
        }
    }
    

    之后需要做的事情就是,顺序调用每一个middleware。但是我们手中有的数据结构只是一个generator function array,显然完成不了任务。因此,考虑将它map一下,让它变成一个类似function链表一样的东西。

    代码如下:

    let next = function*(){};
    
    var i = middleware.length;
    while (i--) {
        next = middleware[i].call(ctx, next);
    }
    

    ps: 这里有一点不知道大家发现了没有!!在每一个请求到来的时候,都需要进行一次这种map。也就是说,挂载的中间件越多,性能就会越差。我觉得这也是,koa1在性能上比express差的一个原因吧。 性能测试

    接着,调用一下链表头的function,就可以实现middleware的调用。

    function callback(middleware) {
      return function (req, res) {
        let ctx = {
          req: req,
          res: res
        };
        co(function *() {
          let next = function*(){};
    
          var i = middleware.length;
          while (i--) {
            next = middleware[i].call(ctx, next);
          }
          return yield next;
        })
      }
    }
    

    最后,就是将上下文的body返回给前端。

    function callback(middleware) {
      return function (req, res) {
        let ctx = {
          req: req,
          res: res
        };
        co(function *() {
          let next = function*(){};
    
          var i = middleware.length;
          while (i--) {
            next = middleware[i].call(ctx, next);
          }
          return yield next;
        }).then(() => response.call(ctx))
          .catch(e => console.log(e.stack));
      }
    }
    

    以上就是整个callback的代码,不过错误处理比较粗糙。大家可以自己完善一下-

    <h4 id="otherFn">5.其他function</h4>

    其他function就比较简单了。分别写在下面

    app.listen = function () {
      var server = http.createServer(callback(this.middleware));
      return server.listen.apply(server, arguments);
    };
    
    app.use = function (fn) {
      this.middleware.push(fn);
    };
    
    function response() {
      this.res.writeHead(200, {
        'Content-Type': 'text/plain'
      });
      this.res.end(this.body);
    }
    

    最后整个myKoa的代码

    'use strict';
    
    let co = require('co');
    let http = require('http');
    
    function Application() {
      this.middleware = [];
    }
    
    var app = Application.prototype;
    
    
    app.listen = function () {
      var server = http.createServer(callback(this.middleware));
      return server.listen.apply(server, arguments);
    };
    
    app.use = function (fn) {
      this.middleware.push(fn);
    };
    
    
    function callback(middleware) {
      return function (req, res) {
        let ctx = {
          req: req,
          res: res
        };
        co(function *() {
          let next = function*(){};
    
          var i = middleware.length;
          while (i--) {
            next = middleware[i].call(ctx, next);
          }
          return yield next;
        }).then(() => response.call(ctx))
          .catch(e => console.log(e.stack));
      }
    }
    
    //------private function
    function response() {
      this.res.writeHead(200, {
        'Content-Type': 'text/plain'
      });
      this.res.end(this.body);
    }
    
    module.exports = Application;
       
    

    <h3 id="koaCompoment">koa与他的小伙伴</h3>

    <h4 id="koa-router">koa-router</h4>

    <h5 id="router-memory">1.内存模型</h5>

    GitHubGitHub
    上图是一个简化的koa-router的内存快照。
    1个router最主要的属性就是stack,他是一个layer的数组。每当我们调用一次router.verb或者router.use就会有一个layer被创造出来,放到这个数组中。
    如上图所示,每个layer主要有4个属性。
    请大家,务必记住这个内存模型,后文的讨论都会围绕这张图进行。

    <h5 id="router-flow">2.请求处理流程</h5>

    在上一部分曾经说过,koa的每一个中间件都是一个generator function,koa-router也不能免俗。别看他代码比koa要多,但是他就是一个函数而已。
    接下来我们就看一下当请求到达服务器后这个函数都干了些什么。

    • 首先便利router的stack数组,通过每一个layer的正则版本的路径检查当前请求的path是否符合这则表达式。
    • 通过了第一步的检查的layer,进入了第二阶段的筛选。这个阶段的标准是layer的methods属性,methods为空数组或者methods数组中有当前请求的verb便通过筛选。
    • 通过筛选的layer会被放入一个叫做pathAndMethod的数组中
    • 我们下载可以看下下我们又有的数据结构-->一个fn*的二维数组。是否有种似曾相识的感觉囊。那么,下一步就是讲数组变成fn链表,然后调用一下开头的fn。

    以上就是koa-router的整个流程。

    <h5 id="router.verb">3.verb</h5>
    相信大家对于这个方法的用法应该很熟悉了吧,我就在这里不多说了。
    这里,我想强调的是。每次使用这个方法的时候就会增加一个layer。也就是说筛选合适的layer的操作消耗的时间就会变多。在设计跟优化程序的时候应该注意这个特征。
    另外,推荐一种性能更好的使用方法

    //method1
    router.get('/blabla',fn1,fn2,...)
    
    //method2
    router.use('/blabla',fn1)
    router.get('/blabla',fn2)
    

    method1和2可以实现相同的功能,但是method1只会创建一个layer,这个layer会有两个middleware。不难发现method1的效率会更高一些。
    好了verb就说到这了吧。

    <h5 id="router.use">3.use</h5>
    关于这个方法,我想说的是,use不但可以use一个自己写的中间件,而且还可以use一个router。这种方法可以让我们实现用文件夹定义url的效果,我个人觉得这是一种有没得方法。

    var forums = new Router();
    var posts = new Router();
    
    posts.get('/', function *(next) {...});
    posts.get('/:pid', function *(next) {...});
    forums.use('/forums/:fid/posts', posts.routes(), posts.allowedMethods());
    
    // responds to "/forums/123/posts" and "/forums/123/posts/123"
    app.use(forums.routes());
    
    

    我想,也许有人会好奇这个功能是怎么实现的吧,当时看到api文档的时候我也很好奇。下面我就来说一下吧。
    直接上源代码:

    middleware = middleware.filter(function (fn) {
        if (fn.router) {
          fn.router.stack.forEach(function (layer) {
            if (path) layer.setPrefix(path);
            if (router.opts.prefix) layer.setPrefix(router.opts.prefix);
            router.stack.push(layer);
          });
    
          if (router.params) {
            Object.keys(router.params).forEach(function (key) {
              fn.router.param(key, router.params[key]);
            });
          }
    
          return false;
        }
    
        return true;
      });
    
    

    从上面可以很轻易的看出,作者是先检测了一下这个fn,发现如果是router,那么读取这个router的所有layer,把每一个layer设置一下前缀,然后直接放到父router的stack中。机智吧-.

    <h5 id="router.param">3.param </h5>
    最后要说的是param这个方法。

    router
      .param('user', function *(id, next) {
        this.user = users[id];
        if (!this.user) return this.status = 404;
        yield next;
      })
      .get('/users/:user', function *(next) {
        this.body = this.user;
      })
      .get('/users/:user/friends', function *(next) {
        this.body = yield this.user.getFriends();
      })
      // /users/3 => {"id": 3, "name": "Alex"}
      // /users/3/friends => [{"id": 4, "name": "TJ"}]
    

    当时,看到这段代码的时候,确实激动了一把。如作者说的,这个功能可以很方便的实现auto-loading作者是validation。
    但是,但是,但是!!!!!!!同志们一定要注意,这里面有一个小小的坑。
    闲言碎语不要说,我们直接上代码

    var app = require('koa')();
    var router = require('koa-router')();
           
    router
      .get('/test/:id', function *() {
        console.log('get', this.test);
        this.body = 'hello world';
      })
      .use('/test/:id', function*(next) {
        console.log('use', this.test)
        yield next;
      })
      .param('id', function * (id, next) {
        this.test = this.test || 0;
        this.test = this.test + id;
        yield next;
      });
    
    app.use(router.routes())
      .use(router.allowedMethods());
    
    app.listen(8888);
    
    /**
    输出结果
    use 01
    get 011
    **/
    
    

    相信眼尖的通知们已经知道发生了什么!没错,param对应的fn执行了两遍,这是因为param会把中间件放到layer的middleware数组中。
    好了,虽然有点小小的瑕疵,但是,用的时候注意就好了。这个功能还是很好用的,吼吼吼。

    以上就是koa-router我想说的全部内容,至于怎么用的话,看一下api文档就好了,我只能说作者设计的很简洁,一切说明都是废话。

    希望我也能早日设计出这么有没得api。

    <h4 id="koa-body">koa-body</h4>

    这个组件使用起来也是非常方便的,在这里说一下的目的是,由于前一阵子公司使用的body parse用起来难用的不要不要的。所以在这里推荐一下吧。

    下面的内容基本就是readme的翻译,没兴趣的可以直接不看。

    <h5>1.简介</h5>
    koa-body支持multipart, urlencoded 和 json 请求体,提供跟express的multer一样的功能。他是对co-body和formidable的封装。

    <h5>2.使用方法</h5>
    koa-body可以向multer一样使用,非常简单,因为你可以从ctx.request.body 或者 ctx.req.body 中获得fields和files

    var app      = require('koa')(),
        koaBody   = require('koa-body');
    
    app.use(koaBody({formidable:{uploadDir: __dirname}}));
    app.use(function *(next) {
      if (this.request.method == 'POST') {
        console.log(this.request.body);
        // => POST body
        this.body = JSON.stringify(this.request.body);
      }
      yield next;
    });
    app.listen(3131)
    

    koa-body还可以跟koa-router一起使用

    var app     = require('koa')(),
        router  = require('koa-router')(),
        koaBody = require('koa-body')();
    
    router.post('/users', koaBody,
      function *(next) {
        console.log(this.request.body);
        // => POST body
        this.body = JSON.stringify(this.request.body);
      }
    );
    
    app.use(router.routes());
    

    <h5>3.参数</h5>

    • patchNode bool 把request的body给node的ctx.req,默认为false。
    • patchKoa bool 把request的body给koa的ctx.req,默认为false。
    • jsonLimit String|Integer json body的最大byte数,默认为1mb
    • formLimit String|Integer form body的最大byte数,默认为56kb
    • textLimit String|Integer text body的最大byte数,默认为56kb
    • encoding String 设置field的编码,默认为utf-8
    • multipart Boolean 是否解析multipart body,默认为false
    • formidable Object 床底给formidable的设置项
    • strict bool 如果激活,koa-body不会解析GET,HEAD,DELETE请求,默认为true

    相关文章

      网友评论

      • jinqiang:作者你就没运行过你的代码吗
      • jinqiang:/usr/local/bin/node /Users/jmyan/WebstormProjects/untitled/index.js
        /Users/jmyan/WebstormProjects/untitled/index.js:1
        (function (exports, require, module, __filename, __dirname) { var app = require('koa')(),
        ^

        TypeError: Class constructor Application cannot be invoked without 'new'
        at Object.<anonymous> (/Users/jmyan/WebstormProjects/untitled/index.js:1:91)
        at Module._compile (module.js:571:32)
        at Object.Module._extensions..js (module.js:580:10)
        at Module.load (module.js:488:32)
        at tryModuleLoad (module.js:447:12)
        at Function.Module._load (module.js:439:3)
        at Module.runMain (module.js:605:10)
        at run (bootstrap_node.js:423:7)
        at startup (bootstrap_node.js:147:9)
        at bootstrap_node.js:538:3

        Process finished with exit code 1
      • jinqiang:根本收不到请求 该死的
      • Z_mua:这真的是入门吗 为啥我看不懂 呜呜呜呜
        AcceptedLc: @妙脆角ordinary 我找个时间录个视频玩玩
      • J1aDong:我刚开始玩Koa,虽然目前看不大懂,但谢谢你的分享
        AcceptedLc: @J1aDong 加油,个人觉得koa做的还是很漂亮的

      本文标题:半小时掌握koa

      本文链接:https://www.haomeiwen.com/subject/ofgujttx.html