本文翻译自: Composition in Flutter & Dart
在 Flutter & Dart 中使用组合创建模块化应用程序。
image.png
什么是组合？
在dictionary.com 中 composition 的定义为：将部分或者元素组合成一个整体的行为。简单说，组合就像堆乐高积木，我们可以将积木组合成一个结构。
在 FP 中，我们定义了一个简单的通用函数，该函数可以通过组合构成一个复杂的函数，一个函数的输出是另外一个函数的输入，依此类推。输入从一个函数传递到另外一个函数最后返回结果。因此，组合可以认为是数据流动的管道。
组合的数字符号是 f.g。 f(g(x))它从里向外执行。
- 首先 x 初始化。
- 将 x 作为参数传递给 g，g(x)被初始化。
- g(x)被计算并将结果传递给 f 函数，最后 f(g(x))被计算。
在 Dart 中，组合函数可以表示如下：
image.png
Compose 是个高阶函数，它接收两个函数并返回一个可接收输入的函数。 组合的执行顺序是从右到左，因此g先执行，然后再执行f。
image.png
如上图创建了函数shout,它由两个较小的功能函数toUpper和exclaim组成。
第 4 行，组合这两个函数创建shout函数.
第 8 行使用了包Dartz中提供的函数composeF。
Flutter 中如何使用组合？
Flutter 框架是展示组合功能的最佳示例之一，我们组合控件来进行UI设计。比如你想设置 padding,可以用Padding来组合，你想设置一些装饰，可以用DecoratedBox来进行组合等等。
Flutter 大量使用了组合。控件树就是我们用组合处理 UI 的结果.控件就像乐高积木，小的通用控件可以被组合成复杂的控件或者用户界面。比如，Container就包含了几个控件，如Padding, DecoratedBox, Align, LimitedBox等。
这里偏重介绍组合在实践中应用让读者更深刻理解组合概念，本质上来说Flutter中的控件组合与函数式编程中的组合还是有点区别，两则编程范式不一样，Flutter 控件间组合偏重于面向对象编程，对象是基本单元，控件都是对象；而函数的组合偏重于函数式编程，无状态函数是基本单元。
组合与管道
与 compose 类似，这里介绍另外一个概念：管道。两者区别在于组合执行顺序是从右到左，而管道执行顺序是从左至右。
这个区别尤为重要，不要忽视，它间接影响到代码可读性。中国人的阅读习惯是从左到右的，如果你是阿拉伯人可以忽略我说的，哈哈！
image.png
在第 14 行，使用了 compose，它的执行顺序是从右至左，函数 g 首先执行，结果传递给 f 。
在第 17 行，使用了管道，它的执行顺序是从左至右，函数 f 先执行，结果传递给 g 。
如果使用 compose,输入 10 先执行increment 增加到 11 然后乘以 2，因此执行结果是 22.
如果使用管道，输入 10 先执行doubler乘以 2 变成 20，然后执行increment递增到 21 并返回。
Example 示例
结合所学的概念，我们可以创建几个函数，实现字符串的变换。
image.png
我们需要可以将上述用例相互转换的函数。
就像乐高游戏一样，首先需要乐高积木，在这个例子中我们需要具有一些基础功能的函数。
image.png
之前定义的 Compose 函数只接收两个函数作为参数，现在定义一个可以接收 n 个参数的函数。
image.png
我们创建了如上代码，接下来可以用它来实现更有意思的函数，这些函数将被使用，通过Github 仓库查找更多信息。
Snake case to Pascal case
接下来将从 Snake case 转换成 camel,pascal 和 kebab cases。
image.png
const _pascalCase = 'LoremIpsumDolorSitAmet';
const _snakeCase = 'lorem_ipsum_dolor_sit_amet';
在第 5 行中，定义了_snakeToPascal 函数，它接收一个参数并返回结果。_snakeToPascal由三个小函数组合而成：splitWithUnderscore, capitalizeWords和 joinWithoutSpace 。将“lorem_ipsum_dolor_sit_amet”作为参数传入函数中，compose 是从右至左的执行顺序。因此：
-
首先输入字符串先传给
splitWithUnderscore，该函数将输入拆分成 [“lorem”, “ipsum”, “dolor”, “sit”, “amet”]。 -
splitWithUnderscore的返回值是一个数组，它将被传递给第二个函数，即capitalizeWords将每个元素的首字母转换成大写并返回列表 [“Lorem”, “Ipsum”, “Dolor”, “Sit”, “Amet”]。 -
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
image.png
Kebab case to other cases
image.png
Pascal case to other cases
image.png
想法
我喜欢将组合视为一种分治技术。组合的主要优点是得到高复用和可定制功能。
文中源码地址 GitHub
太棒了!鼓励自己坚持到底。我希望我为你投入的时间增加了一些价值。
如果觉得文章对你有帮助，点赞、收藏、关注、评论，一键四连支持，你的支持就是我创作最大的动力。
❤️ 本文原创听蝉 公众号：码里特别有禅 欢迎关注原创技术文章第一时间推送 ❤️
网友评论