前端必学——函数式编程（六）

2022-05-28 21:37:50

我们可以得出这样的结论：

函数式编程所代表的【声明式代码风格】是高于【命令式代码风格】的！它给了代码可读性数值更多增长的空间！

也可以这样解释：声明式代码风格是基于命令式代码风格，声明式说白了就是对命令式的上层封装！

命令式关注：做什么，申明式关注：是什么。

如果我们的代码夹杂着命令式风格和声明式风格，即处在图1.2 红线和绿线的交叉点上的话，那我们代码的可读性或许就处在图 1.1 虚线和实线的交叉点上，可读性非常低。所以，我们在 JS 函数式编程的路上要更加一往无前！别到最后不伦不类，沦为笑柄 Orz

第七篇作为系列阶段性的【完结篇】，一切将从实战出发！一切为了实战！
FP will never be slaves.（函数式编程永不为奴）

武器准备

我们在前篇陆续介绍了很多【高级函数】用于实践 JS 函数式编程。

作者将其整理到了这个文件：fp-helpers.js

随便列举几个，都是前面提过的，熟悉的面孔：

function partial(fn,...presetArgs) { // 偏函数
	return function partiallyApplied(...laterArgs){
		return fn( ...presetArgs, ...laterArgs );
	};
}

function curry(fn,arity = fn.length) { // 柯里化
	return (function nextCurried(prevArgs){
		return function curried(nextArg){
			var args = [ ...prevArgs, nextArg ];

			if (args.length >= arity) {
				return fn( ...args );
			}
			else {
				return nextCurried( args );
			}
		};
	})( [] );
}

function compose(...fns) { // 函数组装
    return fns.reduceRight( function reducer(fn1,fn2){
        return function composed(...args){
            return fn2( fn1( ...args ) );
        };
    } );
}

var pipe = reverseArgs(compose); // 函数组装：参数反转，从左到右

function reverseArgs(fn) {
	return function argsReversed(...args){
		return fn( ...args.reverse() );
	};
}

function zip(arr1,arr2) { // 交替选择入参
	var zipped = [];
	arr1 = [...arr1];
	arr2 = [...arr2];

	while (arr1.length > 0 && arr2.length > 0) {
		zipped.push( [ arr1.shift(), arr2.shift() ] );
	}

	return zipped;
}

.....

我们将借用这些高级函数彻底升级我们从【命令式编程风格】到【函数式编程风格】！

实践场景

我们用原生模拟一个股票信息操作场景：

DOM 结构：

格式化数据

一些基本的辅助函数：

function addStockName(stock) { // 新增股票
    return setProp( "name", stock, stock.id );
}
function formatSign(val) { // 格式化股价（$）
    if (Number(val) > 0) {
        return `+${val}`;
    }
    return val;
}
function formatCurrency(val) { // 格式化股价（$）
    return `${val}`;
}
function transformObservable(mapperFn,obsv){ // 返回 observable 监听（通过 RxJS，第六篇提过）
    return obsv.map( mapperFn );
}

我们 mock 从服务器获取的数据是这样的：

stock = { id: "AAPL", price: 121.7, change: 0.01 }

在把 price 的值显示到 DOM 上之前，需要用 formatCurrency(..) 函数格式化一下（比如变成 "$121.70"），同时需要用 formatChange(..) 函数格式化 change 的值（比如变成 "+0.01"）。但是我们不希望修改消息对象中的 price 和 change。故写一个辅助函数如下：

function formatStockNumbers(stock) {
    var updateTuples = [
        [ "price", formatPrice( stock.price ) ],
        [ "change", formatChange( stock.change ) ]
    ];

    return reduce( function formatter(stock,[propName,val]){
        return setProp( propName, stock, val );
    } )
    ( stock )
    ( updateTuples );
}

我们创建了 updateTuples 元组来保存 price 和 change 的信息，包括属性名称和格式化好的值。把 stock 对象作为 initialValue，对元组进行 reduce(..)操作（参考第 5 篇）。把元组中的信息解构成 propName 和 val，然后返回了 setProp(..) 调用的结果，这个结果是一个被复制了的新的对象，其中的属性被修改过了。（可理解为深拷贝的进阶版）

我们基于以上再定义几个辅助函数：

var formatDecimal = unboundMethod( "toFixed" )( 2 );
var formatPrice = pipe( formatDecimal, formatCurrency );
var formatChange = pipe( formatDecimal, formatSign );
var processNewStock = pipe( addStockName, formatStockNumbers );

formatDecimal(..) 函数接收一个数字作为参数（如 2.1）并且调用数字的 toFixed( 2 ) 方法。
unboundMethod(..) 函数用来创建一个独立的延迟绑定函数。
formatPrice(..)，formatChange(..) 和 processNewStock(..) 都用到了 pipe(..)来从左到右地组合运算。

操作 DOM

下一步，定义一些操作 DOM 的辅助函数：

function isTextNode(node) {
    return node && node.nodeType == 3;
}
function getElemAttr(elem,prop) {
    return elem.getAttribute( prop );
}
function setElemAttr(elem,prop,val) {
    // 副作用！！
    return elem.setAttribute( prop, val );
}
function matchingStockId(id) {
    return function isStock(node){
        return getStockId( node ) == id;
    };
}
function isStockInfoChildElem(elem) {
    return /\bstock-/i.test( getClassName( elem ) );
}
function appendDOMChild(parentNode,childNode) {
    // 副作用！！
    parentNode.appendChild( childNode );
    return parentNode;
}
function setDOMContent(elem,html) {
    // 副作用！！
    elem.innerHTML = html;
    return elem;
}

var createElement = document.createElement.bind( document );

var getElemAttrByName = curry( reverseArgs( getElemAttr ), 2 );
var getStockId = getElemAttrByName( "data-stock-id" );
var getClassName = getElemAttrByName( "class" );

这些函数不言自明，从函数命名上就可看出其含义。

以上标出了操作 DOM 元素时的副作用。因为不能简单地用克隆的 DOM 对象去替换，所以勉强接受了一些副作用的产生。但如果在 DOM 渲染中产生一个错误，这样做，我们可以轻松地搜索这些代码注释来缩小可能的错误代码。

查找特定 DOM

现在，我们用 getDOMChildren(..) 实用函数来定义股票行情工具中查找特定 DOM 元素的工具函数：

getDOMChildren(..) 用 listify(..) 来保证我们得到的是一个数组（即使里面只有一个元素）。flatMap(..)，这个函数把一个包含数组的数组扁平化，变成一个浅数组。Array.from(..) 把这个数组变成一个真实的数组（而不是一个 NodeList）。

var getDOMChildren = pipe(
    listify,
    flatMap(
        pipe(
            curry( prop )( "childNodes" ),
            Array.from
        )
    )
);

function getStockElem(tickerElem,stockId) {
    return pipe(
        getDOMChildren,
        filterOut( isTextNode ),
        filterIn( matchingStockId( stockId ) )
    )
    ( tickerElem );
}
function getStockInfoChildElems(stockElem) {
    return pipe(
        getDOMChildren,
        filterOut( isTextNode ),
        filterIn( isStockInfoChildElem )
    )
    ( stockElem );
}

getStockElem(..) 和 getStockInfoChildElems(..) 两个实用函数都会过滤掉文字节点，保证返回一个符合股票代码的 DOM 元素数组。

主函数

我们用 stockTickerUI 对象 来保存三个修改界面的主要方法，如下：

var stockTickerUI = {

    updateStockElems(stockInfoChildElemList,data) { // 渲染股票数据到 DOM 元素上
        // ..
    },

    updateStock(tickerElem,data) { // 更新股票数据
        // ..
    },

    addStock(tickerElem,data) { // 添加新股票
        // ..
    }
};

updateStockElems

updateStockElems(..) 内部实现：

var stockTickerUI = {

    updateStockElems(stockInfoChildElemList,data) {

        // **释义1**
        var getDataVal = curry( reverseArgs( prop ), 2 )( data ); 

        // **释义2**
        var extractInfoChildElemVal = pipe(
            getClassName,
            stripPrefix( /\bstock-/i ),
            getDataVal
        );

        // **释义3**
        var orderedDataVals =
            map( extractInfoChildElemVal )( stockInfoChildElemList );

        // **释义4**
        var elemsValsTuples =
            filterOut( function updateValueMissing([infoChildElem,val]){
                return val === undefined;
            } )
            ( zip( stockInfoChildElemList, orderedDataVals ) );

        // **释义5**
        compose( each, spreadArgs )
        ( setDOMContent )
        ( elemsValsTuples );
    },

    // ..

};

释义：

getDataVal(..)：首先把 prop 函数的参数反转，柯里化后，把 data 消息对象绑定上去，得到了 getDataVal(..) 函数；
extractInfoChildElemVal(..)：接受一个 DOM 元素作为参数，拿到 class 属性的值，然后把 "stock-" 前缀去掉，然后用这个属性值（"name"，"price" 或 "change"），通过 getDataVal(..) 函数，在 data 中找到对应的数据；
orderedDataVals(..)：这么做的目的是按照 stockInfoChildElemList 中的元素的顺序从 data 中拿到数据。我们对 stockInfoChildElemList 数组调用 extractInfoChildElem 映射函数，来拿到这些数据；
elemsValsTuples(..)：我们用来过滤掉数据对象中值为空的元组，筛选后的结果是一个元组数组（zip压缩：[ , ".." ]）；
最后调用，我们更新 DOM 中的元素：

updateStock

updateStock(..)，是三个函数里面最简单的：

var stockTickerUI = {

    // ..

    updateStock(tickerElem,data) {
        var getStockElemFromId = curry( getStockElem )( tickerElem );
        var stockInfoChildElemList = pipe(
            getStockElemFromId,
            getStockInfoChildElems
        )
        ( data.id );

        return stockTickerUI.updateStockElems(
            stockInfoChildElemList,
            data
        );
    },

    // ..

};

柯里化之前的辅助函数 getStockElem(..)，传给它 tickerElem，得到了 getStockElemFromId(..) 函数，这个函数接受 data.id 作为参数。
把
元素（其实是数组形式的）传入 getStockInfoChildElems(..)，我们得到了三个子元素，用来展示股票信息，我们把它们保存在 stockInfoChildElemList 变量中。
然后把数组和股票信息 data 对象一起传给 stockTickerUI.updateStockElems(..)，来更新中的数据。

addStock

addStock(..)，会根据新的股票信息生成一个空的 DOM 结构，然后调用 stockTickerUI.updateStockElems(..) 方法来更新其中的内容。

var stockTickerUI = {

    // ..

    addStock(tickerElem,data) {

        // **释义1**
        var [stockElem, ...infoChildElems] = map(
            createElement
        )
        ( [ "li", "span", "span", "span" ] );

        // **释义2**
        var attrValTuples = [
            [ ["class","stock"], ["data-stock-id",data.id] ],
            [ ["class","stock-name"] ],
            [ ["class","stock-price"] ],
            [ ["class","stock-change"] ]
        ];

        // **释义3**
        var elemsAttrsTuples =
            zip( [stockElem, ...infoChildElems], attrValTuples );

        // **释义4**
        // 副作用！！
        each( function setElemAttrs([elem,attrValTupleList]){
            each(
                spreadArgs( partial( setElemAttr, elem ) )
            )
            ( attrValTupleList );
        } )
        ( elemsAttrsTuples );

        // **释义5**
        // 副作用！！
        stockTickerUI.updateStockElems( infoChildElems, data );
        reduce( appendDOMChild )( stockElem )( infoChildElems );
        tickerElem.appendChild( stockElem );
    }

};

释义：

我们先创建
父元素和三个子元素，把它们分别赋值给了 stockElem 和 infoChildElems 数组；
为了设置 DOM 元素的对应属性，我们声明了一个元组数组组成的数组。按照顺序，每个元组数组对应上面四个 DOM 元素中的一个。每个元组数组中的元组由对应元素的属性和值组成：
我们把四个 DOM 元素和 attrValTuples 数组 zip(..) 起来；
把属性和值设置到每个 DOM 元素上；
调用；

实现结果是：

[
    [ , [ ["class","stock"], ["data-stock-id",data.id] ] ],
    [ , [ ["class","stock-name"] ] ],
    ..
]

到此为止，我们有了元素数组，每个元素上都有了该有的属性，但是还没有 innerHTML 的内容。这里，我们要用 stockTickerUI.updateStockElems(..) 函数，把 data 设置到上去，和股票信息更新事件的处理一样。

小结

以上，我们模拟了股票数据操作场景下是如何进行函数式编程的！可能读起来有些晦涩，但是老话说的好：书读百遍，其意自现。 看多了，看久了，也自然能感知一二！

如果你一直以来惯用命令式编程，可以设想下，在命令式编程中，它们会怎么去实现的？

其实，还有一个很重要的点，上面没写，即实现 observable 订阅功能，把事件传递给主函数。

所以，这里的范例更推荐去往项目【ch11-code】整体阅读！

此篇示例更多的是把前篇概念联系起来，提供更真实的例子来学习。

在你豁然开朗以前一定要持续不断地练习！！

函数库

至此，你应该已经明白：上面提到的辅助函数（高级函数）的确很厉害，但是我自己写不出来，怎么办呢？

没关系，使用武器的人不需要知道武器是怎么生产出来的！

没错，我们先要学会使用这些函数式编程中强大的第三方武器库！

然后再去谈，善用武器的人都应该知道武器原理 Balabala~

它们是：

Ramda：通用函数式编程实用函数
Sanctuary：函数式编程类型 Ramda 伴侣
lodash/fp：通用函数式编程实用函数
functional.js：通用函数式编程实用函数
Immutable：不可变数据结构
Mori：（受到 ClojureScript 启发）不可变数据结构
Seamless-Immutable：不可变数据助手
tranducers-js：数据转换器
monet.js：Monad 类型

更多关于 Monad，挖个坑，后面填。

总结

本阶段关于函数式编程已经说了这么多了~最后的最后，来点形而上学，高屋建瓴。

我不需要再为各位开发者想出更多崇高的理由来激励大家前行。感谢大家一起参与学习 JavaScript 中的函数式编程。期望你我充满希望！—— cognitect-lab

当你在绝望和沮丧的低谷时，别停下来。前面等待你的是一种更好的思维方式！

可以预见的是，本瓜后期还会多次针对 JS 的函数式编程进行更多探究和分享！

感谢阅读！

我是掘金安东尼：一名人气前端技术博主（文章 100w+ 阅读量）
终身写作者（INFP 写作人格）
坚持与热爱（简书打卡 1000 日）
我能陪你一起度过漫长技术岁月吗（以梦为马）
觉得不错，给个点赞和关注吧（这是我最大的动力）b(￣▽￣)d