JS轻量级函数式编程实现XDM二


Posted in Javascript onJune 16, 2022

前言

承接上一篇《XDM,JS如何函数式编程?看这就够了!(一)》,我们知道了函数式编程的几个基本概念。

这里作简要回顾:

  • 函数式编程目的是为了数据流更加明显,从而代码更具可读性;
  • 函数需要一个或多个输入(理想情况下只需一个!)和一个输出,输入输出是显式的代码将更好阅读;
  • 闭包是高阶函数的基础;
  • 警惕匿名函数;
  • 弃用 this 指向;

本篇将着重介绍第 2 点中函数的输入,它是 JS 轻量函数式编程的基础之基础,重要之重要!!!

偏函数

传参现状

我们经常会写出这样的代码:

function ajax(url,data,callback) {
    // ..
}
function getPerson(data,cb) {
    ajax( "http://some.api/person", data, cb );
}

ajax 函数有三个入参,在 getPerson 函数里调用,其中 url 已确定,data 和 cb 两个参数则等待传入。(因为很多时候参数都不是在当前能确定的,需要等待其它函数的操作后确定了再继续传入)

但是我们的原则是:入参最理想的情况下只需一个!

怎样优化,可以实现这一点呢?

我们或许可以在外层再套一个函数来进一步确定传参,比如:

function getCurrentUser(cb) {
    ...// 通过某些操作拿到 CURRENT_USER_ID
    getPerson( { user: CURRENT_USER_ID }, cb );
}

这样,data 参数也已经确定,cb 参数仍等待传入;函数 getCurrentUser 就只有一个入参了!

数据的传递路线是:

ajax(url,data,callback) => getPerson(data,cb) => getCurrentUser(cb)

这样函数参数个数逐渐减少的过程就是偏应用。

也可以说:getCurrentUser(cb) 是 getOrder(data,cb) 的偏函数,getOrder(data,cb) 是 ajax(url,data,cb) 函数的偏函数。

设想下:

如果一个函数是这样的:

function receiveMultiParam(a,b,c,......,x,y,z){
    // ..
}

我们难道还要像上面那样手动指定外层函数进行逐层嵌套吗?

显示我们不会这么做!

封装 partial

我们只需要封装一个 partial(..) 函数:

function partial(fn,...presetArgs) {
    return function partiallyApplied(...laterArgs){
        return fn( ...presetArgs, ...laterArgs );
    };
}

它的基础逻辑是:

var partial =
    (fn, ...presetArgs) =>
        (...laterArgs) =>
            fn( ...presetArgs, ...laterArgs );

把函数作为入参!还记得我们之前所说:

一个函数如果可以接受或返回一个甚至多个函数,它被叫做高阶函数。

我们借用 partial() 来实现上述举例:

var getPerson = partial( ajax, "http://some.api/person" );
var getCurrentUser = partial( getPerson, { user: CURRENT_USER_ID } ); // 版本 1

以下函数内部分析非常重要:

运行机制

getPerson() 的内部运行机制是:

var getPerson = function partiallyApplied(...laterArgs) {
    return ajax( "http://some.api/person", ...laterArgs );
};

getCurrentUser() 的内部运行机制是:

var getCurrentUser = function outerPartiallyApplied(...outerLaterArgs) {
    var getPerson = function innerPartiallyApplied(...innerLaterArgs){
        return ajax( "http://some.api/person", ...innerLaterArgs );
    };
    return getPerson( { user: CURRENT_USER_ID }, ...outerLaterArgs );
}

数据进行了传递:

getCurrentUser(outerLaterArgs) => getPerson(innerLaterArgs) => ajax(...params)

我们通过这样一层额外的函数包装层,实现了更加强大的数据传递,

我们将需要减少参数输入的函数传入 partial()中作为第一个参数,剩下的是 presetArgs,当前已知几个,就可以写几个。还有不确定的入参 laterArgs,可以在确定后继续追加。

像这样进行额外的高阶函数包装层,是函数式编程的精髓所在!

“随着本系列的继续深入,我们将会把许多函数互相包装起来。记住,这就是函数式编程!” —— 《JavaScript 轻量级函数式编程》

实际上,实现 getCurrentUser() 还可以这样写:

// 版本 2
var getCurrentUser = partial(
    ajax,
    "http://some.api/person",
    { user: CURRENT_USER_ID }
);
// 内部实现机制
var getCurrentUser = function partiallyApplied(...laterArgs) {
    return ajax(
        "http://some.api/person",
        { user: CURRENT_USER_ID },
        ...laterArgs
    );
};

但是版本 1 因为重用了已经定义好的函数,所以它在表达上更清晰一些。它被认为更加贴合函数式编程精神!

拓展 partial

我们再看看 partial() 函数还可它用:

function partial(fn,...presetArgs) {
    return function partiallyApplied(...laterArgs){
        return fn( ...presetArgs, ...laterArgs );
    };
}

比如:将数组 [1,2,3,4,5] 每项都加 3,通常我们会这么做:

function add(x,y) {
    return x + y
[1,2,3,4,5].map( function adder(val){
    return add( 3, val );
} );
// [4,5,6,7,8]

借助 partial():

[1,2,3,4,5].map( partial( add, 3 ) );
// [4,5,6,7,8]

add(..) 不能直接传入 map(..) 函数里,通过偏应用进行处理后则能传入;

实际上,partial() 函数还可以有很多变体:

回想我们之前调用 Ajax 函数的方式:ajax( url, data, cb )。如果要偏应用 cb 而稍后再指定 data 和 url 参数,我们应该怎么做呢?

function reverseArgs(fn) {
    return function argsReversed(...args){
        return fn( ...args.reverse() );
    };
}
function partialRight( fn, ...presetArgs ) {
    return reverseArgs(
        partial( reverseArgs( fn ), ...presetArgs.reverse() )
    );
}
var cacheResult = partialRight( ajax, function onResult(obj){
    cache[obj.id] = obj;
});
// 处理后:
cacheResult( "http://some.api/person", { user: CURRENT_USER_ID } );

柯里化

函数柯里化实际上是一种特殊的偏函数。

我们用 curry(..) 函数来实现此前的 ajax(..) 例子,它会是这样的:

var curriedAjax = curry( ajax );
var personFetcher = curriedAjax( "http://some.api/person" );
var getCurrentUser = personFetcher( { user: CURRENT_USER_ID } );
getCurrentUser( function foundUser(user){ /* .. */ } );

柯里化函数:接收单一实参(实参个数:1)并返回另一个接收下一个实参的函数。

它将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)。

实现:

function curry(fn,arity = fn.length) {
    return (function nextCurried(prevArgs){
        return function curried(nextArg){
            var args = prevArgs.concat( [nextArg] );
            if (args.length >= arity) {
                return fn( ...args );
            }
            else {
                return nextCurried( args );
            }
        };
    })( [] );
}

阶段小结

我们为什么要如此着重去谈“偏函数”(partial(sum,1,2)(3))或“柯里化”(sum(1)(2)(3))呢?

第一,是显而易见的,偏函数或柯里化,可以将“指定分离实参”的时机和地方独立开来;

第二,更有重要意义的是,当函数只有一个形参时,我们能够比较容易地组合它们。这种单元函数,便于进行后续的组合函数;

对函数进行包装,使其成为一个高阶函数是函数式编程的精髓!

至此,有了“偏函数”这门武器大炮,我们将逐渐轰开 JS轻量级函数式编程的面纱 ~

以上就是JS轻量级函数式编程实现XDM二的详细内容,更多关于JS轻量级函数式编程XDM的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
JS函数式编程实现XDM一
Jun 16 #Javascript
正则表达式基础与常用验证表达式
Jun 16 #Javascript
使用compose函数优化代码提高可读性及扩展性
html中两种获取标签内的值的方法
Jun 16 #jQuery
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 #Javascript
vue如何在data中引入图片的正确路径
Jun 05 #Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 #Vue.js
You might like
php提示undefined index的几种解决方法
2012/05/21 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
《Python学习手册》学习总结
2018/01/17 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python中一些深不见底的“坑”
2019/06/12 Python
关于Python解包知识点总结
2020/05/05 Python
python math模块的基本使用教程
2021/01/16 Python
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
环保建议书作文500字
2015/09/14 职场文书