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

本文翻译自: Composition in Flutter & Dart

在 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 中,组合函数可以表示如下:

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

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

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

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

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

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

Flutter 中如何使用组合?

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

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

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

组合与管道

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

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

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

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

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

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

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

Example 示例

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

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

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

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

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

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

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

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

Snake case to Pascal case

接下来将从 Snake case 转换成 camel,pascal 和 kebab cases。
函数式编程:Flutter&Dart中的组合

const _pascalCase = 'LoremIpsumDolorSitAmet';

const _snakeCase = 'lorem_ipsum_dolor_sit_amet';

在第 5 行中,定义了_snakeToPascal  函数,它接收一个参数并返回结果。_snakeToPascal由三个小函数组合而成:splitWithUnderscorecapitalizeWords和  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 的情况下不需要将第一个单词大写。capitalizeTailcapitalizeWords类似,但是它忽略了第一个单词处理,匹配了我们的用例。

Snake case to Kebab case

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

Camel case to other cases

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

Kebab case to other cases

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

Pascal case to other cases

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

想法

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

文中源码地址  GitHub

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

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

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

发表评论

相关文章