JavaScript中的Pipe

JavaScript中的Pipe

本文会介绍Pipe在函数式编程中的基本概念，怎么用Pipe让我们的代码变得更美好，以及新的pipe操作符，Fancy的东西在后面！
什么是Pipe？
先用一个最简单的例子来看一下什么是pipe，现在我们有两个最简单的函数addOne和addTwo，分别对于参数加一和加二：

const addOne = x => x + 1
const addTwo = x => x + 2

现在我们想让一个参数通过第一个函数之后再通过第二个函数，最直接最简单的方法是：

addTwo(addOne(1)) // 4

我们来写一个简单的pipe函数，它返回一个新的函数，来达到我们上面的目的：

const pipe = (func1, func2) => x => func2(func1(x))
 
const addThree = pipe(
  addOne,
  addTwo
)
 
addThree(1) // 4

嗯，现在还看不出来什么好处，但是当我们要经过的Transform越来越多的时候，这样的好处就会越来越明显：

const addTen = pipe(
  addOne,
  addTwo,
  addThree,
  addFour
)

所以我们需要一个更牛逼的pipe函数，它可以接受任意数量的参数，并从第一个开始，依次接受原始数值，输出值传递给下一个函数。等等，我们好像想到了什么，遍历一个数组，把输出值当作下一个的输入，怎么听着都和reduce很像。所以，直接用Array.prototype.reduce就可以写一个简单的pipe函数：

const pipe = ...args => x => 
  args.reduce(
    (outputValue, currentFunction) => currentFunction(outputValue),
    x
  )

• 为什么要用Pipe

Pipe让我们将一些小功能随意的拼凑组合在一起，组成我们自己需要的功能。还记得React中的High Order Component（HOC）吗？越来越多的插件开始让你使用HOC，比如我经常遇到类似下面的代码：

// 没有pipe，function hell...
withRouter(
  withTitle('Awesome title')(
    translate('translations')(
      connect(mapStateToProps, mapDispatchToProps)(
        Container
      )
    )
  )
)
 
// 使用pipe
pipe(
  connect(mapStateToProps, mapDispatchToProps),
  translate('translations'),
  withTitle('Awesome title'),
  withRouter
)(Container)
 
// 使用pipe组成你需要的pattern
const withGeneralContainerProps = pipe(
  connect(mapStateToProps, mapDispatchToProps),
  translate('translations'),
  withTitle('Awesome title'),
  withRouter
)
 
withGeneralContainerProps(Container)

• Pipe和Prototype

在JavaScript中，经常有通过prototype进行的链式操作，一般来说这种代码如果在项目中看到还是挺喜闻乐见的，感觉代码还是比较干净，比如：

[1, 2, 3, 3, 5]
  .map(i => i * 2)
  .filter(i => i !== 10)
  .reduce((acc, cur) => acc + cur)

但同时，基于prototype的这种链式操作是很难扩展的，比如我们想在上面的代码中间加一个新的操作符uniq，去除重复值：

// 臣妾做不到。。。因为没有Array.prototype.uniq。。。
[1, 2, 3, 3, 5]
  .map(i => i * 2)
  .uniq()
  .filter(i => i !== 10)
  .reduce((acc, cur) => acc + cur)
 
// 有一种办法是在之前的某个地方改变prototype, 但你真的想这么做么？
Array.prototype.uniq = function () {
  return Array.from(new Set(this))
}

不过如果我们把每个小函数拆开来，使用pipe，在保持代码清晰的同时，扩展性得到了巨大的提升，比如下面的写法：

import * as R from 'ramda'
 
R.pipe(
  R.map(i => i * 2),
  R.uniq,
  R.filter(i => i !== 10),
  R.reduce(R.add, 0)
)([1, 2, 3, 3, 5])

更多关于Ramda可以参考Github或文档。同时要提一下的是，这也是为什么rxjs现在全改成了用pipe，而不使用prototype的原因。

等等，也许你并不需要Pipe？
刚才我们所做的其实都是在用functional programming的方式去写JavaScript，更彻底更优雅的解决方式，可能是在语法上的改变。Proposal-pipeline-operator已经在JavaScript中社区提出来一段时间了，但是具体方案还有分歧，可以去看Github Issue，这里我们就不说太多了，但是就算是基础版本的方案，个人觉得也是非常大的便利，而且如果你在用Babel，今天就可以开始使用。

按照Babel文档添加插件，proposal先用minimal就好，等你弄清楚别的可以再尝试：

{
  "plugins": [["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]]
}

还是上面的例子：

import * as R from 'ramda'
 
[1, 2, 3, 4, 5]
  |> R.map(i => i * 2)
  |> R.uniq
  |> R.filter(i => i !== 10)
  |> R.reduce(R.add, 0)
  // 是的，我们还可以写arrow function,
  |> (_ => 'done, result is ' + _)
  |> console.log

或者是React的例子：

Container
  |> connect(mapStateToProps, mapDispatchToProps)
  |> translate('translations')
  |> withTitle('Awesome title')
  |> withRouter

哇塞，看的真是有点爽，JavaScript什么时候加一下Pattern match...简单说来

a |> b // b(a)

在Elixir，Ocaml等等的函数式语言中其实一直都有，而且社区对于怎么支持async function还有两个不同的提案，感兴趣的同学们都可以去尝试。

虽然只是写法上的不同，但是我相信这个改变的影响还是会比较深远的，语言的不同会慢慢导致大家思考问题的方式有细微的差异，期待这个提案尽快确定下来～

React都用Hook了，还要什么Class ！

小编是一个有着5年工作经验的前端开发工程师，关于前端编程，自己有做材料的整合，一个完整的前端编程学习路线，学习材料和工具，＋我的威信收取，免费送给tanzhou-10838大家，希望你也能凭着自己的努力，成为下一个优秀的程序员。
————————————————
版权声明：本文为CSDN博主「程序员一木」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/tzllxya/article/details/90702581