Cycle.js 入门

本文适合对 Cycle.js 刚兴趣和入门, 主打轻量级。

什么是 Cycle.js?

Cycle.js 与其他的前端框架有明显的不同。是一个函数式具有响应编程能力的主打人机交互的前端框架。

Cycle.js 特点

  • 函数式编程,函数为一等公民。
  • 主函数,处理响应式数据程序。
  • 启动器,处理副作用,属于主函数之外,专职与外部世界进行副作用交互(例如:定时器,http 请求等等...)
  • RxJs 底层支持
  • ...

数据流与核心概念

  • main 函数
  • Sources 资源(main 函数参数)
  • main 函数中的纯函数操作
  • Sinks 输出
  • 外部副作用

示例

  • 基于 vite 创建一个原生 JS 项目并给基本逻辑改造
sh 复制代码
cd your_target_dir

pnpx create-vite cyclejs

# 安装依赖
pnpm add @cycle/dom @cycle/run
  • 主 html
html 复制代码
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cycle.js with Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
  • js 逻辑
ts 复制代码
import {run} from '@cycle/run'
import {div, label, input, hr, h1, makeDOMDriver} from '@cycle/dom'

function main(sources) {
  const input$ = sources.DOM.select('.field').events('input')

  const name$ = input$.map(ev => ev.target.value).startWith('') // 从输入流中获取 name

   // 在 map 操作符中返回虚拟可观察 dom
  const vdom$ = name$.map(name =>
    div([
      label('Name:'),
      input('.field', {attrs: {type: 'text'}}),
      hr(),
      h1('Hello ' + name),
    ])
  )

  return { DOM: vdom$ } // 返回一个可观察的 dom
}

run(main, { DOM: makeDOMDriver('#app') }); // 运行主函数
  • 效果

RxJS 支持

Cycle.js 的核心概念是将整个应用程序视为数据流的集合,而RxJS提供了处理这些数据流的强大工具和操作符。Cycle.js的数据流管理部分是建立在RxJS之上的,使得开发者可以方便地处理数据的变化和响应式事件。

底层虚拟 dom: snabbdom

ts 复制代码
 "dependencies": {
    "snabbdom": "^3.4.0",
    "snabbdom-selector": "^5.0.0",
  },
  • 虚拟 DOM 树构建与比较: 使用 Snabbdom,可以轻松地创建虚拟 DOM 树,表示应用程序的状态和视图结构。这些虚拟 DOM 树是 Snabbdom 的核心数据结构。 Snabbdom 会在两个虚拟 DOM 树之间执行比较操作,找出它们之间的差异。可用于更新实际的浏览器 DOM。
  • 选择器库支持: Snabbdom-selector 是一个用于处理选择器的库,使用选择器来查找和操作虚拟 DOM 树中的元素。处理复杂的视图结构。

资源

小结

Cycle.js 主逻辑非常简单,一个 run 函数,一个 main 函数和驱动对象。本文基于 vite + cycle.js 实现一个小的小的示例。Cycle.js 难点在于,要从原生 JS 和主流框架的思想中进入响应式编程和纯函数式编程。实践中编写函数代码逻辑和外部 effect 逻辑,与现有逻辑不同,响应式编程有自己的世界,功能特别的强大,需要根据自己的情况进行使用。

相关推荐
JaguarJack6 分钟前
PHP 15 个高效开发的小技巧
后端·php
235168 分钟前
【并发编程】详解volatile
java·开发语言·jvm·分布式·后端·并发编程·原理
折翼的恶魔15 分钟前
前端学习之样式设计
前端·css·学习
IT_陈寒34 分钟前
JavaScript性能优化:3个被低估的V8引擎技巧让你的代码提速50%
前端·人工智能·后端
洛小豆35 分钟前
java 中 char 类型变量能不能储存一个中文的汉字,为什么?
java·后端·面试
云飞云共享云桌面39 分钟前
SolidWorks服务器多人使用方案
大数据·运维·服务器·前端·网络·电脑·制造
爱吃烤鸡翅的酸菜鱼41 分钟前
从数据库直连到缓存预热:城市列表查询的性能优化全流程
java·数据库·后端·spring·个人开发
风象南44 分钟前
SpringBoot 实现自动数据变更追踪
后端
艾小码1 小时前
从Hello World到变量数据类型:JavaScript新手避坑指南
前端·javascript
街尾杂货店&2 小时前
css word-spacing属性
前端·css