函数式编程：Flutter&Dart中的组合

本文翻译自: Composition in Flutter & Dart

在 Flutter & Dart 中使用组合创建模块化应用程序。

什么是组合？

在dictionary.com 中 composition 的定义为：将部分或者元素组合成一个整体的行为。简单说，组合就像堆乐高积木，我们可以将积木组合成一个结构。

在 FP 中，我们定义了一个简单的通用函数，该函数可以通过组合构成一个复杂的函数，一个函数的输出是另外一个函数的输入，依此类推。输入从一个函数传递到另外一个函数最后返回结果。因此，组合可以认为是数据流动的管道。

组合的数字符号是 f.g。 f(g(x))它从里向外执行。

1. 首先 x 初始化。
2. 将 x 作为参数传递给 g，g(x)被初始化。
3. g(x)被计算并将结果传递给 f 函数，最后 f(g(x))被计算。

在 Dart 中，组合函数可以表示如下：

Compose 是个高阶函数，它接收两个函数并返回一个可接收输入的函数。 组合的执行顺序是从右到左，因此g先执行，然后再执行f。

如上图创建了函数shout,它由两个较小的功能函数toUpper和exclaim组成。

第 4 行，组合这两个函数创建shout函数.

第 8 行使用了包Dartz中提供的函数composeF。

Flutter 中如何使用组合？

Flutter 框架是展示组合功能的最佳示例之一，我们组合控件来进行UI设计。比如你想设置 padding,可以用Padding来组合，你想设置一些装饰，可以用DecoratedBox来进行组合等等。

Flutter 大量使用了组合。控件树就是我们用组合处理 UI 的结果.控件就像乐高积木，小的通用控件可以被组合成复杂的控件或者用户界面。比如，Container就包含了几个控件，如Padding, DecoratedBox, Align, LimitedBox等。

这里偏重介绍组合在实践中应用让读者更深刻理解组合概念，本质上来说Flutter中的控件组合与函数式编程中的组合还是有点区别，两则编程范式不一样，Flutter 控件间组合偏重于面向对象编程，对象是基本单元，控件都是对象；而函数的组合偏重于函数式编程，无状态函数是基本单元。

组合与管道

与 compose 类似，这里介绍另外一个概念：管道。两者区别在于组合执行顺序是从右到左，而管道执行顺序是从左至右。

这个区别尤为重要，不要忽视，它间接影响到代码可读性。中国人的阅读习惯是从左到右的，如果你是阿拉伯人可以忽略我说的，哈哈！

在第 14 行，使用了 compose，它的执行顺序是从右至左，函数 g 首先执行，结果传递给 f 。

在第 17 行，使用了管道，它的执行顺序是从左至右，函数 f 先执行，结果传递给 g 。

如果使用 compose,输入 10 先执行increment 增加到 11 然后乘以 2，因此执行结果是 22.

如果使用管道，输入 10 先执行doubler乘以 2 变成 20，然后执行increment递增到 21 并返回。

Example 示例

结合所学的概念，我们可以创建几个函数，实现字符串的变换。

我们需要可以将上述用例相互转换的函数。

就像乐高游戏一样，首先需要乐高积木，在这个例子中我们需要具有一些基础功能的函数。

之前定义的 Compose 函数只接收两个函数作为参数，现在定义一个可以接收 n 个参数的函数。

我们创建了如上代码，接下来可以用它来实现更有意思的函数，这些函数将被使用，通过Github 仓库查找更多信息。

Snake case to Pascal case

接下来将从 Snake case 转换成 camel,pascal 和 kebab cases。

const _pascalCase = 'LoremIpsumDolorSitAmet';

const _snakeCase = 'lorem_ipsum_dolor_sit_amet';

在第 5 行中，定义了_snakeToPascal  函数，它接收一个参数并返回结果。_snakeToPascal由三个小函数组合而成：splitWithUnderscore, capitalizeWords和  joinWithoutSpace 。将“lorem_ipsum_dolor_sit_amet”作为参数传入函数中，compose 是从右至左的执行顺序。因此：

1. 首先输入字符串先传给splitWithUnderscore，该函数将输入拆分成 [“lorem”, “ipsum”, “dolor”, “sit”, “amet”]。

2. splitWithUnderscore的返回值是一个数组，它将被传递给第二个函数，即capitalizeWords将每个元素的首字母转换成大写并返回列表 [“Lorem”, “Ipsum”, “Dolor”, “Sit”, “Amet”]。

3. capitalizeWords的返回结果将被传递给  joinWithoutSpace，该函数将元素连接在一起并返回结果 “LoremIpsumDolorSitAmet”

还记得我们之前讲的么？ 我们通过组合为数据定义一个管道，像上面这样。数据流通过这些管道并返回结果，花些时间来构建一些基础功能函数，组合他们生成更有意义的函数就变得很容易了。

Snake case to Camel case

const _snakeCase = 'lorem_ipsum_dolor_sit_amet';

const _camelCase = 'loremIpsumDolorSitAmet';

第 15 行_snakeToCamel非常简单，第一个与最后一个函数都是与上面转换都是相同的：splitWithUnderscore  和  joinWithoutSpace，将中间函数从capitalizeWords  修改为  capitalizeTail，我们的功能就实现了。原因是 camelCase 的情况下不需要将第一个单词大写。capitalizeTail与capitalizeWords类似，但是它忽略了第一个单词处理，匹配了我们的用例。

Snake case to Kebab case

Snake case 转换成 kebab case 更简单.只需要组合两个函数 (splitWithUnderscore & joinWithHyphen),就可以完成任务。

Camel case to other cases

Kebab case to other cases

Pascal case to other cases

想法

我喜欢将组合视为一种分治技术。组合的主要优点是得到高复用和可定制功能。

文中源码地址  GitHub

太棒了!鼓励自己坚持到底。我希望我为你投入的时间增加了一些价值。

如果觉得文章对你有帮助，点赞、收藏、关注、评论，一键四连支持，你的支持就是我创作最大的动力。

️ 本文原创听蝉 公众号：码里特别有禅 欢迎关注原创技术文章第一时间推送 ️