JS 异步编程之四:理解异步函数(AsyncFunction)

作者:nunumick 发布时间:10 Sep 2017 分类: front-end

有了前序内容的了解,再来看 async 函数和 await 关键字,会更容易理解他们的本质。

官方 demo 代码:

/**
 * case from mdn
 */

function resolveAfter2Seconds(x) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  const x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

f1();

新的武器

使用 async & await 处理之前的代码,替换 generator 和 yield,async 函数等价于自带 co 执行器的 generator 函数。

(Read more ...)

标签: javascript , es2017 , async , await
<<< EOF

JS 异步编程之三:理解 Co.js

作者:nunumick 发布时间:05 Aug 2017 分类: front-end

Co.js 是 TJ 大神基于 Generator 特性写的 js 库,可以用同步的方式编写和执行异步函数,核心代码只有几十行。

其本质上就是一个迭代器的执行函数,来看下面个人仿制的简写代码,理解精髓即可:

// 定义一个生成器,包含我们要用到的异步函数
const gen = function* () {
  let a = yield new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(10);
    }, 1000);
  });

  let b = yield new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(20);
    }, 2000);
  });

  let c = yield new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(15);
    }, 1000);
  });

  let d = yield 5;

  let e = a + b + c + d;

  console.log(e);

  return e;
};

//编写一个递归执行的通用迭代器执行函数
//第一个入参为要执行的生成器,第二入参为 next 赋值
const iter = function (gen, value) {
  let item = gen.next(value);
  let v = item.value;
  console.log(item);
  if (item.done) return Promise.resolve(v);

  //这一步很关键,如果是异步函数,则返回v.then
  if (v instanceof Promise) {
    return v.then((res) => {
      return iter(gen, res);
    });
  } else {
    console.log(v);
    return iter(gen, v);
  }
};

//co就是对执行器的再一次包装
const co = function (gen) {
  let g = gen();
  return iter(g);
};

//test
co(gen).then((res)=>{
  console.log(res);
})

用 co 重写代码

有了这个可重用的便捷的 co 执行器,我们可以用它来重写上一篇理解生成器(generator) 文中的样例代码,替换掉手动逐行执行的那部分。

(Read more ...)

标签: javascript , co
<<< EOF

JS 异步编程之二:理解生成器(Generator)

作者:nunumick 发布时间:25 Jul 2017 分类: front-end

上篇学习了迭代器的应用原理,我们知道可以用生成器(generator)来返回迭代方法,简化对象迭代器的实现。这篇我们学习生成器的相关知识点。

先来看下官方定义:

The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol. Generator is a subclass of the hidden Iterator class.

可知 Generator 对象是迭代器的子类,同样遵循迭代协议。其作用就是用于生成迭代方法。

虽然自定义迭代器是一个有用的工具,但由于需要显式地维护其内部状态,因此创建时要格外谨慎。生成器函数(Generator 函数)提供了一个强大的替代选择:它允许你定义一个非连续执行的函数作为迭代算法。生成器函数使用 function* 语法编写。

//生成器函数内部每个yield语句定义了生成器暂停执行并返回值给调用者的一个点。
//当生成器恢复执行时,它会从暂停处继续,保持其内部状态不变。
function* geA() {
  yield "a1";
  yield "a2";
  yield "a3";
  yield "a4";
}

//显式调用geA()返回的迭代器对象
//自动反复调用其.next()方法,直到迭代器耗尽(即.next().done为true)
for (let item of geA()) {
  console.log(item);
}

/**
* output:
a1
a2
a3
a4
*/

异步编程

JS 的异步函数并不会阻塞代码执行顺序,想要通过按照异步函数编写的顺序来实现同步的执行结果并不容易。

(Read more ...)

标签: javascript , ecma , es6 , generator
<<< EOF

JS 异步编程之一:理解迭代器(Iterator)

作者:nunumick 发布时间:18 Jul 2017 分类: front-end

ES2017(ES8)发布了 async functions 和 await 关键字等特性,极大提升了编写异步程序的便利性和代码简洁度,应该说 async & await 是一种新的语法糖,为了说明这一点,我们可以将时间回调到 ES2015(ES6)的特性发布,逐一理解 iteratorgenerator 以及 TJ 大神写的中间产物 co库 的应用原理,进而了解 async functions 的本质。

可迭代对象

ES6 中引入了迭代器和可迭代对象(iterable)的概念,并且提供了对可迭代对象的相关支持,如 for…of 循环,本质上一个可迭代对象就是内置了迭代器方法的对象,因此可以说任何对象都能够被迭代,不仅仅是数组。

//创建一个名为arr的数组,并给它添加一个额外属性name。
const arr = [1, 2, 3, 4, 5];
arr.name = "test arr";

//使用传统的for循环遍历数组,通过索引访问并打印数组元素。
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

//使用for...of循环遍历数组。for...of适用于可迭代对象,自动调用其内置迭代器来获取每个元素。
for (let item of arr) {
  console.log(item);
}

//@@iterator
//数组都有内置迭代器方法,该方法由Symbol.iterator属性提供,返回一个迭代器对象。
console.log(arr[Symbol.iterator]);

//显式调用数组的Symbol.iterator方法并立即使用返回的迭代器对象进行遍历。
//这与直接使用for...of循环效果相同。
for (let item of arr[Symbol.iterator]()) {
  console.log(item);
}

迭代协议

迭代器是遵循了迭代协议的对象,协议规定迭代器必须实现 next() 接口,它应该返回当前元素并将迭代器指向下一个元素,返回的对象格式为 {value:元素值, done:是否遍历结束},其中,done 是一个布尔值。done 属性为 true 的时候,我们默认不会去读取 value, 所以最后返回的经常是 {value: undifined, done: true}

我们可以利用迭代协议规则,手动执行迭代,或者重写对象的迭代逻辑。

(Read more ...)

标签: javascript , ecma , es6 , iterator
<<< EOF

前端系统初始化-我的常用工具

作者:nunumick 发布时间:23 Jan 2015 分类: developer

每次换电脑总是要走一遍繁琐的软件安装和开发环境初始化流程,在mac上安装软件、命令行工具时不时会碰到问题,在又一次经历了这个过程之后,我决定把常用软件及开发环境记录下来,以绝后患。

brew

mac 上强力资源管理工具,用的是HomeBrew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

nodejs

无需多说,官网下载安装:nodejs.org

接着可以装一些 node 常用工具

java-jdk

无需多说,官网下载安装:jdk download

git

安装git

brew install git

常规配置

git config --global alias.st 'status'
git config --global alias.ci 'commit'
git config --global alias.br 'branch'
git config --global alias.co 'checkout'
git config --global alias.lg 'log'
git config --global user.name 'name'
git config --global user.email 'email'

ssh配置

从个人仓库同步 .ssh 到本机相同目录下即可

svn

brew install --universal --java subversion

zsh

比较好用的shell,可以简化不少操作,自动补全,颜色高亮,还能识别git仓库

(Read more ...)

标签: jekyll , vim , git , zsh
<<< EOF