ES6基础知识（Generator 函数应用）

1.Ajax 是典型的异步操作，通过 Generator 函数部署 Ajax 操作，可以用同步的方式表达

function* main() {

  var result = yield request("http://some.url");

  var resp = JSON.parse(result);

    console.log(resp.value);

}

function request(url) {

  makeAjaxCall(url, function(response){

    it.next(response);

  });

}

var it = main();

it.next();

上面代码的main函数，就是通过 Ajax 操作获取数据。可以看到，除了多了一个yield，它几乎与同步操作的写法完全一样。注意，makeAjaxCall函数中的next方法，必须加上response参数，因为yield表达式，本身是没有值的，总是等于undefined。

2.Generator 函数的一个重要实际意义就是用来处理异步操作，改写回调函数

function* loadUI() {

  showLoadingScreen();

  yield loadUIDataAsynchronously();

  hideLoadingScreen();

}

var loader = loadUI();

// 加载UI

loader.next()

// 卸载UI

loader.next()

上面代码中，第一次调用loadUI函数时，该函数不会执行，仅返回一个遍历器。下一次对该遍历器调用next方法，则会显示Loading界面（showLoadingScreen），并且异步加载数据（loadUIDataAsynchronously）。等到数据加载完成，再一次使用next方法，则会隐藏Loading界面。可以看到，这种写法的好处是所有Loading界面的逻辑，都被封装在一个函数，按部就班非常清晰。

3.利用 Generator 函数，可以在任意对象上部署 Iterator 接口

function* iterEntries(obj) {

  let keys = Object.keys(obj);

  for (let i=0; i < keys.length; i++) {

    let key = keys[i];

    yield [key, obj[key]];

  }

}

let myObj = { foo: 3, bar: 7 };

for (let [key, value] of iterEntries(myObj)) {

  console.log(key, value);

}

// foo 3

// bar 7

巴特西

ES6基础知识（Generator 函数应用）

最新文章

热门文章