例子： （本文所探讨内容皆使用该例子）

场景：编写一个文章详情页。 该页面需要从服务器加载文章内容和评论，然后显示在页面上。

一 time decoupling

1. callback hell

加载文章内容的回调函数中加载评论。

// 获取文章信息
function getPost(i, callback) {setTimeout(()=> callback({ id: i, title: 'Love them tasks' }), 500)return { id: i, title: 'Love them tasks' };
}
// 获取对应评论列表
function getComments(post) {setTimeout((post.id)=> callback(["This book should be illegal","Monads are like space burritos"]), 500)});return ["This book should be illegal","Monads are like space burritos"];
}var makeComments = _.reduce(function(acc, c){ return acc+"<li>"+c+"</li>" }, "");var render = _.curry(function(p, cs) { return "<div>"+p.title+"</div>"+makeComments(cs); });// 调用
const post = getPost(i, getComments);
render(post, 'how can i get the returned value of getComments?');
// 所以必须使用基于事件监听的方式,就像
this.trigger(comment: ["This book should be illegal","Monads are like space burritos"]);
// 也就是说返回值为undefined

上面这种方法返回值为undefined，实际上我们目前打单和短信中存在大量这样的代码。   这样存在以下几个问题

①不利于测试

如果说函数没有返回值，那么他到底执行了没有呢？

没有返回值的函数，怎么去判断他运行了没有呢？  判断会变得非常别扭： 比如我写了一个函数叫

setStyle(selector, key, value) {

$(selector).css(key, value);

}

就是给dom设置样式。并且没有返回值，那么就必须要检测dom节点的style 是否符合预期，这种测试是别扭的。 现在我们来改写一个：

setStyle(selector, key, value) {

$(selector).css(key, value);

return value;

}

这样就可以容易测试了。

② 不能够组合

如果对linux熟悉的话，应该知道pipe。 代码组合就类似于此，将你的task 分成若干task执行，每一个task有明确的返回值，这样才能保证task sequence 按照预期执行

上面的例子可以这么写

 Task.of(render).ap(getPost(2)).ap(getComments(2));  

不理解没有关系后边会详细介绍

2. normal promise || generator(es6)

上面的callback 如果在嵌套层数更多的时候，将会更加糟糕。下面介绍一个promise写法。 promise 写法看起来是可以在返回值没有的时候就去操作他了。

上面的代码promise重写:

// 获取文章信息
function getPost(i) {return new Promise(function (resolve, reject) {setTimeout(function () {resolve({ id: i, title: 'Love them tasks' });}, 500);});
}
// 获取对应评论列表
function getComments(post) {return new Promise(function (resolve, reject) {setTimeout(function () {resolve(["This book should be illegal","Monads are like space burritos"]);}, 500);});
}var makeComments = _.reduce(function(acc, c){ return acc+"<li>"+c+"</li>" }, "");var render = _.curry(function(p, cs) { return "<div>"+p.title+"</div>"+makeComments(cs); });// 调用
const post = getPost(i).then((post)=>{render(post);getComments(post).then((comment)=>{render(comment);});
})
// PS: 如果只关注后边的返回值的话就更简单了
var comments = R.pipeP(getPost, getComments)(i);
// pipeP 是管道工具方法，该方法作用是参数从左到右依次执行, 上一个函数返回值是下一个函数的参数

目前npm 很多第三方都没有普及promise，所以使用难免会有问题。这里推荐一个库promisify

promisify 就是把带有 callback 函数，变成重新用 promise 来实现的一种技术方案，它能一劳永逸的解决

看起来清爽多了

3.OUCH

这才是我要讲的重点

代码：

// 获取文章信息
function getPost(i) {return new Task(function (rej, res) {setTimeout(function () { res({ id: i, title: 'Love them futures' }); }, 300);});
}
// 获取评论
function getComments(i) {return new Task(function (rej, res) {setTimeout(function () {res(["This book should be illegal", "Monads are like space burritos"]);}, 300);});
}var makeComments = _.reduce(function(acc, c){ return acc+"<li>"+c+"</li>" }, "");var render = _.curry(function(p, cs) { return "<div>"+p.title+"</div>"+makeComments(cs); });
// 调用var renderedPage = Task.of(render).ap(getPost(2)).ap(getComments(2));
// ap是函数式编程的一个概念，简单的说就是能够把一个 functor 的函数值应用到另一个 functor 的值上
// Task是函数式编程中的容器概念的实现  我使用的实现库是task.io

附：单元测试

renderedPage.fork(console.log, function (html) {assert.equal("<div>Love them tasks</div><li>This book should be illegal</li><li>Monads are like space burritos</li>", html);done();
});
// 你当然可以针对数据写测试

二 exception handling

之前写了一篇文章关于如何优雅的书写代码中提到纯函数，

参见：http://my.oschina.net/wanjubang/blog/675953

http://my.oschina.net/wanjubang/blog/703907

1.impure handling

之前我写的一个文章介绍了错误上传，参见：http://my.oschina.net/wanjubang/blog/701843#OSC_h2_1

为了简单起见，写的就是不纯的错误处理。那么有什么关系呢？

① 函数报错会影响后面依赖的函数执行。

②  函数不够纯粹的话，就无法把程序的不确定性掌控在一个范围。 其结果就是你写的程序到处都可能出错，而你不知情。 就像：

靠巧合编程

2.pure handling

针对上面提到的两点。 这里设计一个容器。任何数据都放到容器中，任何数据的操作都是对容器的操作。对monad熟悉的话，可能对这个概念不陌生，那么现在就来将这个思想应用在我们的代码上。

如果对monad不熟悉的，可以看下这个科普文章：http://www.ruanyifeng.com/blog/2015/07/monad.html

上面的例子中我们将函数用Task封装。然后给Task添加了ap方法 和 of 方法。 这样我们就可以把任意一个函数应用在另一个函数上。

举一个简单的例子： 我要实现一个方法，这个方法的功能是将两个数相加，并将相加的结果返回。

var add = R.curry((x, y)=> x + y);

var maybeAdd = function(x, y) {
  return Maybe.of(add).ap(Maybe.of(x)).ap(Maybe.of(y));
};

这里maybe就是一个容器，从名字可以看出不确定性。 也就是说这个方法可能返回一个正确的数字Maybe(3)或者返回一个Maybe(null).

有了往容器存值的方法，当然也要有一个统一操作容器数据的方法，这个方法不会因容器里数据类型不同而不同。

Maybe 完整定义如下：

/ Maybe
Maybe = function(x) {this.__value = x;
};Maybe.of = function(x) {return new Maybe(x);
};Maybe.prototype.isNothing = function(f) {return (this.__value === null || this.__value === undefined);
};Maybe.prototype.map = function(f) {return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value));
};Maybe.prototype.chain = function(f) {return this.map(f).join();
};Maybe.prototype.ap = function(other) {return this.isNothing() ? Maybe.of(null) : other.map(this.__value);
};Maybe.prototype.join = function() {return this.isNothing() ? Maybe.of(null) : this.__value;
}Maybe.prototype.inspect = function() {return 'Maybe('+inspect(this.__value)+')';
}

maybeAdd(1)(2)  // maybe(3)

maybeAdd(3,5) // maybe(8)

maybeAdd(3,null) // maybe(null)

并不会影响后面程序运行，直接直接终止程序。

这似乎看起来还不够， 我们似乎无法看出来错误信息了。

我们继续在maybe基础上扩展一下Either：

// Either
Either = function() {};
Either.of = function(x) {return new Right(x);
}Left = function(x) {this.__value = x;
}// TODO: remove this nonsense
Left.of = function(x) {return new Left(x);
}Left.prototype.map = function(f) { return this; }
Left.prototype.ap = function(other) { return this; }
Left.prototype.join = function() { return this; }
Left.prototype.chain = function() { return this; }
Left.prototype.inspect = function() {return 'Left('+inspect(this.__value)+')';
}Right = function(x) {this.__value = x;
}// TODO: remove in favor of Either.of
Right.of = function(x) {return new Right(x);
}Right.prototype.map = function(f) {return Right.of(f(this.__value));
}Right.prototype.join = function() {return this.__value;
}Right.prototype.chain = function(f) {return f(this.__value);
}Right.prototype.ap = function(other) {return this.chain(function(f) {return other.map(f);});
}Right.prototype.join = function() {return this.__value;
}Right.prototype.chain = function(f) {return f(this.__value);
}Right.prototype.inspect = function() {return 'Right('+inspect(this.__value)+')';
}

重写一个刚才的add方法

var add = R.curry((x, y)=> x + y);

var eitherAdd = function(x, y) {

return R.is(Number, x) && R.is(Number, y) ?

Right.of(add).ap(Right.of(x)).ap(Right.of(y)):

Left.of("arguments should be number");
};

eitherAdd (1)(2)  // Right(3)

eitherAdd (3,5) // Right(8)

eitherAdd (3,null) // Left("arguments should be number")

报错是不是更友好了？ 当然做测试也是异常的简单

拿maybe距离， either 类似不赘述

assert.deepEqual(Maybe.of(8), maybeAdd(3, 5));
assert.deepEqual(Maybe.of(null), maybeAdd(null, 3));