zoukankan      html  css  js  c++  java
  • [Elm] Functions in Elm

    Functions are an important building block in Elm. In this lesson we will review stateless functions, function composition, anonymous functions, Currying, and more.

    Write Pure function:

    import Htrml exposing (text)
    
    main = 
        view "Hello World"
    
    view message = 
        text message

    We created a function call 'view', and pass the value ("Hello World") to 'message' param.

    And inside view function, we output message value.

    Add type:

    import Htrml exposing (text)
    
    main = 
        view "Hello World"
    
    view: String -> Html msg
    view message = 
        text message

    For view function, we add ':String' to say the input value should be a string type.

    If we change type to "Int":

    It will output the error message on the screen.

    Function execute from inside to outside:

    import Html exposing (Html, text)
    import String
    
    main = 
     view "Hello World!!!"
    
    view: String -> Html msg
    view message =
     text (String.repeat 3((String.toUpper message)))

    Output:

    HELLO WORLD!!!HELLO WORLD!!!HELLO WORLD!!!

    Forward:

    import Html exposing (Html, text)
    import String
    
    main = 
     view "Hello World!!!"
    
    view: String -> Html msg
    view message =
     --text (String.repeat 3((String.toUpper message)))
     message
      |> String.toUpper
      |> String.repeat 3
      |> text

    '|>' fowards symbol, so the message will go thought 'toUpper' --> 'repeat 3' --> text.

    The 'repeat 3': Since we only provide the first value, it returns a function instead of a value. When two upper is evaluated, the message is being passed in. Finally, a value is returned and passed to the next line. This is known as currying. 

    Then later, we can provide the rest of the parameters. This really helps us to build new functions from others.

    For example, let's replace repeat with a function of our own creation called triple.

    import Html exposing (Html, text)
    import String
    
    main = 
     view "Hello World!!!"
    
    triple: String -> String
    triple =
     -- repeat : Int --> String -> String  repeat function take int and string param and return string
     String.repeat 3
    
    view: String -> Html msg
    view message =
     --text (String.repeat 3((String.toUpper message)))
     message
      |> String.toUpper
      |> triple
      |> text

    Let's add an anonymous function to add a comma and a space between each repetition. Anonymous functions begin with a back slash. 

    We define str to take the value being passed in from the previous line. We use the double plus or string concatenation operator to add a comma and a space.

    import Html exposing (Html, text)
    import String
    
    main =
     view "Hello World"
    
    triple: String -> String
    triple =
     -- repeat : Int --> String -> String  repeat function take int and string param and return string
     String.repeat 3
    
    view: String -> Html msg
    view message =
     --text (String.repeat 3((String.toUpper message)))
     message
      |> String.toUpper
      |> str -> str ++ ", "
      |> triple
      |> text
  • 相关阅读:
    【前端优化之拆分CSS】前端三剑客的分分合合
    ipad&mobile通用webapp框架前哨战
    如何判断一个DOM元素正在动画,一个CSS“阻塞”JS的例子
    关于前端框架升级与全站样式替换的简单建议
    【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
    【HTML5&CSS3进阶03】Jser与Csser如何一起愉快的翻新老组件
    【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局
    【HTML5&CSS3进阶学习01】气泡组件的实现
    【模块化编程】理解requireJS-实现一个简单的模块加载器
    【小贴士】探一探javascript中的replace
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6126472.html
Copyright © 2011-2022 走看看