re-frame 介绍

介绍

re-frame 是 clojurescript 社区一个有名的应用框架, 基于 react 的 clojurescript 绑定版本 reagent. 其官方文档也最近更新到了一个新的官网页面上，前面大部分章节介绍了设计思路：基于事件驱动，拆分出了6个步骤, 这6个步骤即对应了应用 re-frame 编程的6个步骤:

1. 发出一个事件
2. 处理事件
3. 产生副作用
4. 查询
5. 显示
6. DOM

描述了一个事件由发生到最后反馈到界面上的整个流程。
注意的是第2步和第3步的区别，处理事件是一个不可变的处理，列出了我要怎样改变的清单，而第3步是正式对第2步的清单作出动作，世界在这一步应用改变。分开这两步，是一个很好的设计，更符合不可变数据的编程理念。
另一个是第5步（显示）和第六步（DOM）， 因为 re-frame 是基于 react 平台上实现的，所以这一步用 react 的角度就很好理解了。DOM 这一步，基本上由 react 来代为处理了， 这里列出来，只是描述起来更完整些。

示例

一个简单的例子，点击一个按钮，显示数字每次增加1，按其流程如下:

1. 发出事件： 点击按钮，即发出一个"数字+1"事件
2. 处理事件： 对"数字+1"事件处理为, 要将世界中的记录数字+1
3. 产生副作用: 世界中的记录数字加上1
4. 查询: 查询世界中的记录数字的值
5. 显示: 显示的数字其值为第4步查询出的值
6. DOM：dom 更新，界面上反映出来

从流程中看出来，这里面有一个状态：世界中的数字值，前3步描述了对这个值的更新流程，后3步描述了对更新后的数字值显示出来的流程。所以 re-frame 里统一将数据放置在了一个全局的数据状态中（ app state），一个事件更改了数据状态，数据状态的改变顺便驱动了界面的更新。用 re-frame 框架编程思考时，就是如此，想好数据模型，然后围绕数据作事件的处理，和界面的显示。

数据状态是一个可变的东西，在 clojurescript 中对应的是 atom 类型。re-frame 里实现是用了 reagent/atom 类型， 之所以用这个类型，是因为 reagent/atom 类型是 react 实现里一个重要的数据类型，里面含有了对UI界面的数据绑定的理念，数据一更改，界面就马上感知，自动更新。所以自动更新也让数据状态自动的从第3步被改变了，自动进入后面的显示流程中。这个实现对使用者来说是透明的，无需关心，这里一提而已。

APP 结构组织

应用 re-frame 框架，App的通常的文件组织是这样的:

src
|--- core.cljs 程序入口，路由等
|--- pannel-1 
|--- |---- db.cljs 描述数据状态，比如校验，模型定义等
|--- |---- subs.cljs 描述查询流程，如怎样查询一个数据
|--- |---- views.cljs 描述了显示相关的界面
|--- |---- events.cljs 描述了事件处理
|--- pannel-2
|--- |---- db.cljs
|--- |---- subs.cljs
|--- |---- views.cljs
|--- |---- events.cljs

更多

基本上理解了上面的6步设计，便可以应用 re-frame 编程了。在实际应用的过程中，会有更多细节，如一个事件发生时会连带引起另一个事件。一个事件在处理完成后可能也会引起另外几个事件。这些细节在官方文档中也有相应章节，更多的还是得去看看源码， clojure/clojurescript 的很多库都要入库看源码才能透彻地理解， 这点是让人抓狂的。