初步认识函数式编程中的管道化

52 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第5天,点击查看活动详情

函数式编程能够消除方法链中存在的限制,使得任何函数的组合都更加灵活。

—— 路易斯

我相信应该有相当一部分小伙伴跟我一样,日常开发过程中更多的是面向业务开发,忽略了 “函数式思想”。偶然的看到了一篇关于函数化编程的文章引起了我的兴趣,通过一段时间的研究发现,函数化编程如何可以运用到实际的业务开发过程中的话,可以带来很多超乎想象的价值。

下面我们就跟大家一起来聊一下函数式编程中的重要成员——管道化。

什么是函数式编程

简单来说,函数编程是一种强调以函数使用为主的软件开发风格。

但是这里可能存在一个误区,大家在使用JavaScript进行开发的时候,书写了相当比重的函数,特别是对于使用React或者Vue进行开发的小伙伴来说。但是,日常工作中使用了函数进行开发并不意味着函数式编程。

函数式小例子

为了大家更好的理解函数编程,我们这里来个小例子来看一下。

下面一段代码是伪造的一段输出信息的业务代码

    function printMessage(elementId, format, message) {
        document.querySelector(`${elementId}`).innerHTML = `<${format}>${message}</${format}>`;
    }

这样的代码在企业项目中,面临业务逻辑的愈来愈复杂和团队成员的流动性,最终会演变为 “代码屎山”。 下面我们就用伪代码来演示一下函数式编程:

    const printMessage = run(print, addToDom('msg'));
    
    printMessage('Hello World!');

管道化

上面的例子中,其实就是使用了管道化的思想。

通俗点来讲,管道其实就是松散结合的有向函数序列,上一个函数的输出会作为下一个函数的输入。

image.png

可能大家对上面的图还无法清楚的理解管道到底是什么,那么我们就以经典的gulp为例子来详细说一下。

使用过自动化构建工具——gulp的小伙伴对下面的代码应该感到很熟悉。

    gulp.task('parse', function(cb) { 
        // 做一些事 -- 异步的或者其他的 cb(err); 
        // 如果 err 不是 null 或 undefined,则会停止执行,且注意,这样代表执行失败了 
    }); 

    // 定义一个所依赖的 task 必须在这个 task 执行之前完成 
    gulp.task('compiler', ['parse'], function() { 
        // 'one' 完成后 
    }); 

    gulp.task('build', ['parse', 'compiler']);

每次执行 npm run build 命令的时候,都会依次的执行 parse、compiler。对于相同的输入,会按照设定好的管道流程依次执行,同时会产生一致的输出。

当然,这一点其实是函数式编程的另一个特性——纯函数。

结束语

好了,有关函数化编程的管道化我们就先聊到这里,相信大家已经对函数化编程的管道化有了个初步的了解。如果大家觉得有什么不足或者想要了解的,可以在下方留言交流。