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 相关文章推荐
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
中止javascript执行的方法
Feb 14 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
详解vue 组件注册
2020/11/20 Vue.js
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
Python日志模块logging简介
2015/04/13 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
广州地球村科技数据库题目
2016/04/25 面试题
高中自我鉴定
2013/12/20 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
Pandas数据类型之category的用法
2021/06/28 Python