前端Web框架【免费下载链接】re-frameA ClojureScript framework for building user interfaces, leveraging React项目地址https://gitcode.com/gh_mirrors/re/re-frame点击查看免费下载在写代码时程序员常常需要在脑中运行自己的程序盯着某一处代码在意识里模拟它的执行过程、数据如何流转、状态如何变化。这种对运行时动态runtime dynamics的推理能力直接决定了开发效率与 Bug 数量。本篇技术指南以 re-frame 官方文档 docs/on-dynamics.md 为核心系统拆解 re-frame 如何通过一次一个事件的时间模型、有限状态机式的事件处理、纯函数与不可变数据、声明式数据 DSL 以及单一状态存储构建出一个极简单、极易在心智中模拟的动态模型。读完本文你将理解 re-frame 架构设计背后以开发体验为最高目标的取舍逻辑并能从源码层面路由队列的 FSM、拦截器链、订阅信号图印证这套动态模型是如何落地的。核心主张re-frame 拥有一个简单动态过程re-frame 文档提出了一个非常大胆的核心论断re-frame has a simple dynamic processre-frame 拥有一个简单的动态过程并且进一步强调关于 re-frame没有比这更重要的一点。re-frame 的最高设计目标是提供优秀的开发者体验为此它不惜在部分场合牺牲函数式纯洁性文档中甚至用了gasp!来表达这种反叛。而几乎所有能提升开发者体验的因素中呈现一个简单的动态模型贡献最大——它让程序员更容易在脑中模拟运行、更容易定位问题也因此大幅减少 Bug 的产生。这一论断是理解 re-frame 全部架构设计的钥匙。下面我们从动态这个概念本身出发逐层向下剖析。什么是动态State 与 Computation 的反馈回路水动力学Hydrodynamics、热力学Thermodynamics、社会动力学Social Dynamics——这些学科名称中的dynamics都意味着观察系统如何随时间/空间变化然后对变化的原因建模。Web 应用本质上是一个顺序进程sequential process随时间推移它从一个State迁移到另一个State行为也随之改变。动态正是由Computation与State跨时间相互作用而产生的State本质上是凝结的时间——历史被物化后的结果并由一轮轮的Computation塑形但这不是单向的虽然Computation创造StateComputation自身又被State控制例如基于State的谓词决定执行哪条分支。于是两者之间存在一个反馈回路feedback loop。对程序员而言要在脑中模拟这种 State/Computation 的反馈过程需要同时调度很多东西很快就会逼近认知预算cognitive budget的上限。某些时间、State 与 Computation的交互方式可以降低动态复杂度、让心智模拟更容易另一些则适得其反把系统推向几乎不可能模拟的一端——那类系统会滋生难缠的 Bug且维护起来令人恐惧。正如 Alan Perlis 所说要理解一个程序你必须同时成为机器和程序本身。静态关注点 vs 动态关注点程序员们惊人地聚焦于系统的静态方面DRY、代码行数、高内聚低耦合……这些当然有用但或许我们更应该关注那些让运行时更容易或更难在脑中模拟的品质。这一点被谈论得远远不够。re-frame 的目标就是拥有尽可能简单的动态模型——因为这才是驱动开发者生产力的第一要素。接下来我们从高层面逐步下沉看看 re-frame 是如何交付这套简单动态模型的。re-frame 的时间模型一次一个事件re-frame 应用以一个事件接一个事件的方式在其计算/状态空间中前进。时间的单位就是一个事件event。每个事件都会从头到尾完整处理完队列中下一个事件才会被处理。re-frame 不支持事件被挂起suspended稍后再重启的模型——应用在任何时刻都只做一件事处理一个事件。此外当事件改变应用状态时这种改变是事务性的transactional瞬间、一次性完成而不是增量、渐进式的。因此在高层面re-frame 以离散单元交付动态每个单元有清晰的开始与结束可以被独立理解和分析。源码视角路由队列就是一个有限状态机这一时间模型在源码中有着极为具体的实现re-frame 的事件路由队列 src/re_frame/router.cljc 用一个**手工实现的有限状态机FSM**来管理事件队列的生命周期。源码注释直言The processing/handling of an event happens asynchronously sometime after that event was enqueued via dispatch……So now we hand-roll our own, finite-state-machine and all.EventQueue维护四个状态:idle空闲、:scheduled已调度、即将运行、:running正在逐事件处理、:paused因:flush-dom等元数据暂停。-fsm-trigger用case一次性描述全部状态迁移例如[:idle :add-event] [:scheduled #(do (-add-event this arg) (-run-next-tick this))] [:scheduled :add-event] [:scheduled #(-add-event this arg)] [:scheduled :run-queue] [:running #(-run-queue this)] [:running :add-event] [:running #(-add-event this arg)] [:running :pause] [:paused #(-pause this arg)] [:running :exception] [:idle #(-exception this arg)] [:running :finish-run] (if (empty? queue) ;; FSM guard [:idle] [:scheduled #(-run-next-tick this)]) [:paused :add-event] [:paused #(-add-event this arg)] [:paused :resume] [:running #(-resume this)]这套 FSM 落实了文档描述的时间纪律dispatch见 src/re_frame/core.cljc只是把事件 push 进 FIFO 队列并通过goog.async.nextTick调度处理保证处理很快发生但不立即发生-run-queue会一次性处理完当前队列中的所有事件不中途让出浏览器控制权但若处理过程中有新事件被 dispatch 进来它们会留在队列里、留到下一轮处理从而在不让浏览器饿死与不让队列失控之间取得平衡只有带:flush-dom元数据的事件如(dispatch ^:flush-dom [:event-id ...])会触发:pause——注意这里暂停的是队列处理而不是挂起某个事件的处理事件本身一旦开始就被完整执行到底这与文档事件不可被挂起重启的表述一致每个事件被处理前-process-1st-event-in-queue会重置events/*handling*等动态绑定保证每个事件都作为一个全新的顶层事件来处理。事务性的状态变更一次事件、一次性改状态的另一个关键实现在 src/re_frame/events.cljc 的handle函数中它在执行拦截器链之前记录:app-db-before在链执行之后记录:app-db-after而真正的状态写入由 src/re_frame/fx.cljc 中内置的:db效果处理器完成——它只做一次(reset! app-db value)。也就是说从应用视角看app-db是从旧值一步跳变到新值的中间不存在任何可见的中间态。单个事件的处理有限状态机 数据流还记得大学里计算理论课上的内容吗计算能力最受限、也因此最容易在心智中模拟的动态过程叫做有限状态机FSM。而在计算谱系的另一端是图灵机——你可以用图灵机计算任何东西这很了不起但你的编程键盘从此变成了一把上膛的枪能做不代表应该做。re-frame 处理单个事件的总体过程就是一部分有限状态机、一部分数据流事件处理过程沿着一条线性的逻辑状态集逐步推进——也就是大家熟知的The Dominoes六块多米诺骨牌任意时刻只处于一个状态每个状态中有特定的行为/计算且各状态之间充分隔离可以独立理解、独立分析你可以放心地放大任何一个局部去理解它而忽略其余部分。re-frame 文档并没有正式地以 FSM 术语来讲述这套机制而是把它呈现为引发状态间迁移的数据流。但多米诺骨牌本质上就是一台简单的 FSM——正因如此每个事件都被一种简单的计算方式处理使得在脑中模拟变得容易。文档用两个并排的注意注记点明了这一设计哲学Less Is More少即是多在这一层面re-frame 是刻意地不那么强大。它只交付完成任务所需的最小计算能力。与其提供大量自由度与偶发的魔法它给你的是简单性与确定性。Less Is Scary少是可怕的给程序员更少的计算能力会让他们不安。我们生活在需求随时变化的世界里出于自我保护我们总是被更强大的能力吸引而不是更少。六块多米诺骨牌The Dominoesre-frame 应用是一个永动循环每次迭代包含 6 个阶段。由于这些阶段逐个发生re-frame 称之为六块多米诺骨牌级联。相关的完整代码级讲解见 docs/dominoes-30k.md 与 docs/a-loop.md这里先给出概貌Event Dispatch事件派发——事件是向量如[:delete-item 2486]首个元素是事件种类其余是可选数据。事件以领域特定方式表达用户意图Event Handling事件处理——用reg-event-fx/reg-event-db注册的处理器纯函数计算事件的效果Effect Handling效果处理——用reg-fx注册的效果处理器把数据化的效果变成真实动作如reset!应用状态Query查询——由reg-sub注册的查询函数从应用状态中提取/计算物化视图View视图——Reagent 组件视图函数通过subscribe从信号图取数计算 hiccup 格式的 DOM 描述DOM——Reagent/React 把 hiccup 变成真实浏览器 DOM。注意其中存在两个同构的子级联1-2-3 与 4-5-6 结构相似——倒数第二块多米诺2 与 5计算所需变更的数据描述最后一块3 与 6做真正的脏活并执行这些描述。但你几乎不需要操心那些脏活多米诺re-frame 大多替你包办了。这也是文档引用尼采那句只有在对立面的滋养下才会结出果实的用意——在函数式系统里最有趣的部分恰恰是如何安排不去保持纯粹。拦截器链多米诺 2 与 3 的底层实现机制从源码结构看多米诺 2事件处理与多米诺 3效果处理实际上都由**拦截器链interceptor chain**机制驱动完整机制见 docs/Interceptors.md 与 src/re_frame/interceptor.cljc。每个拦截器本质上是一个包含:before与:after两个函数的数据 map。执行一条拦截器链分三步创建context包含:coeffects与:effects两个 map→ 沿链正向依次调用每个拦截器的:before逐步构建coeffects即事件处理器的输入→ 沿链反向依次调用每个拦截器的:after逐步处理effects即事件处理器的输出。这正是execute*的实现(defn execute* [ctx] (- ctx (invoke-interceptors :before) change-direction (invoke-interceptors :after)))在 src/re_frame/core.cljc 的-reg-event中可以看到每次reg-event-db/reg-event-fx/reg-event-ctx注册都会在用户提供的拦截器前自动拼接一段固定链条(events/register id [cofx/inject-db fx/do-fx flow/interceptor std-interceptors/inject-global-interceptors interceptors (handler-interceptor handler)])其中inject-db把当前app-db注入:coeffectssrc/re_frame/cofx.cljcdo-fx作为多米诺 3 在:after阶段执行:effects里的每个效果src/re_frame/fx.cljc。整个链条就是一台线性状态的 FSM先正向构建输入再反向处理输出两个方向之间只有一个清晰的转向点。多米诺内部的纯函数站在时间与空间之外再往下深挖一层单个多米诺内部的动态又是什么样在多米诺内部我们又回到了图灵完备的 ClojureScript 世界。幸运的是为了驯服这种可怕的力量re-frame 要求你写纯函数、使用不可变数据纯函数站在时间之外。要理解它们你不需要知道它们何时运行、当时系统的状态是什么——你只需要知道实际传入的参数值时间的暴政在纯函数内部依然存在内部仍有执行流所以你或许仍需在脑中模拟它但纯函数交付的动态过程更小、更易于认知处理。而且不止如此我们以参数形式向纯函数提供数据它返回数据这些数据不可变——这把纯函数与任何地点解耦它不受数据放在哪里的影响。由于纯函数既脱离时间又脱离空间它们就能以最数学化的方式组合从而极大地压制运行时动态的复杂度。这种纯函数 不可变数据的实践正是 re-frame 注册 API 的形态reg-event-db的处理器签名是(fn [db event] - db)reg-event-fx的处理器签名是(fn [cofx event] - effects-map)二者都是数据进、数据出的纯函数唯一不纯的部分被集中放逐到多米诺 3 的reg-fx效果处理器中如 examples/simple/src/simple/core.cljs 中注册的:timer、:time-color-change等处理器全部是纯函数。香蕉问题非纯函数的代价文档引用 Erlang 之父 Joe Armstrong 的名言来警示非纯函数你想要一根香蕉结果得到的却是一只拿着香蕉的大猩猩以及整片丛林。要理解一个伸手去抓香蕉的函数你必须同时理解与丛林变化相关的全部动态——你必须做全局推理而不是局部推理而这往往极其困难。这正是 re-frame 把副作用隔离到效果处理器、把业务逻辑约束在纯函数里的根本动机。声明式用数据 DSL 消解动态复杂度声明式编程意味着让X发生、但不指定如何发生。它把过程抽象掉从而折叠了与之相关的动态。re-frame 中处处是声明式Reagent 是强大的声明式 DOM 能力——视图函数返回数据React/Reagent 负责如何渲染事件是声明式的——(dispatch [:delete-item 2486])只表达意图效果是声明式的——处理器返回{:db new-db}这样的数据而不是直接执行副作用信号图Signal Graph是声明式的——reg-sub声明查询与输入信号之间的数据依赖关系而不是命令式地手动派发更新。而且所有这些声明式都是用**基于数据的 DSLdata-based DSL**实现的这正是 Clojure 之道Hiccup是绝佳的 DSL而且它就是数据——简单情形下只是数据字面量需要时还可以用计算来生成数据SQL是基于字符串的——作为字面量尚可但要计算字符串时就糟糕透顶正则表达式更是如此——一种强大且偶尔出人意料的计算范式却偏偏用字符串承载。在 re-frame 中拦截器是数据:before/:after的 map、事件是数据向量、效果是数据map、DOM 是数据hiccup 向量、订阅依赖是数据如reg-sub的:- [:a-sub]糖语法。从 src/re_frame/subs.cljc 的sugar实现可以看到reg-sub的三种输入信号声明方式默认取app-db、显式信号函数、:-糖最终都被解析为输入信号函数 计算函数声明式数据被统一编译成响应式依赖。状态管理单一数据源一次事件一次更新没有任何东西比需要分发状态distribute state更能昭示复杂动态了——除非再加上……还要经过不可靠的网络。这也是面向对象编程令人头疼的根源我们当初怎么会认为把状态刻意分发进一个个隐藏的可变小包、然后动态同步它们是个好主意re-frame 的做法截然相反状态只放在一个地方app-db一个由 src/re_frame/db.cljc 定义的单一ratom(def app-db (ratom {}))任何应用代码都不直接访问它——读取走订阅写入走事件每个事件周期只更新一次如前所述:db效果处理器在一次reset!中完成更新你永远不必担心应用处于某种略微不一致的中间状态没有状态同步的动态因为只有一个存储你不需要担心变更从一个 store 传播到另一个 store的动态问题。从 src/re_frame/subs.cljc 可以看到订阅层通过query-reaction缓存去重两个并发的相同查询共享同一个执行中的处理器这既避免了重复计算也维持了单一事实来源。文档还特别指出一个推论性的好处在一瞬间你可以检查应用中全部状态是否符合某个 schema——包括刚从服务器通过线路到达的数据因为全部状态都在那一个app-db里。一次事故报告简单动态模型的警示re-frame 文档以一段半开玩笑的口吻记录了尾部风险fat tail risk5 月 12 日大约凌晨 12:47re-frame 获得了自我意识在控制台打印了一行日志哦是吗我会让你们看看什么叫真正的简单动态过程f#$%ers。虽然核冬天随之而来但人类最终战胜了机器人军团Bug 也被找到并修复。不过如果你注意到某个信号图呈现出Cortex 结构我们仍建议预防性重启。这段文字幽默地提醒即便最克制的动态模型也可能出现意外涌现的复杂度保持警惕、保持可观测性永远是好习惯。总结为什么 re-frame 程序可以少写测试re-frame 应用简单到可以在脑子里模拟而随之而来的全是好结果。这种简单性来自多个因素的叠加文档按层回顾在高层面事件被离散地、一个接一个地处理单个事件被以类 FSM 的方式逐步处理六块多米诺骨牌纯函数与不可变数据极大地压制了动态多个环节使用了声明式的、基于数据的 DSL只有一个状态存储且每个事件周期只事务性地更新一次。文档在结尾分享了一个真实的社区轶事——某位经验丰富的 Clojure 开发者用了 re-frame 九个月后惊讶地发现用 re-frame 九个月了。你知道奇怪的是什么吗自从开始用 re-frame我发现自己写的测试越来越少了。一位此前写过大量测试、有自我约束力的程序员凭直觉开始少写测试甚至自己也感到惊讶。文档作者相信这位程序员的直觉告诉他这样做是安全的——他正在对自己体验到的简单性做出反应。虽然这只是一个样本N of 1但几乎没有比这更好的推荐了。附录 A把动态实体化Reified Dynamics——trace 机制与 re-frame-10x 的愿景文档承认程序动态这个话题整体上被讨论得不够但也存在著名的例外。Brett Victor 在 2012 年的《Learnable Programming》中开宗明义因此一个编程系统的目标应该是支持并鼓励强大的思维方式让程序员能够看见并理解其程序的执行他关心的不是代码的静态方面而是系统的动态以及更高一层——系统开发的动态。对于第一个目标Brett Victor 演示了程序员如何直接操纵代码中的值并即时观察变化带来的影响。演示极具视觉冲击力但示例程序很小文档作者坦言自己的应用更大、更平淡按钮 数据处理很难看出该概念如何扩展到我的世界。不过一个 ClojureScript 程序员可以通过热代码重载hot code reloading、REPL、事件即时重放获得极佳的近即时反馈——这虽未完全实现 Brett Victor 演示中的直接操纵但对比漫长的编译周期已相当不错。在仓库的 examples/simple/src/simple/core.cljs 中可以看到典型的:dev/after-load钩子热重载后调用rf/clear-subscription-cache!并重新挂载 UI。对于第二个目标re-frame 有明确的规划让程序员获得对程序执行的深度洞察。与其让程序员挣扎于心智模拟不如让他们在事件发生后观察并与程序执行的实体化reification互动。这正是工具re-frame-10x的远大目标以务实的方式在更大、更工业级的编程任务上兑现 Brett Victor 的第二个目标。re-frame-10x 的方法论是把应用处理一个事件时的动态实体化为数据。程序员应该能观察到处理过程中执行的每一份 ClojureScript 代码无需再凭空想象代码如何执行——因为你能以具体的形式看见它。虽然目标完全可以实现但实现目前只走了一部分路。值得强调的是这套实体化愿景的底层基础设施已经存在于当前仓库中src/re_frame/trace.cljc 定义了完整的 trace 机制——包括按:op-type组织的tag-schema:event、:event/handler、:event/do-fx、:sub/create、:sub/run、:sub/dispose等以及register-epoch-cb提供的每次 dispatch 的完整级联装配记录每个 epoch 携带:dispatch-id、:parent-dispatch-id、:app-db/before、:app-db/after、:coeffects、:effects、:interceptors、:sub-runs等它把一个事件从派发到 DOM 的全过程以纯数据的形式交给下游工具。此外src/re_frame/router.cljc 中的dispatch-and-settle允许开发者派发一个事件并等待其同步级联含:fx [:dispatch ...]子事件沉淀完毕——这套以数据重放动态的能力正是实体化动态理念在核心库层面的直接体现。进一步阅读想从代码层面加深对本主题的理解可继续阅读 docs/a-loop.mdre-frame 的数据循环与六块多米诺、docs/dominoes-30k.md带代码片段的逐多米诺讲解、docs/Interceptors.md拦截器机制详解、docs/subscriptions.md信号图与订阅以及核心实现文件 src/re_frame/router.cljc、src/re_frame/events.cljc、src/re_frame/interceptor.cljc 和 src/re_frame/core.cljc。赞分享前端Web框架【免费下载链接】re-frameA ClojureScript framework for building user interfaces, leveraging React项目地址https://gitcode.com/gh_mirrors/re/re-frame点击查看免费下载相关推荐Zotero Style插件嵌套标签视图同步失效的排查与修复指南Zotero Style插件嵌套标签视图同步失效的排查与修复指南 Zotero Style作为一款功能强大的Zotero插件为用户提供了丰富的文献管理增强功能桌面应用知识管理科研Ruffle模拟器5个简单步骤让Flash内容在Chrome中完美运行Ruffle模拟器5个简单步骤让Flash内容在Chrome中完美运行 Ruffle是一款基于Rust语言开发的Flash Player模拟器它能让已经过时音视频语言运行时在 Substrate FRAME 运行时中嵌入 XQVMpallet-xqvm 集成指南在 Substrate FRAME 运行时中嵌入 XQVMpallet xqvm 集成指南 导读 pallet xqvm 是 xquad 仓库中一个特殊的 F创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考