干货内容：

http://www.w3ctech.com/topic/916

http://dongfei.baijia.baidu.com/article/52449

http://www.w3ctech.com/topic/922

---

上周，月影童鞋一不小心引发了一场红绿灯大战，前端大神们纷纷上阵……

这是一个关于萌萌哒红绿灯的故事，也是一个关于前端、异步和Promise的代码秀——

计算机之子的简单版本：

function turn(color){
    traffic.className = color;
}

function wait(d){
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,d);
    })
}

void function(){
    Promise.resolve()
    .then(turn.bind(null,'green'))
    .then(wait.bind(null,5000))
    .then(turn.bind(null,'yellow'))
    .then(wait.bind(null,2000))
    .then(turn.bind(null,'red'))
    .then(wait.bind(null,5000))
    .then(arguments.callee)
}();

月影童鞋的任务模式

var Task = {
  define: function(func){
    return function(){
      var self = this;
      var args = [].slice.call(arguments);

      var _next = this._next || new Promise(function(resolve, reject){
        resolve();
      });

      this._next = _next.then(function(){
        return new Promise(function(resolve, reject){
          func.apply(self, args.concat(resolve, reject));
        });    
      });
      return this;
    }
  }
};

var trafficTask = {
  turn: Task.define(function(color, $resolve){
    traffic.className = color;
    $resolve();
  }),
  wait: Task.define(function(time, $resolve){
    setTimeout($resolve, time);
  }),
  do: Task.define(function(func, $resolve){
      func();
    $resolve();
  })
}

//执行！
void function repeat() {
  trafficTask
    .turn('green')
    .wait(5000)
    .turn('yellow')
    .wait(2000)
    .turn('red')
    .wait(5000)
    .do(repeat);
}();

爱民老师有话说：

我们所有的例子，从@十年踪迹 的第一个例子开始，都定义错了问题。大家不约而同地把问题想像成了：

先画一个红灯

再等5000ms

再画一个黄灯…

循环到第一步

有一部分人将这个问题理解成另一种行为模式：

画一个红灯，等5000ms；然后

画一个黄灯，等…；然后

…

function turn(color) {
  traffic.className = color;
  return new Promise(function(resolve) {
    setTimeout(function() { resolve(this.next) }.bind(this), this.wait)
  }.bind(this))
}

turn.and = turn.bind; // 仅为了可读性
void function (){
  Promise.resolve('green')
    .then(turn.and({wait: 5000, next: 'yellow'}))
    .then(turn.and({wait: 2000, next: 'red'}))
    .then(turn.and({wait: 5000}))
    .then(arguments.callee)
}();

前端真好（xian），小问题引发大讨论，所有童鞋都能有所收获~

说到底，我们出来工（写）作（码）不是为了谋生，我们是有情怀的一群孩纸

理想——

现实——

但是生活（旅行）和工作其实可以两不误，有一群人，是喜欢户外的前端程序员，你也可以加入他们哦，关注微信号：aBiker 骑行圈

理想和现实都要兼顾，月影还是喜欢《三体》里的这句话——

还是一句话，我们的征途是星辰大海，也许前端未来要担负起和外星人沟通的职责

沟通是前端一项很重要的技能，不仅仅可以改变世界，还可以找到好工作。现在很多公司抢程序员还是很（没）给（节）力（操）的。

高三妹纸食物派诗人——

程序界大牛人唐凤妹纸Perl派诗人——

#!/usr/local/bin/perl
# The Sieve of Eratosthenes - 埃拉托斯芬筛法
use Lingua::Sinica::PerlYuYan;

用筹兮用严 井涸兮无碍。
印曰最高矣 又道数然哉。
截起吾纯风 赋小入大合。
习予吾阵地 并二至纯风。
当起段赋取 加阵地合始。
阵地赋筛始 系系此杂段。
终阵地兮印 正道次标哉。
输空接段点 列终注泰来。

看看人家的才华，真是羡慕

想想以前自己那么自恋，常常觉得有优越感

真是好惭愧

A股的牛市真来了，而前端的大牛市早在2013年中就来了

股市有风险，投资需谨慎

但是前端真的很好

记忆回到 2009 年，如果你在文章里读到类似 “HTML5 将会在 2014 年定稿使用” 的预言，是否看起来那一天还很遥远？如果当时你这样想，你将要准备好迎接缓慢更新但是稳步向前的 ES6（现在被称为 ES2015，这个名称已经随处可见），也就是下一个版本的 JavaScript。准备与 ES6 – 啊不对，ES2015 – 接轨吧，毫无疑问，这是接下来在 JavaScript 领域中最重要的事情。ES6 classes、真正的隐私、更好的函数和参数、可引入(import)的模块以及许多其它特性，一定会彻底改变游戏规则。那些能力十足并且十分高产的新语法无疑将会彻底从 JS 社区中孕育出来。

在这个上天赋予前端工程师的年代，想不出什么理由我们不努力

努力吧，骚年~~