vanfs下载vanfs源代码下载

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

范夫

？范夫

 import van from "vanjs-core"

const { a , p , div , li , ul } = van . tags
// Reusable components can be just pure vanilla JavaScript functions.
// Here we capitalize the first letter to follow React conventions.
const Hello =
    ( ) =>
        div (
            p ( "Hello" ) ,
            ul (
                li ( "?️World" ) ,
                li ( a ( { href : "https://vanjs.org/" } , "?VanJS" ) ) ,
            ) ,
        )

van . add ( document . body , Hello ( ) )

尝试JSFIDDLE

VANFS是Vanjs一对一直接绑定的F＃项目模板

f＃中的vanfs代码

 module HelloApp
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add

let a : Tag = tags?a
let p : Tag = tags?p
let div : Tag = tags?div
let ul : Tag = tags?ul
let li : Tag = tags?li

let Hello =
    fun _ ->
        div [
            p [ " Hello " ]
            ul [
                li [ " ?️World " ]
                li [ a [{| href = " https://vanjs.org/ " |}; " ?VanJS " ]]
            ]
        ]

add [ document.body ; Hello ()]
|> ignore

演示

https://codepen.io/kentechgeek/pen/vwnovox

 let Greeting : Tag =
    fun list ->
        let name : string = list [ 0 ]? name
        div [ $ " Hello {name}! " ]

add [ document.body ; Greeting [{| name = " Ken " |}]]
|> ignore

 const Greeting : Component < { name : string } > =
    ( { name } ) => 
        < div > Hello { name } ! </ div > ;

render ( ( ) => < Greeting name = "Ken" /> , document . body ) ;

为什么Vanjs基于Vanilla JavaScript

VANFS项目包括一些打字稿代码。

1。范夫的内部机制

https://github.com/ken-okabe/vanfs/blob/main/van-api/ts/basic.ts

TS代码是为了使用JS代理转换的目的：

 // unary function ([a,b,c,...]) in F#  
// -> n-ary function (a,b,c,...) in VanJS

这是在van-api目录下，这是必不可少的，我们不想将其修改以保持工作的工作。

2。对于样式和Web组件

用户必须安装任何必需的CSS或Web组件。

Vanjs不提供特定的安装支持Beause这只是Vanillajs。

另一方面， vanfs阐明了以下分步过程：

入门

CSS

我们需要自定义或导入的所有内容都位于Web-Imports目录下。

 import {
    provideFluentDesignSystem ,
    fluentCard ,
    fluentCheckbox
} from "@fluentui/web-components" ;

provideFluentDesignSystem ( )
    . register (
        fluentCard ( )
    ) ;

provideFluentDesignSystem ( )
    . register (
        fluentCheckbox ( )
    ) ;

/web-imports/css-urls.ts

 export let cssURLs = [
 "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
] ;

无论如何，使用寓言和vite将VANFS项目中的所有必需代码汇编为单个Vanillajs捆绑包。

为什么我们应该避免使用打字稿并迁移到F＃

 let bindT = < A , B >
    ( monadf : ( a : A ) => Timeline < B > ) =>
    ( timelineA : Timeline < A > ) : Timeline < B > => {
        let timelineB = monadf ( timelineA . lastVal ) ;
        let newFn = ( a : A ) => {
            nextT ( monadf ( a ) . lastVal ) ( timelineB ) ;
            return undefined ;
        } ;
        timelineA . lastFns = timelineA . lastFns . concat ( [ newFn ] ) ;
        return timelineB ;
    } ;

在TypeScript中，与Legacy JavaScript相比，需要一个额外的步骤将类型签名添加到所有变量，函数和参数中。这通常是压倒性的。

 let bindT =
    fun monadf timelineA ->
        let timelineB = timelineA.lastVal |> monadf
        let newFn =
            fun a ->
                timelineB
                |> nextT ( a |> monadf ) .lastVal
                |> ignore
        timelineA.lastFns <- timelineA.lastFns @ [ newFn ]
        timelineB

F＃代码比打字稿代码更干净，更可读。

在F＃中，由于其功能强大的推断，我们很少需要手动添加类型。这使得F＃开发与旧版JavaScript编码相似。

实际上，它不仅仅是这样。

尽管程序员可能想定义构成其代码骨干的基本对象类型，但在其他地方，如果F＃编译器警告了需要手动类型注释的需求，通常是错误的。

在F＃中，如果编译器无法推断这种类型，通常表明可能存在数学上的不一致。

在打字稿中，如果编译器无法推断该类型，则通常会在其类型推理功能中提出限制。这使得难以确定问题的确切原因。

结果，F＃程序员自然会在数学上写入一致和严格的代码。不幸的是，这种好处在打字稿中很少发生。

f＃作为ALTJ：与打字稿的比较

F＃通常被认为是在.NET框架上运行的，但是就像将TypeScript汇编为JavaScript一样，F＃也被编译为JavaScript。

打字稿 - > JavaScript
F＃ - > JavaScript

更确切地说

typescirpt
⬇在node.js上运行的打字稿编译器（ npx tsc ）
JavaScript在浏览器中运行

F＃
⬇寓言编译器在.NET上运行（ dotnet fable ）
JavaScript在浏览器中运行

因此， vanfs的骨干是寓言。

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

入门

构建VANFS项目模板

先决条件

.NET SDK
Node.js和NPM CLI或替代方案（BUN / DENO / YARN等）

如果您是F＃并使用VSCODE的新手，请在VSCODE上读取F＃设置。

VANFS/寓言项目是F＃.NET项目和NPM项目的混合体。

请参阅寓言设置文件

快速开始

git clone https://github.com/ken-okabe/vanfs
cd vanfs
dotnet restore  # .NET project setup
dotnet tool restore
npm i           #  npm project setup

 body {
    font-family : sans-serif;
    padding : 1 em ;
    background-color : beige;
  }

演示

https://codepen.io/kentechgeek/pen/zyxqyxz

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

网络组件

Web组件

VANF可以利用由设计系统提供的Web组件提供的自定义HTML标签：Microsoft Fluent，Google材料设计等。

流利

 import {
    provideFluentDesignSystem ,
    fluentCard ,
    fluentCheckbox
} from "@fluentui/web-components" ;

provideFluentDesignSystem ( )
    . register (
        fluentCard ( )
    ) ;

provideFluentDesignSystem ( )
    . register (
        fluentCheckbox ( )
    ) ;

一些Web组件使用CSS

 body {
    font-family : sans-serif;
    padding : 1 em ;
    background-color : beige;
  }

. custom {
    --card-width : 200 px ;
    --card-height : 150 px ;
    padding : 22 px ;
  }

使用`Program.fs`的Web组件

program.fs

 module WebComponentsApp
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add

let br : Tag = tags?br

// Define the fluent-card and fluent-checkbox tags
let fluentCard : Tag = tags? `` fluent-card ``
let fluentCheckbox : Tag = tags? `` fluent-checkbox ``

let List =
    fun _ ->
        fluentCard [
            {| `` class `` = " custom " |}
            // class is a reserved word in F#
            // so we use backticks to escape it
            fluentCheckbox [ " Did you check this? " ]
            br []
            fluentCheckbox [{| `` checked `` = true ; disabled = true |}; " Is this disabled? " ]
            br []
            fluentCheckbox [{| `` checked `` = true |}; " Checked by default? " ]
        ]

add [ document.body ; List ()]
|> ignore

清洁寓言项目并再次编译

进行重大更改后，有时需要清洁寓言项目。

dotnet fable clean

dotnet fable watch

Vite的实时预览

npx vite

 import '@material/web/textfield/filled-text-field.js' ;
import '@material/web/button/text-button.js' ;
import '@material/web/button/outlined-button.js' ;

/web-imports/custom.css

. custom3 {
    --card-width : 460 px ;
    --card-height : 150 px ;
    padding : 20 px ;
  }

. row {
  align-items : flex-start;
  display : flex;
  flex-wrap : wrap;
  gap : 16 px ;
}

. buttons {
  justify-content : flex-end;
  padding : 16 px ;
}

md-filled-text-field ,
md-outlined-text-field {
  width : 200 px ;
}

program.fs

 module MaterialUI
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add

let div : Tag = tags?div
let form : Tag = tags?form

let fluentCard : Tag = tags? `` fluent-card ``
let mdFilledTextField : Tag = tags? `` md-filled-text-field ``
let mdTextButton : Tag = tags? `` md-text-button ``
let mdOutlinedButton : Tag = tags? `` md-outlined-button ``

let Form =
    fun _ ->
        fluentCard [
            {| `` class `` = " custom3 " |}
            form [
                div [
                    {| `` class `` = " row " |}
                    mdFilledTextField [
                        {|
                        label = " First name "
                        name = " first-name "
                        required = " "
                        autocomplete = " given-name "
                        |}
                    ]
                    mdFilledTextField [
                        {|
                        label = " Last name "
                        name = " last-name "
                        required = " "
                        autocomplete = " family-name "
                        |}
                    ]
                ]
                div [
                    {| `` class `` = " row buttons " |}
                    mdTextButton [
                        {| `` type `` = " reset " |}
                        " Reset "
                    ]
                    mdOutlinedButton [
                        {| `` type `` = " submit " |}
                        " Submit "
                    ]
                ]
            ]
        ]

add [ document.body ; Form ()]
|> ignore

用Vite构建

npx vite build

演示

https://codepen.io/kentechgeek/pen/kkylwgn?editors=1111

 import '@material/web/icon/icon.js' ;
import '@material/web/iconbutton/icon-button.js' ;

材料Web组件使用Google字体/图标

https://m3.material.io/styles/icons/overview

 export let cssURLs = [
 "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
] ;

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

frp

⚡️功能反应性编程（FRP）

（1：1组成UIS） + Micro FRP

Vanfs被描述为

1：1从f＃到vanjs的绑定（无反应/jsx的微型反应性UI框架） + webcomponents + micro frp

或者

VANFS是Vanjs一对一直接绑定的F＃项目模板

1：1绑定在组成UI的基本功能的范围内是绝对正确的，但对其州管理的案例不是一个案例。

vanjs是一个包含反应性编程的框架

Vanjs反应地将其状态对象与相应的DOM元素结合。这意味着，当状态对象更新时，相应的DOM元素也会自动更新。这种方法是声明性的UI库（例如React，SolidJs和Ett）中的共同特征。

这是相同的结构：

$$ lista〜〜 * 〜〜函数 Quad rightarrow Quad ListB $$

$$ listb quad = Quad Lista〜〜 * 〜〜函数$$

所以，这是FRP。

功能反应性编程（FRP）是一种编程范式，使用数学表达式（特别是二进制操作）作为实施反应性编程的手段。

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

时间表

⏱️时间表

时间轴是一个从根本上独立的FRP库，对Vanjs或F＃异步功能没有依赖性。代码库是大约30-40行代码的紧凑型纯函数实现。

？类型

`Timeline<'a>`

record Timeline < 'a >
  val mutable lastVal : 'a
  val el : StateElement < 'a >

场地	描述	Van.State
`lastVal`	时间轴的最后值	`State.val`
`el`	时间轴的反应性DOM元素	`State`

？功能

①功能初始化`Timeline<'a>`

`Timeline`

'a -> Timeline < 'a >

vanjs

 let counter = van . state ( 0 ) ;

console . log ( counter . val ) ;
// 0

范夫

 let counter = Timeline 0

console.log counter.lastVal
// 0

将Timeline视为值的特定容器，类似于电子表格应用中的单元格。

 let double = fun a -> a * 2

let timelineA = Timeline 1

let timelineB =
    timelineA |> mapT double

console.log timelineB.lastVal
// 2

此二进制操作的代码简单地对应于电子表格应用的基本用法

这是相同的结构：

$$ listb quad = Quad Lista Quad Triangleright list.map Quad double $$

 let double = a => a * 2 ;

let arrayA = [ 1 ] ;

let arrayB =
    arrayA . map ( double ) ;

console . log ( arrayB ) ;
// [2]

 let double =
    fun a -> a * 2

let listA = [ 1 ]

let listB =
    listA |> List.map double

console.log listB
// [2]

我们可以认识到阵列[2]与电子表格的单元格和值2相同。但是，随着时间表的变化，电子表格和时间表保持double关系。

③功能更新`Timeline<'a>`

$$ Timelinea Quad Triangleright Nextt Quad NewValue Quad rightarrow Quad Timelinea'$$

`nextT`

'a -> Timeline < 'a > -> Timeline < 'a >

$$ Timelinea' Quad = Quad Timelinea Quad Triangleright Nextt Quad NewValue $$

 let timelineA ' =
    timelineA |> nextT 3

或者，在大多数情况下，我们不需要另一个timelineA'而要丢弃它，因此只需ignore返回的值即可。

 let timelineA = Timeline 1

timelineA
|> nextT 3
|> ignore

console.log timelineA.lastVal
// 3

 let double = fun a -> a * 2

// ① initialize timelineA
let timelineA = Timeline 1

// confirm the lastVal of timelineA
console.log timelineA.lastVal
// 1

// ② the binary operation
let timelineB =
    timelineA |> mapT double

// confirm the lastVal of timelineB
console.log timelineB.lastVal
// 2

//=====================================
// ③ update the lastVal of timelineA
timelineA
|> nextT 3
|> ignore
// update to timelineA will trigger
//   a reactive update of timelineB

// confirm the lastVal of timelineA & timelineB
console.log timelineA.lastVal
// 3
console.log timelineB.lastVal
// 6

计数器应用程序

vanjs

 import van from "vanjs-core"

const { button , div , h2 } = van . tags

const Counter =
    ( ) => {
        const counter = van . state ( 0 )

        van . derive ( ( ) =>
            console . log ( `Counter: ${ counter . val } ` ) )

        return div (
            h2 ( "❤️ " , counter ) ,
            button (
                {
                    onclick : ( ) => ++ counter . val
                } ,
                "?"
            ) ,
            button (
                {
                    onclick : ( ) => -- counter . val
                } ,
                "?"
            ) ,
        )
    }

van . add ( document . body , Counter ( ) )

范夫

program.fs

 module CounterApp

open Browser
open Browser. Types
open Fable. Core . JsInterop

open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline

let div : Tag = tags?div
let h2 : Tag = tags?h2
let icon : Tag = tags? `` md-icon ``
let iconButton : Tag = tags? `` md-icon-button ``

let Counter =
    fun _ ->
        let counter = Timeline 0 // ① initialize an Timeline

        counter // ② the binary operation of the Timeline
        |> mapT ( fun value ->
                     console.log $ " Counter: {value} " )
        |> ignore
        // ignore the return value of `console.log`

        div [
            h2 [ " ❤️ " ; counter.el ] // ? `counter.el`
            iconButton [           // for Reactive DOM element
                {| onclick = fun _ ->
                                counter // ③ update the Timeline
                                |> nextT ( counter.lastVal + 1 )
                |}
                icon [ " thumb_up " ]
            ]
            iconButton [
                {| onclick = fun _ ->
                                counter // ③ update the Timeline
                                |> nextT ( counter.lastVal - 1 )
                |}
                icon [ " thumb_down " ]
            ]
        ]

add [ document.body ; Counter ()]
|> ignore

演示

https://codepen.io/kentechgeek/pen/goyqnqb?editors=1111

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

无效

⏱️无效类型

什么是空？

鉴于无效在现代软件开发中的重要意义，我专门介绍了一篇文章来探索其关键概念和收益。

什么是零，无效和选项类型？

F＃中的无效类型

f＃中的无效价值类型

无效的值类型Nullable<'T>表示也可能为null的任何结构类型。当与库和组件进行交互时，这很有帮助，这些库和组件可能会出于效率原因选择以null原因来表示这些类型，例如整数。支持该构造的基础类型是系统的。

只能代表struct类型，哪个限制是有问题的。

在F＃中使用无效的参考类型

F＃：如何将选项<'a>转换为无效，当'a可以是system.string时？

如果我们可以编写任何可无效的类型，包括f＃中的参考类型，那将是很好的。

F＃RFC FS -1060-无效的参考类型

 let nullable1 =
    Null

let nullable2 =
    NullableT " hello "

log nullable1
// Null
log nullable2
// T hello
log nullable2.Value
// hello

该规范类似于F＃的本机非可用值类型，但与之不同， NullableT也可以代表任何参考类型。

F＃无效支持可能很快就会出现！

在F＃编译器上完成的工作以支持.NET的无效功能的预览。

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

时间轴可取消

⏱️时间表无效

通过使用无效类型，我们可以提供与时间轴配对的新操作员。

初始化具有Null值的时间表，提供的函数仍未执行，并处于待处理状态。一旦通过有效事件将时间轴值更新为Null值，则将触发和执行该函数。

？功能

①功能初始化`Timeline<NullableT<'a>>`

`Timeline`

NullableT < 'a > -> Timeline < NullableT < 'a >>

 let timelineNullable = Timeline Null

log timelineNullable.lastVal // use `log` of Timeline
// Null

将此时间表视为电子表格应用中的空单元。

？类型

Timeline类型和功能：

①功能初始化Timeline<'a>

①功能初始化Timeline<NullableT<'a>>

是同一实体。

考虑Timeline可以接受任何通用类型的'a包括NullableT<'a> 。

另一方面，在Timeline<NullableT<'a>>的情况下，如果参数值是可通用的类型，则如果我们需要Timeline行为来忽略所提供的函数，而在参数为Null时简单地通过Null值，则可以使用特定的操作员，如下所示。

②为二进制操作的功能

$$ TIMELINEA 〜〜 * 〜〜功能 Quad rightarrow Quad Timelineb $$

`mapTN`

 ( NullableT < 'a > -> NullableT < 'b >) -> ( Timeline < NullableT < 'a >> -> Timeline < NullableT < 'b >>)

`bindTN`

 ( NullableT < 'a > ->  Timeline < NullableT < 'b >>) -> ( Timeline < NullableT < 'a >> -> Timeline < NullableT < 'b >>)

当二进制操作员时： $*$是mapT ，

$$ TIMELINEB Quad = Quad Timelinea Quad Triangleright Maptn Quad double $$

 let double =
    fun a -> NullableT ( a * 2 )

// ① initialize timelineA
let timelineA = Timeline Null

log timelineA.lastVal // use `log` of Timeline
// Null

// ② the binary operation
let timelineB =
    timelineA |> mapTN double
// currently, `timelineA = Timeline Null`
// so, `double` function is ignored
// and `timelineB` value becomes `Null`
log timelineB.lastVal // use `log` of Timeline
// Null

此二进制操作的代码仅对应于电子表格应用程序的基本用法。

 let timelineA ' =
    timelineA |> nextTN ( NullableT 3 )

或者，在大多数情况下，我们不需要另一个timelineA'而要丢弃它，因此只需ignore返回的值即可。

①②③ `Timeline<'a>`

 let double =
    fun a -> NullableT ( a * 2 )

// ① initialize timelineA
let timelineA = Timeline Null

log timelineA.lastVal // use `log` of Timeline
// Null

// ② the binary operation
let timelineB =
    timelineA |> mapTN double
// currently, `timelineA = Timeline Null`
// so, `double` function is ignored
// and `timelineB` value becomes `Null`
log timelineB.lastVal // use `log` of Timeline
// Null

// ③ update the lastVal of timelineA
timelineA
|> nextTN ( NullableT 3 )
|> ignore

log timelineA.lastVal // use `log` of Timeline
// T 3

// Now, `timelineA` value is updated to non `Null` value
// Accordingly, `timelineB` reactively becomes `double` of it
log timelineB.lastVal
// T 6

program.fs

 module Number

open Browser
open Browser. Types
open Fable. Core . JsInterop

open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask

let h4 : Tag = tags?h4
let fluentCard : Tag = tags? `` fluent-card ``
let fluentTextField : Tag = tags? `` fluent-text-field ``

let Number =
    fun _ ->
        let number = Timeline Null

        let numberX2 =
            number
            |> mapTN ( fun n -> NullableT ( n * 2 )) //System.Nullable

        fluentCard [
            {| `` class `` = " custom1 " |}

            h4 [ " Number " ]
            fluentTextField [
                {|
                appearance = " outline "
                required = true
                `` type `` = " number "
                placeholder = " 1 "
                oninput =
                    fun e ->
                        let value =
                            if e?target?value = " "
                            then Null
                            else NullableT e?target?value

                        if value = Null // clear the output textField
                        then numberX2
                             |> nextTN Null
                             |> ignore
                             document.getElementById ( " output-field " )? value
                                <- " Null " // clear the output textField
                        else ()

                        number
                        |> nextTN value
                        |> ignore
                |}
            ]

            h4 [ " Number × 2 " ]
            fluentTextField [
                {|
                appearance = " outline "
                readonly = true
                value = numberX2.el
                id = " output-field "
                |}
            ]

        ]

add [ document.body ; Number ()]
|> ignore

演示

https://codepen.io/kentechgeek/pen/wvznvzj?editors=1111

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

时间轴任务

⏱️时间轴任务

尽管时间表无效的运营商提供了类似于JavaScript的承诺的基本原则，但他们无法管理任务链接，例如Promie.then。

基于时间表无效，我们可以获得能够进行任务链接的时间轴任务。

`Task`

Timeline < NullableT < 'a >> -> 'b -> unit

 let task =
    fun timelineResult previousResult ->
        log " -----------task1 started... "
        log previousResult
        // delay-------------------------------
        let f = fun _ ->
            log " .......task1 done "
            timelineResult
            |> nextTN ( NullableT 1 )
            |> ignore
        setTimeout f 2000

`taskT`

Task < 'a , NullableT < 'a0 >> -> Timeline < NullableT < 'a >> -> Timeline < NullableT < 'a >>

 let timelineStarter =
    Timeline ( NullableT 0 )
    // tasks start immediately

timelineStarter
|> taskT task1
|> taskT task2
|> taskT task3
|> ignore

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

时间轴任务结算

⏱️时间轴任务concat

`taskConcat`或`(+>)`

 ( Task -> Task ) -> Task

 let task12 =
    task1 +> task2

let task123 =
    task1 +> task2 +> task3

let task1234 =
    task123 +> task4

program.fs

 module Tasks

open Browser
open Browser. Types
open Fable. Core . JsInterop

open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskConcat

open System. Timers
let setTimeout f delay =
    let timer = new Timer ( float delay )
    timer.AutoReset <- false
    timer.Elapsed.Add ( fun _ -> f ())
    timer.Start ()
let br : Tag = tags? `` br ``
let fluentCard : Tag = tags? `` fluent-card ``
let linerProgress : Tag = tags? `` md-linear-progress ``

let Tasks =
    fun _ ->
        let progressInit = false
        let progressStart = true
        let progressDone = false
        let percentInit = 0.0
        let percentStart = 0.0
        let percentDone = 1.0

        let timelineProgress1 = Timeline progressInit
        let timelineProgress2 = Timeline progressInit
        let timelineProgress3 = Timeline progressInit
        let timelinePercent1 = Timeline percentInit
        let timelinePercent2 = Timeline percentInit
        let timelinePercent3 = Timeline percentInit

        let taskStart =
            fun timelineProgress timelinePercent ->
                timelineProgress
                |> nextT progressStart
                |> ignore
                timelinePercent
                |> nextT percentStart
                |> ignore

        let taskDone =
            fun timelineProgress timelinePercent timelineResult ->
                timelineProgress
                |> nextT progressDone
                |> ignore
                timelinePercent
                |> nextT percentDone
                |> ignore
                timelineResult
                |> nextTN ( NullableT 999 )
                |> ignore

        let task1 =
            fun timelineResult previousResult ->
                log " -----------task1 started... "
                taskStart timelineProgress1 timelinePercent1
                // delay-------------------------------
                let f = fun _ ->
                    log " ...task1 done "
                    taskDone timelineProgress1 timelinePercent1 timelineResult
                setTimeout f 2500

        let task2 =
            fun timelineResult previousResult ->
                log " -----------task2 started... "
                taskStart timelineProgress2 timelinePercent2
                // delay-------------------------------
                let f = fun _ ->
                    log " ...task2 done "
                    taskDone timelineProgress2 timelinePercent2 timelineResult
                setTimeout f 2500

        let task3 =
            fun timelineResult previousResult ->
                log " -----------task3 started... "
                taskStart timelineProgress3 timelinePercent3
                // delay-------------------------------
                let f = fun _ ->
                    log " ...task3 done "
                    taskDone timelineProgress3 timelinePercent3 timelineResult
                setTimeout f 2500

        let timelineStarter = Timeline Null //tasks disabled initially

        let task123 =
            task1 +>
            task2 +>
            task3

        timelineStarter
        |> taskT task123
        |> ignore

(* task123 can be written as below

timelineStarter
|> taskT task1
|> taskT task2
|> taskT task3
|> ignore

*)
        let start =
            fun _ -> // timeline will start
                timelineStarter
                |> nextTN ( NullableT 0 )
                |> ignore

        setTimeout start 2000

        fluentCard [
            {| `` class `` = " custom2 " |}
            br []
            linerProgress [
                {| indeterminate = timelineProgress1.el
                  value = timelinePercent1.el |}
            ]
            br []
            linerProgress [
                {| indeterminate = timelineProgress2.el
                  value = timelinePercent2.el |}
            ]
            br []
            linerProgress [
                {| indeterminate = timelineProgress3.el
                  value = timelinePercent3.el |}
            ]
        ]

add [ document.body ; Tasks ()]
|> ignore

演示

https://codepen.io/kentechgeek/pen/jordjvy?editors=1111

 module Tasks

open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskConcat

open System. Timers
let setTimeout f delay =
    let timer = new Timer ( float delay )
    timer.AutoReset <- false
    timer.Elapsed.Add ( fun _ -> f ())
    timer.Start ()

let nonNull = NullableT true // some non-null value

let task1 =
    fun timelineResult previousResult ->
        log " -----------task1 started... "
        // delay-------------------------------
        let f = fun _ ->
            log " ...task1 done "
            timelineResult
            |> nextTN nonNull
            |> ignore
        setTimeout f 2500

let task2 =
    fun timelineResult previousResult ->
        log " -----------task2 started... "
        // delay-------------------------------
        let f = fun _ ->
            log " ...task2 done "
            timelineResult
            |> nextTN nonNull
            |> ignore
        setTimeout f 1000

let task3 =
    fun timelineResult previousResult ->
        log " -----------task3 started... "
        // delay-------------------------------
        let f = fun _ ->
            log " ...task3 done "
            timelineResult
            |> nextTN nonNull
            |> ignore
        setTimeout f 3000

let timelineStarter = Timeline Null //tasks disabled initially

let task123 =
    task1 +>
    task2 +>
    task3

timelineStarter
|> taskT task123
|> ignore

(* task123 can be written as below

timelineStarter
|> taskT task1
|> taskT task2
|> taskT task3
|> ignore

*)

let start =
    fun _ -> // timeline will start
        timelineStarter
        |> nextTN nonNull
        |> ignore

setTimeout start 2000

演示

https://codepen.io/kentechgeek/pen/baeeyvl?editors=1111

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

时间轴任务或

⏱️时间轴任务或

`taskOr`或`(+|)`

 ( Task -> Task ) -> Task

 let task12 =
    task1 +| task2

let task123 =
    task1 +| task2 +| task3

let task1234 =
    task123 +| task4

program.fs

 module TaskOr

open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskOr

open System. Timers
let setTimeout f delay =
    let timer = new Timer ( float delay )
    timer.AutoReset <- false
    timer.Elapsed.Add ( fun _ -> f ())
    timer.Start ()

let nonNull = NullableT true

let task1 =
    fun timelineResult previousResult ->
        log " -----------task1 started... "
        // delay-------------------------------
        let f = fun _ ->
            log " ...task1 done "
            timelineResult
            |> nextTN ( NullableT " task1 " )
            |> ignore
        setTimeout f 2500

let task2 =
    fun timelineResult previousResult ->
        log " -----------task2 started... "
        // delay-------------------------------
        let f = fun _ ->
            log " ...task2 done "
            timelineResult
            |> nextTN ( NullableT " task2 " )
            |> ignore
        setTimeout f 1000

let task3 =
    fun timelineResult previousResult ->
        log " -----------task3 started... "
        // delay-------------------------------
        let f = fun _ ->
            log " ...task3 done "
            timelineResult
            |> nextTN ( NullableT " task3 " )
            |> ignore
        setTimeout f 3000

let timelineStarter = Timeline Null //tasks disabled initially

let task123 =
    task1 +| task2 +| task3

let taskOutput =
    fun timelineResult ( previousResult : NullableT < string >)
        ->  log ( " The fastest result from: "
                + previousResult.Value )

timelineStarter
|> taskT task123 // Run all tasks then return the fastest result 
|> taskT taskOutput  // log the fastest result 
|> ignore

let start =
    fun _ -> // timeline will start
        timelineStarter
        |> nextTN nonNull
        |> ignore

setTimeout start 2000

演示

https://codepen.io/kentechgeek/pen/zyxqgwq?editors=1111

内容
？范夫 _{网络技术的多功能性用于跨平台应用程序开发}
入门
Web组件
⚡️功能反应性编程（FRP） _{什么是功能编程？} _{功能编程代码如何驱动器？}
⏱️时间表
⏱️无效类型 _{什么是零，无效和选项类型？}
⏱️时间表无效
⏱️时间轴任务
⏱️时间轴任务concat
⏱️时间轴任务或
⏱️时间轴任务和
讨论

时间轴任务和

⏱️时间轴任务和

`taskAnd`和`(+&)`

 ( Task -> Task ) -> Task

 let task12 =
    task1 +& task2

let task123 =
    task1 +& task2 +& task3

let task1234 =
    task123 +& task4

program.fs

 module TaskAnd

open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskAnd

open System. Timers
let setTimeout f delay =
    let timer = new Timer ( float delay )
    timer.AutoReset <- false
    timer.Elapsed.Add ( fun _ -> f ())
    timer.Start ()

let nonNull = NullableT true

let task1 =
    fun timelineResult previousResult ->
        log " -----------task1 started... "
        // delay-------------------------------
        let f = fun _ ->
            log " ...task1 done "
            timelineResult
            |> nextTN ( NullableT " task1 " )
            |> ignore
        setTimeout f 2500

let task2 =
    fun timelineResult previousResult ->
        log " -----------task2 started... "
        // delay-------------------------------
        let f = fun _ ->
            log " ...task2 done "
            timelineResult
            |> nextTN ( NullableT " task2 " )
            |> ignore
        setTimeout f 1000

let task3 =
    fun timelineResult previousResult ->
        log " -----------task3 started... "
        // delay-------------------------------
        let f = fun _ ->
            log " ...task3 done "
            timelineResult
            |> nextTN ( NullableT " task3 " )
            |> ignore
        setTimeout f 3000

let timelineStarter = Timeline Null //tasks disabled initially

let task123 =
    task1 +& task2 +& task3

let taskOutput =
    fun timelineResult ( previousResult : NullableT < ListResult < 'a >>)
        ->  log previousResult.Value.results

timelineStarter
|> taskT task123 // Run all tasks then return the list of results 
|> taskT taskOutput  // log the list of results 
|> ignore

let start =
    fun _ -> // timeline will start
        timelineStarter
        |> nextTN nonNull
        |> ignore

setTimeout start 2000

演示

https://codepen.io/kentechgeek/pen/pobmjzq?editors=1111

展开

vanfs

范夫

？范夫

VANFS是Vanjs一对一直接绑定的F＃项目模板

f＃中的vanfs代码

为什么Vanjs基于Vanilla JavaScript

1。范夫的内部机制

2。对于样式和Web组件

CSS

/web-imports/css-urls.ts

为什么我们应该避免使用打字稿并迁移到F＃

f＃作为ALTJ：与打字稿的比较

入门

入门

构建VANFS项目模板

先决条件

快速开始

网络组件

Web组件

流利

一些Web组件使用CSS

使用Program.fs的Web组件

program.fs

清洁寓言项目并再次编译

Vite的实时预览

/web-imports/custom.css

program.fs

用Vite构建

材料Web组件使用Google字体/图标

frp

⚡️功能反应性编程（FRP）

（1：1组成UIS） + Micro FRP

vanjs是一个包含反应性编程的框架

时间表

⏱️时间表

？类型

Timeline<'a>

？功能

①功能初始化Timeline<'a>

Timeline

vanjs

范夫

③功能更新Timeline<'a>

nextT

计数器应用程序

vanjs

范夫

program.fs

无效

⏱️无效类型

什么是空？

什么是零，无效和选项类型？

F＃中的无效类型

时间轴可取消

⏱️时间表无效

？功能

①功能初始化Timeline<NullableT<'a>>

Timeline

？类型

②为二进制操作的功能

mapTN

bindTN

①②③ Timeline<'a>

program.fs

时间轴任务

⏱️时间轴任务

Task

taskT

时间轴任务结算

⏱️时间轴任务concat

taskConcat或(+>)

program.fs

时间轴任务或

⏱️时间轴任务或

taskOr或(+|)

program.fs

时间轴任务和

⏱️时间轴任务和

taskAnd和(+&)

program.fs

使用`Program.fs`的Web组件

`Timeline<'a>`

①功能初始化`Timeline<'a>`

`Timeline`

③功能更新`Timeline<'a>`

`nextT`

①功能初始化`Timeline<NullableT<'a>>`

`Timeline`

`mapTN`

`bindTN`

①②③ `Timeline<'a>`

`Task`

`taskT`

`taskConcat`或`(+>)`

`taskOr`或`(+|)`

`taskAnd`和`(+&)`