kdepp/sec.md

## sec.md

      
    Raw
  

              sec.md
            
          
    学会了 Semantic Editor Combinators，你不一定真的需要Immutable.js

只是想轻一些

首先声明，绝不否认 Immutable.js 的作用，以及如果语言自身支持 immutable 的好处。
本文想说的是，大部分时间我们需要的不是对数据的封装，而是一个快速修改嵌套结构数据并返回新对象的方法。
和 Immutable.js 借鉴自 FP 一样，这里要说的方案 （SEC，Semantic Editor Combinators) 也是借鉴在之前的大牛在 FP 中的思考。
对比

先来对比一下3种局部修改并返回新数据的方法。
// 假定数据如下，需求是把 bar 里的所有 beer 乘 2  

var data = {
  foo: 1,
  zoo: 2,
  bar: [ { beer: 2 }, {beer: 3} ] 
};

// 1. ES6
var data_es6 = {
  ...data,
  bar: data.bar.map(item => ({
    ...item,
    beer: item.beer * 2
  }))
};


// 2. Immutable.js
var data_immu = Immutable.fromJS(data).updateIn(
  ['bar'],
  list => list.map(item => ({
    ...item,
    beer: item.beer * 2
  }))
).toJS();


// 3. Semantic Editor Combinators
var data_sec = compose(
  on('bar'), map, on('beer')
)( x => x * 2 )(data)
从以上对比其实可以看到：

ES6示例

即使用上 Object Spread 语法，你还是需要不断去书写重复各个字段名


Immutables.js示例

虽然 updateIn 对于深层的 Object 嵌套已经很易操作，但是碰到数组的时候，Immutable.js 还是没有提供更好用的 API


Semantic Editor Combinators 示例

3组括号，各有分工。第一个是对数据结构的描述；第二个是描述如何修改数据；第三个是原数据。


光从修改数据来说，SEC形式的代码更清晰简洁。
SEC 的代码实现

const partial = (fn) => {
    let len = fn.length,
        arbitary;

        arbitary = (cur_args, left_arg_cnt) => (...args) => {
            if (args.length >= left_arg_cnt) {
                return fn.apply(null, cur_args.concat(args));
            }

            return arbitary(cur_args.concat(args), left_arg_cnt - args.length);
        };

    return arbitary([], len);
};

const reduceRight = (fn, initial, list) => {
    var ret = initial;

    for (let i = list.length - 1; i >= 0; i --) {
        ret = fn(list[i], ret);
    }

    return ret;
};

const compose = (...args) => {
    return reduceRight((cur, prev) => {
        return x => cur(prev(x));
    }, (x => x), args);
};

const map = partial((fn, list) => {
    var result = [];

    for (let i = 0, len = list.length; i < len; i ++) {
        result.push(fn(list[i]));
    }

    return result;
});

const on = partial((key, fn, dict) => {
    return {
        ...dict,
        [key]: fn(dict[key])
    };
});
Nothing Special

代码本身没有复杂。partial, compose, reduceRight, map 都是函数式编程里的一些基础。那么问题来了，SEC 怎么就管用了呢？
再回顾一下之前 SEC 形式的调用方法
// 3. Semantic Editor Combinators
var data_sec = compose(
  on('bar'), map, on('beer')
)( x => x * 2 )(data)
关键就在于组合 (compose)，在这里，特指针对"第一个参数是函数的两参函数"的 compose。
我们来是如下：
var foo = partial(function (fn, param) {
  return fn(param * 3);
});

var bar = partial(function (fn, param) {
  return fn(param + 2);
});
可以注意到，我们在两参函数外包裹了 partial, 因为理论上 compose 应该作用在一参的函数上，然后 javascript 的函数又并不是天生具有柯里化。
var foobar = compose(foo, bar);

foobar(x => x)(10) === 32
一开始，你可能会惊讶的发现 “咦！！ foo, bar 居然是从左到右执行的！！ 正常的 compose 都是从最右侧函数开始执行的！”
如果你真的有这样的疑问，请再好好想想 foobar(x => x) 的执行效果是什么？ 简单说来，就是这样的顺序

foobar 接收到 x => x，再生成一个新函数  fn_foo，而其内部过程是：

bar 接收到 x => x，返回一个新函数 fn_bar ( 形如 (param) => { ... } )
foo 接收到 fn_bar，返回一个新函数 fn_foo ( 形如 (param) => { ... } )


如果把两个函数通过手工的方式揉在一起，效果是：
var foobar_id = function(param) {
  return (function (param) {
    return (function (x) {
      return x;
    })(param + 2);
  })(param * 3)
};
恭喜你，如果你已经看懂了上面的代码，那么 compose(on('key1'), map, on('key2')) 的工作机制也就迎刃而解了。
扩展性

理解 SEC 的关键，在于理解 compose 二参函数。
使用 SEC 的关键，在于不断 compose，就是这么简单。如果有其他数据结构想要 compose 进来，你要做的只是写一个类似  on 和 map 这样解构数据并生成新数据的函数。
结束语

SEC 就是这么简单，如果你在一个自己封闭的项目里想要使用 Immutable 数据 （只要你不担心有其他人会不慎直接修改你的数据），其实 Semantic Editor Combinator 是一个再好不过的选择。
相信好的代码，永远是清晰和简洁的
Reference

http://javran.github.io/posts/2014-03-21-implement-semantic-editor-combinators.html