由于最近面试的原因，一直没有更新博文，最近有时间了，谈一下一直在研究的函数式编程的使用。
函数式编程，从接触以来似乎没怎么使用，据说backbone的依赖是underscore，是不是也是函数式呢？redux不依赖underscore，是不是函数式呢？
backbone这个不清楚，反正在redux中或多或少的使用了函数式编程的理念，用到函数式编程(以下简称为fp)的compose函数来处理它的reducer。
那么fp到底该怎么用，它有什么好处呢？ 系统的学习fp可到这里来-->点我 当然，买本《functional javascript》也是不错的~
您也可以看一下我的这篇博文--《javascript柯里化及组合函数》里面讲了本例子所用到的主要函数~
-----------------------正文分割线-------------------------------------------
引用一句话说：我们要开始转变观念了，从现在开始，我们将不再指示计算机如何工作，而是指出我们明确希望得到的结果。
先举个栗子~
这是命令式编程
var makes = []; for (i = 0; i < cars.length; i++) { makes.push(cars[i].make); }
这是声明式编程
var makes = cars.map(function(car){ return car.make; });
我觉得高低立分，声明式的map函数是一个表达式，直观而且自由度很大。我们可以随意更改makes的内容，而这些都是命令式达不到的。fp的优势就是这样。
从书上找一个例子来说明fp是怎样编程的：
这个例子是获取图片，然后展示在浏览器上。
这是html结构：
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script> <script src="flickr.js"></script> </head> <body></body> </html>
flickr.js的内容：
requirejs.config({ paths: { ramda: 'https://cdnjs.cloudflare.com/ajax/libs/ramda/0.13.0/ramda.min', jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min' } }); require([ 'ramda', 'jquery' ], function (_, $) { var trace = _.curry(function(tag, x) { console.log(tag, x); return x; }); // app goes here });
ramda是一个fp的库，就类似于underscore和lodash，本例子用了requirejs，虽然我不怎么喜欢这个框架，为保持一致性，就一直用require了。
这个flickr.js就是用require加载了ramda和jquery，声明了trace函数用来在fp的流中打印当前流的值，其实排错用，暂时忽略它。
本应用的任务呢？
- 根据特定搜索关键字构造 url
- 向 flickr 发送 api 请求
- 把返回的 json 转为 html 图片
- 把图片放到屏幕上
上面提到了2个不纯的动作：从api获取数据和把图片放到屏幕上，我们先把不纯的动作写出来，以便分离开其他纯的动作。
var Impure = { getJSON: _.curry(function(callback, url) { $.getJSON(url, callback); }), setHtml: _.curry(function(sel, html) { $(sel).html(html); }) };
在 Impure 命名空间下，这样我们就知道它们都是危险函数。
简单了封装了jquery的getJSON和jquery的html。就可以用Impure.getJSON(url,callback)来调用啦。
var url = function (term) { return 'https://api.flickr.com/services/feeds/photos_public.gne?tags=' + term + '&format=json&jsoncallback=?'; };
封装获得url的函数。
好，我们把方法都写完了，现在开始fp之旅。
利用compose组合了获取url和获取图片这个任务。app("cats");就可以得到cats图片的src，回掉函数是trace("response")，它会打印服务器的返回。
var app = _.compose(Impure.getJSON(trace("response")), url); app("cats");
如果命令式编程的话会写为
var _url = url("cat"); Impure.getJSON(_url,trace("response"));
这样就不是那么简洁自由了。
这会调用 url 函数，然后把字符串传给 getJSON 函数。getJSON 已经局部应用了 trace，加载这个应用将会把请求的响应显示在 console 里。
得到这个json后，我们想要从这个 json 里构造图片，但是 src 都在 items 数组中的每个 media 对象的 m 属性上
然后实现一个辅助函数：
var prop = _.curry(function(property, object){ return object[property]; });
这个其实就是_.prop了。很无聊是不是。。
然后呢，获取图片url，
var mediaUrl = _.compose(_.prop('m'), _.prop('media')); var srcs = _.compose(_.map(mediaUrl), _.prop('items'));
从json里面取到items属性，然后取media属性，然后取m属性。。一系列的取值运算都用compose来执行。
然后把它整合到html里：
var renderImages = _.compose(Impure.setHtml("body"), srcs); var app = _.compose(Impure.getJSON(renderImages), url);
app方法是把字符串通过url形成需要捕获的url字符串，然后放到getJSON里获取，然后返回renderImage方法。
renderImage函数是把得到的src传到body里，body里会显示图片的src。
这个方法是真正把图片添加到html里。
var img = function (url) { return $('<img />', { src: url }); };
这是真正render图片的renderImages方法。与上面的renderImages方法不一样的地方就是在setHtml的时候不是把srcs放到body了，它加了img标签了。
images就是把srcs组装成html里的img标签。
var images = _.compose(_.map(img), srcs); var renderImages = _.compose(Impure.setHtml("body"), images); var app = _.compose(Impure.getJSON(renderImages), url);
这样就完成了~
最后执行
app("cats");
的时候，这一系列工具链启动了，cats传入url里面封装成需要捕获的url，然后传到getJSON里面获取。getJSON的callback又是renderImages，renderImages把得到的src组装到img标签，然后扔到body里。然后这些工作就完成了。
只说做什么，不说怎么做。这就是fp。我们只传入了cats，这是我们需要的cat图片，然后怎么做呢，这些函数通过compose完成自己的功能。然后通过compose组合起来，完成这个项目的应用。
是不是觉得清晰了很多，而且每一步都是可变的，就像gulp执行pipe，增加一个流的处理是很简单的，对管道的流的处理可以改变整个结果。
完整代码：
requirejs.config({ paths: { ramda: 'https://cdnjs.cloudflare.com/ajax/libs/ramda/0.13.0/ramda.min', jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min' } }); require([ 'ramda', 'jquery' ], function (_, $) { //////////////////////////////////////////// // Utils var Impure = { getJSON: _.curry(function(callback, url) { $.getJSON(url, callback); }), setHtml: _.curry(function(sel, html) { $(sel).html(html); }) }; var img = function (url) { return $('<img />', { src: url }); }; var trace = _.curry(function(tag, x) { console.log(tag, x); return x; }); //////////////////////////////////////////// var url = function (t) { return 'https://api.flickr.com/services/feeds/photos_public.gne?tags=' + t + '&format=json&jsoncallback=?'; }; var mediaUrl = _.compose(_.prop('m'), _.prop('media')); var srcs = _.compose(_.map(mediaUrl), _.prop('items')); var images = _.compose(_.map(img), srcs); var renderImages = _.compose(Impure.setHtml("body"), images); var app = _.compose(Impure.getJSON(renderImages), url); app("cats"); });