JavaScript函数式编程（三）

对于 Promise 的一个回调函数来说，它既可以直接返回一个值，也可以返回一个新的 Promise，但对于他们后续的回调函数来说，这二者都是等价的，这就很巧妙地解决了 nodejs 里被诟病已久的嵌套地狱。

事实上，Promise 就是一种 Monad，是的，可能你天天要写一大堆 Promise，可直到现在才知道天天用的这个东西竟然是个听起来很高大上的函数式概念。

下面我们来实际实现一个 Monad，如果你不想看的话，只要记住 『Promise 就是一种 Monad』 这句话然后直接跳过这一章就好了。

我们来写一个函数 cat，这个函数的作用和 Linux 命令行下的 cat 一样，读取一个文件，然后打出这个文件的内容，这里 IO 的实现请参考上一篇文章：

import fs from 'fs';
import _ from 'lodash';

var map = _.curry((f, x) => x.map(f));
var compose = _.flowRight;

var readFile = function(filename) {
    return new IO(_ => fs.readFileSync(filename, 'utf-8'));
};

var print = function(x) {
    return new IO(_ => {
        console.log(x);
        return x;
    });
}

var cat = compose(map(print), readFile);

cat("file")
//=> IO(IO("file的内容"))

cat("file").__value().__value();
//=> 读取文件并打印到控制台

很尴尬对吧，如果我们涉及到 100 个?IO?操作，那么难道要连续写 100 个?__value()?吗？

当然不能这样不优雅，我们来实现一个?join?方法，它的作用就是剥开一层 Functor，把里面的东西暴露给我们：

var join = x => x.join();
IO.prototype.join = function() {
  return this.__value ? IO.of(null) : this.__value();
}

// 试试看
var foo = IO.of(IO.of('123'));

foo.join();
//=> IO('123')

var cat = compose(join, map(print), readFile);
cat("file").__value();
//=> 读取文件并打印到控制台

var doSomething = compose(join, map(f), join, map(g), join, map(h));

var chain = _.curry((f, functor) => functor.chain(f));
IO.prototype.chain = function(f) {
  return this.map(f).join();
}

// 现在可以这样调用了
var doSomething = compose(chain(f), chain(g), chain(h));

// 当然，也可以这样
someMonad.chain(f).chain(g).chain(h)

// 写成这样是不是很熟悉呢？
readFile('file')
    .chain(x => new IO(_ => {
        console.log(x);
        return x;
    }))
    .chain(x => new IO(_ => {
        // 对x做一些事情，然后返回
    }))

var Text = props => (
    <div style={props.style}>{props.text}</div>
)

state => virtual DOM => 真实 DOM

reducer(currentState, action) => newState

--- 用户点击了按钮 --> 网络请求成功 --> 用户键盘输入 --> 某个定时事件发生 --> ......

var clicks = Rx.Observable
    .fromEvent(document, 'click')
    .bufferCount(2)
    .subscribe(x => console.log(x)); // 打印出前2次点击事件

var inputs = [];
var clicks = Rx.Observable
    .fromEvent(document, 'keydown')
    .scan((acc, cur) => {
        acc.push(cur.keyCode);
        var start = acc.length - 12 < 0 ? 0 : acc.length - 12;
        return acc.slice(start);
    }, inputs)
    .filter(x => x.join(',') == [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 66, 65].join(','))// 上上下下左右左右BABA，这里用了比较奇技淫巧的数组对比方法
    .subscribe(x => console.log('!!!!!!ACE!!!!!!'));

import xs from 'xstream';
import {run} from '@cycle/xstream-run';
import {makeDOMDriver} from '@cycle/dom';
import {html} from 'snabbdom-jsx';

function main(sources) {
  const sinks = {
    DOM: sources.DOM.select('input').events('click')
      .map(ev => ev.target.checked)
      .startWith(false)
      .map(toggled =>
        <div>
          <input type="checkbox" /> Toggle me
          <p>{toggled ? 'ON' : 'off'}</p>
        </div>
      )
  };
  return sinks;
}

const drivers = {
  DOM: makeDOMDriver('#app')
};

run(main, drivers);