在说generator之前,大家可能心里都有一个problem~
为什么不用express4.x而用KOA吗?
额,您直接看结果吧~
所以,由于express本省建立在connect 插件上来的. 造成的结果是,connect拖慢了整体的步伐~ TJ大神也意识到了这个问题,在express4.x后,就直接将connect独立出来. KOA实际上,也是middleware的另外一种实现方式,只是他更快~
科普完毕~ 我们接着主题 how to use generator~
generator是KOA的基础,没有generator就没有KOA.

generator干嘛用的

一句话,我们可以把generator理解为可以暂停的函数. 这应该就是generator的所有内容. 我们先看一个demo吧

function* sayHello() {
    var first,second;
    yield first =  "jimmy";
    yield second =  "sam";
}
var say = sayHello();
say.next().value;
say.next();
say.next();

generatro的声明是使用*来进行的. 通过执行,返回一个generator对象,开始时,并未执行.通过调用next之后触发执行. 指定的返回值为yield后面的表达式.实际过程如图:

实际上,通过next返回的对象中,有两个属性-value,done,
next对象:

  • value: 即,指定yield后面的表达式的结果

  • done: Boolean, 用来表示该次连接是否结束.

function* sayHello() {
    var first,second;
    yield first =  "jimmy";
    yield second =  "sam";
}
var say = sayHello();
while(say.next().done){  //直接执行完毕即可
}
console.log('finish');

Communicate with generator

实际上,我们不光可以在外部调用next()来resume,generator的执行.而且还可以在外部传输参数,改变yield的返回值. 实际上,next()提供了我们这个权限.

function* sayHello() {
    var first,second;
    yield first =  "jimmy";
    yield second =  "sam";
    console.log(`first should be jimmy,but ${first}
second should be sam, but ${second}`);
}
var say = sayHello();
say.next().value;
say.next('sam');
say.next('jimmy');

通过next()传参,即可改变yield 表达式执行的结果.
另外提醒一下: next()调用只会执行yield后面的表达式,下一次调用时,才会执行完yield 所在行的表达式。
实际上,我们用一个公式表达.

next.done=yield+1

实际上如下图.

generator解决递归操作

所谓的递归操作(recursive), 实际上就是同一个函数,多次执行自身,并且将自身的结果引用.直到最后结束.
比如最经典的阶乘:

function fb(num) {
    if (num <= 1) {
        return 1;
    }
    return num * fb(--num)
}

但是这样写,复杂度太高了. 实际上,我们就可以理解为,递归就是过去前一个函数的结果而已.
而,yield 恰恰可以完美的完成这一点.

function *cal(num){
    var res = 1;
    for(var i =1;i<=num;i++){
        yield res = Mul(i,res);
    }
    console.log(res);
}
function Mul(num,res){
    res = res*num;
    return    res;
}
var fb = cal(3);
fb.next();
fb.next();
fb.next();
fb.next();

额,童鞋,先别急,如果你就单单就这么使用generator的话,那看起来真的很颓。这时候,我们只需要造一个轮子,使用一个函数来自动执行里面的结果. 为了说明这个demo,我们顺便再了解一个KOA提供的API-app.keys.

  • app.keys: 用来给Cookie进行签名密钥.实际上,他做的事就是防止cookie被篡改. 实际上,他就是利用Hmac或者对称加密(cipher/decipher), 加密cookie信息,然后通过返回对cookie做比较,就可以检验cookie是否被篡改了.
    通常,我们使用app.keys 自定义一个加密的数组keys( keys的长度,最好大于16,因为加密算法的最低是有要求的,否则他会先进行hash给你的key加密,然后在对原始数据加密 ).然后loop 加密.

//默认情况下,他的默认加密算法是
  // defaults
 // _hash: 'sha256',
 // _cipher: 'aes-256-cbc',
app.keys = ['koa you are beautiful','2333 kiss me baby'];
//我们也可以手动更改:
app.keys = new KeyGrip(['im a newer secret', 'i like turtle'], 'sha1');

使用怎样的算法,完全看自己的兴趣了. 不过推荐使用原始的,没必要给自己增加复杂度.
需要注意的是,我们设置app.keys是为了给cookie进行加密的.所以对于cookie使用加密,还有一点需要注意的.即,需要在cookie后面配置参数. sign:true

this.cookies.set('name', 'tobi', { signed: true });

实际上,keyGrip的思想就是多重加密,然后自动验重. 我们完全可以自己动手写一个. 这里,我们就通过试一试重现keyGrip的加密过程. 讲讲,generator到底是怎样解决递归的痛点.

const crypto = require('crypto');

//加密
function Sign(keys, data) {
    this._algor = 'sha256';
    this.keys = keys;
    data = new Buffer(data, 'utf8');
    var _this = this;
    //使用generator 解决递归的效果
    /**
     * @yield {string} 加密的内容
     * @key {array} 实际上就是加密的keys
     * @describe  实际上generator解决递归其实使用该
     * 函数就已经足够了.
     */
    function* run() {
        var digest = _this.crypto(data, keys[0]);
        for (var i = 1, len = keys.length; i < len; i++) {
            yield digest = _this.crypto(digest, keys[i]);

        }
    }
    console.log(this.exeGen(run).toString('hex'));
}
Sign.prototype.crypto = function(data, key) {
    return crypto.createHmac(this._algor, key)
        .update(data, 'binary')
        .digest();
}
/**
 * @param  {generator}
 * @return 最后一个执行结果
 * @author villainHR
 * @description 通过传入的generator函数,通过
 * 检测next().done来完成结束的检测.
 */
Sign.prototype.exeGen = function(gen) {
    var gen = gen(),
        val, res;
    while (true) {
        res = gen.next();
        if (res.done) {
            break;
        } else {
            val = res.value;
        }
    }
    return val;
}

var sign = new Sign([ 'sma','sam','jimmy'], 'get');

不过实际中,如果想要挑战自己的童鞋, 自身递归的写法完全没有问题,但是,复杂度你懂的~

generator异步执行

说道异步,我们想到的肯定是Promise. 因为new Promise() && .then()几乎就可以拯救世界了. 而且,promise还提供 promise.all 神器. 但实际上,我们还可以使用generator来做一个伪promise.

function *all(){
    var arr = Array.prototype.slice.call(arguments);
    var cb = arr.pop();
    yield arr.forEach((val)=>{val();});
    cb();
}
var num = 0;
var addNum = ()=>{num++;}
var callNum = ()=>{console.log(num);}
var gen = all(addNum,addNum,callNum);
gen.next();
gen.next();

使用gen.next();来手动启用异步执行的效果.最后将回调传输入,并输出即可.
但是,该情况还是没有解决我们的痛点.即,使用generator控制了异步之后,但是并不能写出优美的代码,像上文一样,我们需要手动调用gen.next();这样书写代码,可以说简直就是丑爆了~
TJ大神,自幼自练神功,随手写出一个co,巧妙的解决了这一个痛点.
实际上,co是一个很小的Module.他值提供了两个API:

  • co(fn*).then( val => ):使用promise.then来进行chain call.

const co = require('co');
co(function* () {
   return yield Promise.resolve(true);
}).then((val)=>{
    return val;
}).then((val)=>{
    return val;
});

实际上,co内部将yield自动执行,并且返回yield后面的结果. 如果你想调用多个异步函数的话,就可以使用yield + Array的形式. 并且,co本身就返回了一个Promise.resolve(true);状态.

const co = require('co');
var cbA = ()=>{console.log('A');}
var cbB = ()=>{console.log('B');}
var cbC = ()=>{console.log('C');}
co(function* () {
  var res = yield [
    cbA(),cbB(),cbC()
  ];
}).then(()=>{
    return Promise.reject('call reject')
})
.then(()=>{
},(val)=>{
    console.log(val);
});

另外一个API:

  • var fn = co.wrap(fn*):实际上,就是将generator转换为一个普通函数进行调用.我们始终要记住一点,co帮我们干的最多的事,就是内置自动执行了gen.next()方法. 并且return gen.next().value。

const co = require('co');
var cbA = ()=>{console.log('A');}
var cbB = ()=>{console.log('B');}
var cbC = ()=>{console.log('C');}
var comFn = co.wrap(function* () {
  var res = yield [
    cbA(),cbB(),cbC()
  ];
});

comFn.then(()=>{
    return Promise.reject('call reject')
})
.then(()=>{
},(val)=>{
    console.log(val);
});

经过测试,在MAC OX11上,创建一个co对象大概需要2.1ms的时间. 对性能的影响不算太大.但是,程序的可读性以及流畅性提升还是灰常大的.

说了这么多,目的就是给大家铺垫一下关于KOA的基本知识. 因为,KOA 的基本 写法和co类似. 都是建立在generator的基础上的.
说完了介绍,现在我们来正式看看KOA,他到底比以前的express4.x好在哪里.

初入KOA

在了解KOA之前,请,先下好KOA. 直接npm吧.我就不解释了.
看官方提供的helloword的demo:

const koa = require('koa');
const app = koa();

app.use(function *(next){
    this.body = 'hello word~';
    yield next;
});
app.listen(3000);

这应该是一个比较简单的demo。 但还没有体现出KOA的精华所在.KOA's key is 原本耦合但不得不分开写的程序,可以写在一起, 可读性和可调试性都不是同日而语的.
做一下解释吧,KOA其实就相当于一个捕获和冒泡的过程. 通过yield将一个函数分成两部分, 前面一块叫做upstream,后面一块叫做downstream. 当使用中间件执行时, 首先是upstream_A->upstream_B->upstream_C->...->upstream_N
然后返回: upstream_N->downstream_N->...->downstream_C->downstream_B->downstream_A. 差不多就是这样一个趋势. 我们来看一个demo吧:

const koa = require('koa');
const app = koa();

app.use(function *(next){
    //upstream_A
    console.log('upstream_A');
    var time = new Date;
    yield next;
    //downstream_A
    console.log(`downstream_A time is ${new Date - time}ms`);
})
app.use(function *(next){
    //upstream_B
    console.log('upstream_B');
    var time = new Date;
    yield next;
    //downstream_B
    console.log(`downstream_B time is ${new Date - time}ms`);
})
app.use(function *(next){
    //upstream_C
    console.log('upstream_C');
    var time = new Date;
    yield next;
    //downstream_C
    console.log(`downstream_C time is ${new Date - time}ms`);
})
app.use(function *(){
  this.body = 'Hello World';
});

app.listen(3000);
//最后的输出结果应该为:
upstream_A
upstream_B
upstream_C
downstream_C time is 6ms
downstream_B time is 7ms
downstream_A time is 8ms

根据结果,可以看出upstream和downstream的执行顺序.看一个总结图吧

如何自己动手写一个中间件

我们大致了解了app.use之后,完全可以自己动手写一个中间件. 中间件其实就是一个generator函数.

const koa = require('koa');
const app = koa();
const logger = function *(next){
    var time = new Date;
    yield next;
    this.allTime = time - new Date + 'ms';
}
app.use(logger);
app.use(function *(){
    this.body = "ok~";
})
app.listen(3000);
//或者直接导出一个模块

exports.logger = function *(next){
    var time = new Date;
    yield next;
    this.allTime = time - new Date + 'ms';
}

而且,如果你觉得你的middleware太大,想要拆分成不同的middleware,这时候,就可以使用call(this,next).

function *Cal1(next){
    console.log(1);
    yield next;
}
function *Cal2(next){
    console.log(2);
    yield next;
}
function *Cal3(next){
    console.log(3);
    yield next;
}
function *CalAll(next){
     yield Cal1.call(this,Cal2.call(this,Cal3.call(this,next)));
}

这差不多就是KOA的精髓所在. KOA 通过next的方式,将一些本来需要拆分但功能一直的代码块,可以连接在一起. 有兴趣的同学,可以参考koa官网.

转载请注明作者和原文链接:https://segmentfault.com/a/1190000004969890

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的文章

本作品 保留所有权利 。未获得许可人许可前,不允许他人复制、发行、展览和表演作品。不允许他人基于该作品创作演绎作品 。

n͛i͛g͛h͛t͛i͛r͛e͛ · 2016年04月20日

然而,Koa 已经废弃掉基于 Generator 的中间件机制了……

回复

jimmy_thr 作者 · 2016年04月21日

亲,请仔细看文档. async/await 的版本是v2. 如果你想使用v2的话,那只能说你很牛逼了.

回复

n͛i͛g͛h͛t͛i͛r͛e͛ · 2016年04月21日

亲,我们 v2 都用了很久啦,你查查我在本站的博客都可以看到为 v2 编写中间件的教程。事实上,Koa v2 早就稳定版了,一直没有正式定版号的原因是在等待 node.js 对 async 的原生支持。但如果你不介意使用 Babel 之类的预编译器的话,v2 早就可以用啦。

回复

jimmy_thr 作者 · 2016年04月22日

大神, 只能说, 使用async/aswait还是怎样, 我肯定都是支持的. 但是,如果node.js还没有对async的支持的话, 这样匆忙使用v2, 造成的问题是不是牺牲了性能呢?

回复

n͛i͛g͛h͛t͛i͛r͛e͛ · 2016年04月23日

你觉得像 Babel 或是 TypeScript 让你在 node.js 下写 async/await 又是怎么办到的呢?无非就是把语法转换成对应的 promise/generator 而已。非要说转换之后的代码比起原生支持有性能差距,那也没错。能差多少呢?当初 Koa v1 出世的时候大家也都是这么评价 generator 的,so?

做 web 应用绝大多数的性能瓶颈都出在 I/O 上,从 generator 到 async/await 充其量就是写法上的转变,对应到异步中间件函数执行过程或方式的转变,就我们所用的绝大多数中间件而言,函数调用的性能就算有差,能差多少?别忘了,node.js 是天然异步的,函数的调用是不会阻塞请求/响应的(除非你用高耗时同步函数),如果函数调用方式带来的性能差异大到无法接受的地步,那大家都返回去用回调好了,你说呢?

好了,我姑且说之,你姑且听之。要写哪种都随你,反正你只要继续用 Koa,迟早你还是得换写法(而且不会太久啦),generator 也没什么不对的,先练熟也不错。

回复

junlu · 2016年06月22日

赞一下作者用心,文章写得通俗易懂。 冒昧的问一下 async/await 和 * yield 是不是只是语法上的升级,内部原理有什么变动吗?

回复

载入中...
jimmy_thr jimmy_thr

4.7k 声望

发布于专栏

前端的bigboom

个人博客: https://www.villainhr.com IVWEB 公众群:471082939

190 人关注