2016-05-10

阅读

ES7 Decorator 装饰者模式

【译】V8 团队眼中的 ES6、ES7及未来

聚沙

co koa

从 Generator 开始

生成器是迭代器。所有的生成器都有内建 .next()[Symbol.iterator]() 方法的实现。

要实现一个 range 函数,达到如下效果

1
2
3
4
5
6
7
// 依次打印出:
// 这里是 #0 楼
// 这里是 #1 楼
// 这里是 #2 楼
for (var value of range(0, 3)) {
  console.log(`这里是 #${value} 楼`);
}

使用 generator

1
2
3
4
function* range(start, stop) {
  for (var i = start; i < stop; i++)
    yield i;
}

普通 yield 表达式只生成一个值,而 yield* 表达式可以通过迭代器进行迭代生成所有的值。

假设我们写一个简单的生成器函数联结两个可迭代对象:

1
2
3
4
5
6
7
8
function* concat(iter1, iter2) {
  for (var value of iter1) {
    yield value;
  }
  for (var value of iter2) {
    yield value;
  }
}

es6 支持这样的简写方式:

1
2
3
4
function* concat(iter1, iter2) {
  yield* iter1;
  yield* iter2;
}

再看一个具体的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function* foo() {
  yield 'a';
  yield 'b';
}

function* bar() {
  yield 'x';
  foo();
  yield 'y';
}

for (let v of bar()){
  console.log(v);
}

上面代码中,foo和bar都是Generator函数,在bar里面调用foo,是不会有效果的。

这个就需要用到yield*语句,用来在一个Generator函数里面执行另一个Generator函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function* bar() {
  yield 'x';
  yield* foo();
  yield 'y';
}

// 等同于
function* bar() {
  yield 'x';
  yield 'a';
  yield 'b';
  yield 'y';
}

// 等同于
function* bar() {
  yield 'x';
  for (let v of foo()) {
    yield v;
  }
  yield 'y';
}

for (let v of bar()){
  console.log(v);
}
// "x"
// "a"
// "b"
// "y"

生成器的 .next() 方法接受一个可选参数,参数稍后会作为 yield 表达式的返回值出现在生成器中

1
2
3
4
5
6
7
8
9
10
11
12
13
function* f() {
  for (let i = 0; true; i++) {
    let reset = yield i;
    console.log(reset);
    if (reset) i = -1;
  }
}

var g = f();

g.next() // { value: 0, done: false }
g.next() // { value: 1, done: false }
g.next(true) // { value: 0, done: false }

https://blog.leancloud.cn/3910/

gulp-connect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gulp.task('connect', function() {
  connect.server({
    root: 'app',
    port: 9999,
    livereload: true
  });
});

gulp.task('html', function () {
  gulp.src('./app/*.html')
    .pipe(connect.reload());
});

gulp.task('watch', function () {
  gulp.watch(['./app/*.html'], ['html']);
});

gulp.task('default', ['connect', 'watch']);

MORE

Comments