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