只是想輕一些
首先聲明，絕不否認 Immutable.js 的作用废累，以及如果語言自身支持 immutable 的好處邓梅。
本文想說的是，大部分時間我們需要的不是對數(shù)據(jù)的封裝邑滨，而是一個快速修改嵌套結構數(shù)據(jù)并返回新對象的方法日缨。
和 Immutable.js 借鑒自 FP 一樣，這里要說的方案 （SEC掖看，Semantic Editor Combinators) 也是借鑒在之前的大牛在 FP 中的思考匣距。
對比
先來對比一下3種局部修改并返回新數(shù)據(jù)的方法。
// 假定數(shù)據(jù)如下哎壳，需求是把 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 嵌套已經(jīng)很易操作，但是碰到數(shù)組的時候归榕，Immutable.js 還是沒有提供更好用的 API
- 雖然
- Semantic Editor Combinators 示例
- 3組括號尸红，各有分工。第一個是對數(shù)據(jù)結構的描述刹泄；第二個是描述如何修改數(shù)據(jù)外里；第三個是原數(shù)據(jù)。
光從修改數(shù)據(jù)來說特石，SEC形式的代碼更清晰簡潔盅蝗。
SEC 的代碼實現(xiàn)
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 都是函數(shù)式編程里的一些基礎姆蘸。那么問題來了墩莫，SEC 怎么就管用了呢？
再回顧一下之前 SEC 形式的調用方法
// 3. Semantic Editor Combinators
var data_sec = compose(
on('bar'), map, on('beer')
)( x => x * 2 )(data)
關鍵就在于組合 (compose)乞旦，在這里贼穆，特指針對"第一個參數(shù)是函數(shù)的兩參函數(shù)"的 compose。
我們來是如下：
var foo = partial(function (fn, param) {
return fn(param * 3);
});
var bar = partial(function (fn, param) {
return fn(param + 2);
});
可以注意到兰粉，我們在兩參函數(shù)外包裹了 partial, 因為理論上 compose 應該作用在一參的函數(shù)上故痊，然后 javascript 的函數(shù)又并不是天生具有柯里化。
var foobar = compose(foo, bar);
foobar(x => x)(10) === 32
一開始玖姑，你可能會驚訝的發(fā)現(xiàn) “咦ｃ碉慨菱！ foo, bar 居然是從左到右執(zhí)行的！戴甩！ 正常的 compose 都是從最右側函數(shù)開始執(zhí)行的符喝！”
如果你真的有這樣的疑問，請再好好想想 foobar(x => x) 的執(zhí)行效果是什么甜孤？ 簡單說來协饲，就是這樣的順序
- foobar 接收到 x => x，再生成一個新函數(shù) fn_foo缴川，而其內部過程是：
- bar 接收到 x => x茉稠，返回一個新函數(shù) fn_bar ( 形如 (param) => { ... } )
- foo 接收到 fn_bar，返回一個新函數(shù) fn_foo ( 形如 (param) => { ... } )
如果把兩個函數(shù)通過手工的方式揉在一起把夸，效果是：
var foobar_id = function(param) {
return (function (param) {
return (function (x) {
return x;
})(param + 2);
})(param * 3)
};
恭喜你而线，如果你已經(jīng)看懂了上面的代碼，那么 compose(on('key1'), map, on('key2')) 的工作機制也就迎刃而解了恋日。
擴展性
理解 SEC 的關鍵膀篮，在于理解 compose 二參函數(shù)。
使用 SEC 的關鍵岂膳，在于不斷 compose誓竿，就是這么簡單。如果有其他數(shù)據(jù)結構想要 compose 進來闷营，你要做的只是寫一個類似 on 和 map 這樣解構數(shù)據(jù)并生成新數(shù)據(jù)的函數(shù)烤黍。
結束語
SEC 就是這么簡單，如果你在一個自己封閉的項目里想要使用 Immutable 數(shù)據(jù) （只要你不擔心有其他人會不慎直接修改你的數(shù)據(jù)）傻盟，其實 Semantic Editor Combinator 是一個再好不過的選擇速蕊。
相信好的代碼，永遠是清晰和簡潔的
Reference
http://javran.github.io/posts/2014-03-21-implement-semantic-editor-combinators.html
