Leptos 浅用到现在，没有写过一句 Javascript 代码，完全用 Rust 替代了。

多亏了 crates 提供了调用 BOM API 的功能，像：

  1. 打印输出可用 console_log
  2. 提供了大量 BOM 调用的 API gloo
  3. 目前我用到时间库是 js-sys 提供

画一只赛博猫猫

file

我用 Leptos 画了一只可爱的小猫，用鼠标点击它会喵喵叫，鼠标按住会发出咕噜声。界面是用 HTML 画的，但用到的逻辑代码，包括事件监听，类似 Javoscript Interval 的时间函数等都是 Rust 写的。

项目地址在：cyber kitten

猫猫摇尾巴的逻辑其实就是用一个 Interval 方法，每半秒换一堆字符渲染，我用数组存放了五幅猫猫不同动作的字符画：

const CAT_SIT: [&'static str; 5] = [
    r"
 /\____/\
 )     (
=\    /=
  )   (
 /     \
 )     (
/       \
\       /
 \__  __/
    ))
   //
  //
☾_/
",
    r"
 /\____/\
 )     (
=\    /=
  )   (
 /     \
 )     (
/       \
\       /
 \__  __/
    ))
   //
  ((
   \)
",
    r"
 /\____/\
 )     (
=\    /=
  )   (
 /     \
 )     (
/       \
\       /
 \__  __/
    ))
    ((
    ))
    (/
",
    r"
 /\____/\
 )     (
=\    /=
  )   (
 /     \
 )     (
/       \
\       /
 \__  __/
    ((
     \\
      ))
      (/
",
    r"
 /\____/\
 )     (
=\    /=
  )   (
 /     \
 )     (
/       \
\       /
 \__  __/
    \\
     \\/)
      ˉ
       ~
",
];

Interval 时间函数

在 Interval 里用一点算法让它从下标 0 到 4，再从 4 到 0，循环选择要使用的字符画，

let (index, set_index) = create_signal(0usize);

    let sleep_handler = Interval::new(500, move || {
        set_index.update(|v| {
            if *v == CAT_SLEEP.len() - 1 {
                *v = 0;
            } else {
                *v += 1;
            }
        });
    });
    on_cleanup(|| {
        drop(sleep_handler);
    });

这里的 Interval 函数提供和 Javascript 的 interval 类似的功能，由 gloo 提供。 上面我用到了 on_cleanup 函数，这个函数会在这个组件清理的时候执行，并且是在 signal、effect、resource 失效之前执行，这里用它来取消掉 Interval 函数。 如果使用了 Interval::new()，然后没有对返回的 Interval 对象做其他操作，那么在组件加载完后，Interval 就会被释放掉。如果要让 Interval 一直运行永不去掉，那么要在 new 之后调用 forget 方法，但这样就会转移 Interval 的所有权，将永远无法进一步操作。 如果要在组件卸载的时候清理，则要在 on_cleanup 函数里调用 drop(<interval>)（或者什么都不做，只要让 on_cleanup 获取到 Interval 的所有权）。

有了周期性的获取正确的下标，最后只要将字符画渲染到界面上，猫猫就出现了！（过程略）