driven/upper

Fabric引擎

前端事件生成和调度专用。

1. DataEvent核心数据结构

Fabric引擎中的核心数据结构是DataEvent,结构参考代码。

2. 事件配置案例

{
     "event": {
         "onSelect": {
             "IDENTIFIER": {
                 "target": "73ac2517-15f9-42be-b187-e571af54ede9",
                 "fabric": [
                     "TREE_SELECT,CURRENT",
                     "UNIQUE,LITERAL",
                     "FILTER,EQ,key",
                     "UNIQUE,data.identifier"
                 ]
             },
             "RECORD": {
                 "target": "73ac2517-15f9-42be-b187-e571af54ede9",
                 "fabric": [
                     "TREE_SELECT,PARENT_ALL_INCLUDE",
                     "ZIP,INDEX_TO,0=categoryFirst`1=categorySecond`2=categoryThird"
                 ]
             },
             "QUERY": {
                 "target": "73ac2517-15f9-42be-b187-e571af54ede9",
                 "fabric": [
                     "TREE_SELECT,PARENT_ALL_INCLUDE",
                     "ZIP,INDEX_TO,0=categoryFirst`1=categorySecond`2=categoryThird"
                 ]
             }
         }
     }
}

上述配置中,会生成onSelect事件函数,且这个时间函数会触发三个Fabric

  1. IDENTIFIER
  2. RECORD
  3. QUERY

这三个Fabric的作用组件都为73ac2517-15f9-42be-b187-e571af54ede9,这是一个并行事件触发。

Methods

(static) acCriteria(algorithm) → {*}

「Monad」Ex.acCriteria

Parameters:
Name Type Description
algorithm
Returns:
Type
*

(async, static) etParallel(reference, event) → {Promise.<T>}

「Monad」Ex.etParallel

传入event是并行事件队列,每个队列中包含不同的 fabric 以及对应被影响的 target 组件信息,每个 处理都是执行的 DataEvent

-> Start -> DataEvent
         -> DataEvent
         -> DataEvent

所有的 DataEvent 之间互不影响,会并行执行。

Parameters:
Name Type Description
reference Object | ReactComponent

React对应组件引用。

event Object

并行事件配置

Returns:

返回最终的 Promise

Type
Promise.<T>

(async, static) etPure(reference, fabric) → {Promise.<T>}

「Monad」Ex.etPure

生成带DataEvent参数的专用函数,事件处理专用,处理纯事件执行,使用内置事件名称:

  • 内置事件:FABRIC(纯事件)
Parameters:
Name Type Description
reference Object | ReactComponent

React对应组件引用。

fabric Array

处理 fabric 数组配置。

Returns:

返回执行的 Promise

Type
Promise.<T>

(async, static) etSequence(reference, event) → {Promise.<T>}

「Monad」Ex.etSequence

传入event中的事件队列配置,事件队列中的每一个元素可以生成对应的DataEvent,而且按 顺序执行:

DataEvent -> DataEvent -> DataEvent -> ...

整个DataEvent会按照事件队列依次执行。

Parameters:
Name Type Description
reference Object | ReactComponent

React对应组件引用。

event Array

事件队列

Returns:

返回最终的 Promise

Type
Promise.<T>

(async, static) etUniform(reference, event) → {Promise.<T>}

「Monad」Ex.etUniform

event的触发流程:

  • 如果event是一个Array,则顺序执行。
  • 如果event是一个Object,则并行执行。

统一事件调度专用。

Parameters:
Name Type Description
reference Object | ReactComponent

React对应组件引用。

event Array | Object

根据事件传入数据结构判断哪一种执行方式。

Returns:

返回执行的 Promise

Type
Promise.<T>

(static) rxChannel(reference) → {function}

「引擎」Ex.rxChannel

1.基本介绍

rxChannel为顶层穿透函数,主要用于执行Extension中Origin X引擎专用,在整个Ox系列的组件中,组件和组件之间的调用流程使用Channel架构,而在Channel内部执行事件集合,它可以支持:

  • 触发事件
  • 一次事件
  • 并行事件
  • 串行事件

组件本身调用其他组件过程时,除了执行内部方法以外,还执行rxChannel穿透调用。

2.核心

2.1.Fabric

  1. 该函数会读取state中的$fabric变量,触发Fabric引擎。
  2. rxChannel通道函数多为抽象函数,本身不带任何代码逻辑,而是根据传入的Fabric配置执行不同代码逻辑。
  3. 代码逻辑以片段为主,定义了片段后,根据片段配置执行下一步操作。
  4. 其设计思路近似于汇编,用代码节点来编织。

2.2.rxChannel

rxChannel方法会更新$fabric的变更信息,一旦变更,则会通知所有和当前$fabric相关的组件提示数据和配置产生了变化。

如下图:

                   ComponentA   ----- rxChannel触发点
                   /        \
            ComponentB     ComponentC
            /        \
      ComponentD    ComponentE

例如上述结构中:

  1. rxChannel实际上更改的是ComponentA组件中的$fabric状态值。
  2. 被更改的$fabric会以ComponentA为父节点,向所有子节点传递。
  3. 子节点中会有专用方法判断哪一部分的$fabric更改执行自我刷新,等价于子节点订阅了$fabric中的部分数据。

一旦配置了行为过后,这些行为就实现了相互影响和编连,对于不编程只配置的程序逻辑而言,Fabric就是核心。

Parameters:
Name Type Description
reference Object | ReactComponent

React对应组件引用。

Returns:

返回 $fabric 专用函数。

Type
function