只是想轻一些
首先声明，绝不否认 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