笨办法学函数式编程:Elm 初体验

翻译自:https://gist.github.com/ohanhi/0d3d83cf3f0d7bbea9db
原作者: Ossi Hanhinen, @ohanhi
翻译:Integ, @integ
爱心支持 Futurice .
授权协议 CC BY 4.0.

前言

不久以前一个好朋友给我安利了 响应式编程(Reactive Programming)。不写 函数式响应编程 简直就是犯罪 -- 很明显函数式方法大幅弥补了响应编程的不足。它如何做到的,我并不知道,所以我决定学一下这些东西。

通过了解自己,我很快发现只有用它解决一些实际的问题,我才能领会它的观念模式。写了这么多年 Javascript,我本来早就可以开始使用 RxJS 的。但再一次,因为我了解自己,并且我发现它会给我太多空间来违背常理。我需要一个强制我用函数式思维来解决任何问题的工具,正在这时 Elm 出现了。

Elm 是什么?

Elm 是一种编程语言,它会被编译为 HTML5: HTML, CSS 和 JavaScript。根据你显示输出结果的不同,它可能是一个内置了对象的 ,或者一个更传统的网页。让我重复一遍,Elm 是一种语言,它会被编译为 三种语言 来构建 web 应用。而且,它是一个拥有强类型和 不可变(immutable)数据结构的函数式语言。

好了,你可以猜到我并不是这个领域的专家,为了防止你走丢,我专门在这篇文章的最后列出了下面的术语解释:附录:术语表.

I. 限制是有益的

我决定尝试使用 Elm 制作一个类似《太空侵略者》的游戏。让我们站在玩家的视角思考一下它是怎么工作的。

  • 在屏幕下部有一艘代表着玩家的飞船

  • 玩家可以通过相应的方向键控制飞船左右移动

  • 玩家可以按向上键发射子弹射击

好了,我们切换到飞船的视角,再来看下

  • 飞船有一个一维的位置坐标

  • 飞船可以获得一个速度(向左或向右)

  • 飞船根据它的速度改变位置

  • 飞船可能被击中

这些基本上给了我一个飞船的数据结构的定义,或者说一个 Elm 术语中的 记录。尽管并非必须,我还是喜欢把它定义为一个 aliases 类型,这样就可以使用 Ship 来表示它的类型了。

type alias Ship =
  { position : Float  -- just 1 degree of freedom (left-right)
  , velocity : Float  -- either 0, 1 or -1
  , shooting : Bool
  }

太棒了,现在让我们创建一个飞船吧。

initShip : Ship   -- this is the type annotation
initShip =
  { position = 0      -- the type is Float
  , velocity = 0      -- Float
  , shooting = False  -- Bool
  }

所以,我们已经到了一个有趣的地步。再看一遍上面的定义,它是一个简单的陈述还是一个函数定义?无所谓!initShip 既可以被认为只是字面量的定义纪录,也可以看作一个永远返回这些纪录的函数。因为函数是纯函数,并且它的数据结构是不可改变的,所以也没有办法区分他们,Wow,cool。

旁注:如果你像我一样,你会思考如果试着重新定义 initShip 会发生什么。好的,会发生一个编译时错误:“命名冲突:只能有一个对 foo 的定义”。

好,我们来开始移动飞船!我记得高中时学过 s = v*dt ,或者说距离等于速度乘以时间差。所以这就是我如何改变我的飞船。在 Elm 中会像下面这样实现。

applyPhysics : Float -> Ship -> Ship
applyPhysics dt ship =
  { ship | position = ship.position + ship.velocity * dt }

类型标记描述了:给出一个 Float 和一个 Ship,我会返回一个 Ship,甚至:给出一个 Float,我会返回 Ship -> Ship。例如,(applyPhysics 16.7) 实际上会返回一个可以传入一个 Ship 参数的函数,并且得到应用了物理方程的飞船作为返回值。这个特性叫做 柯里化 而且所有 Elm 函数自动这样运作。

旁注: 然而,这一切有什么意义呢?好吧,假设我要创建一个由两列数据组成的表格。我知道如何构建它类似“给出一个列表和一个简单的值,从列表中找出匹配的项”或者直接写作 findMatches : List -> Item -> List。但是我需要把一些先前已经知道的列表映射到新的列表中。这就是柯里化伟大的地方:我可以仅仅写出 crossReference = map (findMatches listA) listB 就可以实现了。 (findMatches listA) 是一个 Item -> List 类型的函数,完全就是我们想要的。

现在,回到实际的话题,applyPhysics 创建了一个新的纪录,使用提供的 Ship 作为基础,设置 position 为一些其他的值。这就是 { ship | position = .. } 句法的含义。更多的,请参考 Updating Records

更新飞船的其他两个属性也是类似:

updateVelocity : Float -> Ship -> Ship
updateVelocity newVelocity ship =
  { ship | velocity = newVelocity }

updateShooting : Bool -> Ship -> Ship
updateShooting isShooting ship =
  { ship | shooting = isShooting }

把这些拼在一起,我们就得到了一搜完整的飞船,像下面这样:

-- represents pressing the arrow buttons
-- x and y go from -1 to 1, and stay at 0 if nothing is pressed
type alias Keys = { x : Int, y : Int }

update : Float -> Keys -> Ship -> Ship
update dt keys ship =
  let newVel      = toFloat keys.x  -- `let` defines local variables for `in`
      isShooting  = keys.y > 0
  in  updateVelocity newVel (updateShooting isShooting (applyPhysics dt ship))

现在,假设我只是调用 update 30 次每分钟,传给他距离上次更新的时间差、被按下的键和先前的 ship,我已经有了一个完美的小游戏模型了。除了我看不到任何东西,因为没有进行渲染... 但是理论上它是可行的。

让我们来总结一下目前为止发生了什么。

  • aliases 类型定义了数据模型

  • 所有数据是不可变的

  • 类型标记分清了函数的目标

  • 所有函数都是纯函数的

事实上,这个预览里根本没有办法意外地改变状态。也没有任何循环。

我已经讲了很多关于这个游戏的底层的东西。定义了一个 model 和所有用于更新它的函数。唯一的麻烦是所有函数依赖于飞船的上一次更新。记住,在 Elm 里,任何情况下,你都不能在共享的作用域中保存状态,包括当前的 module -- 没有办法改变任何已经定义过的东西。那么,如何在程序中改变一个状态呢?

II. 状态是 Immutable 曾经的样子

有一些毁三观的事情将要发生了。在面向对象编程中,程序的状态是分散在一些实例中的。这里的 Ship 是算是一个类,而且 myShip 应该是这个类的实例。在程序运行的任何一个时间 myShip 都知道自己的位置和其他属性。但在函数式编程中并不是这样,在程序运行时 initShip 与刚开始时完全一样。为了得到当前的状态,我需要知道过去发生了什么。我需要使用那些事情作为参数传递给已经定义好的函数,只有这样我才能得到 Ship 当前应该处在的状态。这与曾经的玩法完全不同,所以我要详细讲解这个过程。

第一步

在刚开始时 initShip 有一个默认的值: 0, 0, False。还有一些函数可以转换一个 Ship 成为另一个 Ship。详细地说,有个 update 函数,它得到用户输入和一个 ship 返回一个更新过的 ship。我要再写一遍这个函数,所以你不用向上翻页找它了。

update : Float -> Keys -> Ship -> Ship
update dt keys ship =
  let newVel      = toFloat keys.x
      isShooting  = keys.y > 0
  in  updateVelocity newVel (updateShooting isShooting (applyPhysics dt ship))

如果 initShip 是这个 model 初始的状态,至少,我可以向前走一步了。Elm 程序定义了一个 main 函数,整个程序通过它开始运行。所以,首先让我们试着显示 initShip。我引入了 Graphics.Element 库来调用 show 函数。

import Graphics.Element exposing (..)

-- (other code)
main : Element
main = show initShip

这给了我们

{ position = 0, shooting = False, velocity = 0 }

现在,如果我想再前进一步,我可以在显示飞船之前调用一次 update 函数。我试了一下,看到了 keys,所以左右键被按下时已经有效果了(x 是 -1,y 是 1)。

dt = 100
keys = { x = -1, y = 1 }
main = show (update dt keys initShip)

我们有了

{ position = 0, shooting = True, velocity = -1 }

很好!搞定了!按下向上键时我的飞船开始射击了,并且它有一个负的速度说明向左键也被按下了。请注意这时 position 还没有改变。这是因为我定义的更新的顺序是:先应用物理属性,然后才更新其他属性。 initShip 的速度是 0,所以改变物理值并没有移动它。

Signals

现在我希望你拿出一些时间来读一下 Elm-lang 的 Signals,如果你感兴趣,甚至可以看一两个关于 Elm Signals 的视频。从现在开始我假设你已经知道什么是 Signals 了。

再来总结一下:一个 signal 就像一个 stream,在任何一个时间点,都有一个简单的值。所以一个鼠标点击的 signal 的计数永远是一个整数 - 换句话说,它是一个 Signal Int 类型。如果我愿意,我也可以搞一个飞船的 signal: Signal Ship,它可以一直保存着当前的 Ship。但是我需要重构之前所有的函数并记录下那些复杂的值,事实上是那些值的 signals... 所以我听从了来自 Elm-lang.org 的建议:

使用 signals 最常犯的错误是过多的使用它们。它会引诱你用 signals 做任何事情,但在你的代码中尽量不使用它们才是坠吼滴!

所以,我的飞船可以再前进一步,但是它没有那么令人激动了。我想要当我按下向左键时它向左移动,反之亦然。更重要的是,我要按向上键时发射子弹!

事实上我已经用一种伟大的方法构建了我的 models 和逻辑,因为那里正好有个已经搞好的 signal 叫做 fps n, 它更新 n 次每秒。它告诉我们距离上次更新的时间差。这就是我需要的 dt。而且,还有一个内置的 signal 被称作 Keyboard.arrows,它保存了当前的方向键信息跟我定义的 Keys 完全一样。无论何时只要发生变化,这些都会被更新。

好了,为了得到一个有趣的输入 signal,我会不得不联合这两个内置的 signals,以便 “当每次改变 fps 时,检查 Keyboard.arrows 的状态,并报告它们两个的值”。

  • "它们俩" 听起来像一个组合,(Float, Keys)

  • "在每一次更新" 听起来像 Signal.sampleOn

在代码中,这应该是下面这样:

import Time exposing (..)
import Keyboard

-- (other code)
inputSignal : Signal (Float, Keys)
inputSignal =
  let delta = fps 30
      -- map the two signals into a tuple signal
      tuples = Signal.map2 (,) delta Keyboard.arrows
  -- and update `inputSignal` whenever `delta` changes
  in  Signal.sampleOn delta tuples

碉堡了,现在我需要做的是只是接通我的 main 以使得用户输入能真正的被 update 函数获得到。为了实现它,我需要 Signal.foldp,或者想个办法"抱紧过去"。这个跟搞个简单的 fold 差不多:

summed = List.foldl (+) 0 [1,2,3,4,5]

这里我们从 0 开始,然后把它加上 1,再加上 2,以此类推,直到所有的数字被加在一起,最后我们得到返回值为 15。

简单的说,这个很有意义。foldp 一直记录着 "开始时间" 的值,并且整合所有 signal 的过去状态,直到当前这一刻 -- 整个应用完整的过去一步一步迭代到当前的状态。
我的天.. 让我喘口气。好了,至少现在好点了。

无论怎样,让我们看看它在代码中是什么样的。现在,既然我有了 main 函数来更新它的结果,它应该也会在它的类型上反映出来,所以我会用一个 Signal Element 代替之前的 Element

main : Signal Element
main = Signal.map show (Signal.foldp update initShip inputSignal)

这里发生了一些事情:

  1. 我使用 Signal.foldp 来更新 signal,初始值是 initShip

  2. Folding 仍然返回一个 signal,因为它要继续更新 "folded 状态"。

  3. 我使用 Signal.map 把当前的 "folded 状态" 映射到 show 中。

只做这些会导致类型错误,尾部会有下面的报错:

Type mismatch between the following types on line 49, column 38 to 44:

       Temp9243.Ship -> Temp9243.Ship

       Temp9243.Keys

   It is related to the following expression:

       update

呃... 好吧,至少我知道了问题出在哪里。我的函数的类型签名看上去像这样:update : Float -> Keys -> Ship -> Ship。然而,实际上我传给它的参数是 (Float, Keys)Ship。嗯,我只需要稍微修改下函数的签名...

update : (Float, Keys) -> Ship -> Ship
update (dt, keys) ship =
  -- the same as before

... 嗒嗒,搞定了!

我的游戏现在有了一个完整的函数模型,需要的更新和其他任何东西,一共才 50 行代码!完整的代码在这看: game.elm。若想要看它的效果,你可以复制粘贴到 Try Elm 这个交互编辑器中(点击编译按钮按,在右边的屏幕上按下方向键)。

再来总结一下刚才发生了什么:

  • 一个信号是一个时间的函数

    • 每个时间点都对应着一个 signal 纯粹的值

  • Signal.foldp 最后迭代出结果的原理与 List.foldl 一样

  • 程序的每个状态都是明确的起源于所有之前发生的事情

III. 学到了什么

这些尝试让我学到了很多。我希望你也一样能有所收获。我个人的主观感觉是:

  • 类型(Types)的确非常漂亮,而且有用

  • 不可修改的数据结构(Immutability)和对全局状态的限制并没有听起来那么难以接受

  • 函数式编程在 Elm 中非常简洁,可读性很强

  • 函数式编程使输入和输出清晰明确

  • 因为所有的这些关于状态的想法是那么的与众不同,它有些难以掌握,但是它确实很有意义

  • 因为每个状态都是一个输入的直接结果,所以不需要担心那些混合了各种状态的 bug

  • 响应式地监听各种更改, 而不是主动地触发修改,这种感觉很幸福

最后一句:如果你喜欢这篇文章,请把它分享给你的好基友。分享就是真爱!

附录: 术语表

不可变数据(Immutable data) 意思是一旦你给一个东西赋了值,它再也无法改变。拿 JavaScript 的 Array 来举个反例。如果它是不可变的,myArray.push(item) 就无法修改 myArray 已有的值,但它会返回一个新的追加了一个值的数组。

强类型 这种编程语言试图防止不可预知的行为导致的错误发生,例如:把一个字符串赋值为一个整数。当出现类型不匹配时 Scala、Haskell 和 Elm 这些语言使用 静态类型检查 来阻止编译通过。

纯函数(Pure functions) 给相同的输入永远给出相同的输出,而且没有任何副作用的函数。本质上,这些函数绝对不能依赖输入参数之外的任何东西,并且它不能修改任何东西。

函数式编程 特指以纯函数为主要表现形式的一种编程范式。

响应编程(Reactive programming) 概括地说就是组件可以被监听,并且根据事件做出所需要的反应。在 Elm 中,这些可被监听的东西是 signals。使用 signal 的组件知道如何利用它,但是 signal 完全不知道组件或组件们的存在。

你可能感兴趣的:(elm,函数式编程,前端)