Live2D 看板娘

一 微信交互流程

二 牛逼闪闪的Promise

  promise的含义:

    promise是针对异步编程的一种解决方案(传统方案:回调函数、事件监听),promise比传统方案更合理更强大,因为传统方案在处理复杂业务的情况下,很容易出现callback hell(回调地狱),使得代码很难被理解和维护。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。

    使用Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。

  promise的三种状态:

    Pending --> 进行中

    Resolved --> 已完成,又称Fulfilled

    Rejected --> 已失败

    Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected

  promise基本使用:

    ES6规定,Promise对象是一个构造函数,用来生成Promise实例。

    下面代码创造了一个Promise实例:

var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

    上面,我们使用new关键字生成了一个Promise实例,其中resolve和reject为函数的两个参数,它们是两个函数,是由JavaScript引擎提供的,不用自己部署。

    resolve函数,将Promise对象的状态由「未完成(Pending)」变为「成功(Resolved)」,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。

    reject函数,将Promise对象的状态由「未完成(Pending)」变为「失败(Rejected)」,在异步操作失败时调用,并将异步操作报出错误,作为参数传递出去。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

    上面代码中,是Promise实例化后,用then方法分别指定了Resolved状态和Rejected状态的回调函数。then方法可以接受两个回调函数作为参数,第一个回调函数是Promise对象的状态为Resolved时调用,第二个回调函数是Promise对象的状态为Rejected时调用,其中第二个回调函数是可选的,非必填项。这两个函数都接受Promise对象传出的值作为参数。

    如果想要在一个方法中使用promise对象,我们在引入promise库(使用npm安装即可)后,可以这样写:

function funPromise(param){
    return new Promise(function (reslove, reject) {
        reslove();
        reject();
    });
};
funPromise(param).then(function success(){
    //...
},function fail(){
    //...
});

    Promise的使用,简而言之就是Promise对象的then方法,把流程中依次执行的异步操作(即回调函数)直接添加进then方法中就可以了。

  Promise A与A+的不同点:

    A+规范通过术语thenable来区分promise对象;

    A+定义onFufilled/onRegected必须是作为函数来调用,而且调用过程必须是异步的;

    A+严格定义了then方法链式调用时onFufilled/onRegected的调用顺序

  Promise库有哪些:

    bluebird

    Q

    then.js

    es6-promise

    ypromise

    async

    native-promise-only

    ...

三 Generator 生成器

  基本概念:

  Generator函数是ES6提供的一种异步编程解决方案。从语法上讲,可以把Generator函数理解称为一个状态机,封装了多个内部状态。执行Generator函数会返回一个遍历器对象,可以依次遍历Generator函数内部的每一个状态。Generator函数最大特点就是可以交出函数的执行权(即暂停执行)。

  在形式上,Generator函数是一个普通函数,不过它与普通函数相比,有以下两个特性:

    1 function关键字与函数名之间有一个星号;

    2函数体内部使用yield表达式,用来定义不同的内部状态。

  常见的函数不能暂停执行,而 Generator 函数可以,这就是这两者最大的区别。

  使用Generator函数参见以下代码:

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

  上面代码定义了一个 Generator 函数helloWorldGenerator,它内部有两个yield表达式(helloworld),即该函数有三个状态:hello,world 和 return 语句(结束执行)。

  然后,Generator 函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是,调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,必须调用遍历器对象的next方法,使得指针移向下一个状态。也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield表达式(或return语句)为止。换言之,Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行。

  yield表达式:

  由于 Generator 函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

  遍历器对象的next方法的运行逻辑如下。

    (1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。

    (2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。

    (3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。

    (4)如果该函数没有return语句,则返回的对象的value属性值为undefined

 四 Express中间件与Koa中间件

  express 中间件:参见文章http://blog.csdn.net/u011413061/article/details/50518069

  koa中间件:参见文章http://www.cnblogs.com/Leo_wl/p/4684633.html

原文地址:https://www.cnblogs.com/jiangtengteng/p/6930674.html