优维低代码:Context 上下文

2023-11-06 12:59

本文主要是介绍优维低代码:Context 上下文,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

导语

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。


连载第二十三期

《高级指引:Context 上下文

有时候我们需要在多个构件之间交换数据。在 React 中,我们通常使用 Context 来解决这样的问题。在 Storyboard 中我们也可以使用类似的机制来解决编排时处理构件间的数据交换问题。

# 示例

Context 分为定义及使用,在路由或构件处可以定义 Context,该 Context 可以在定义它的路由或构件所包裹的所有内部构件(及 useBrick)使用。

定义方式一(自由变量):

routes:  - path: "${APP.homepage}/your-page"    context:      - name: myContext        # 初始 `value` 可以使用占位符。        value:          quality: good
      # 初始 `value` 是可选的。      - name: myAnotherContext

定义方式二(异步 Resolve 的自由变量):​​​​​​​

routes:  - path: "${APP.homepage}/your-page"    context:      - name: myAsyncContext        resolve:          useProvider: my-provider          # 默认将使用 Provider 返回的数据作为该 Context 的值(brick_next >= 1.25.2 支持)。          # 如果需要转换数据,注意需使用 transform 后的 value 值。          transform:            # `CTX.myAsyncContext` 的值将是 `DATA.hostname`。            value: "<% DATA.hostname %>"

定义方式三(绑定构件属性):​​​​​​​

bricks:  - brick: my.source-brick    context:      - name: myContextRelatedToProp        property: sourceProp

已废弃定义方式(绑定构件属性):​​​​​​​

bricks:  - brick: my.source-brick    exports:      sourceProp: CTX.myContextRelatedToProp

绑定构件属性的方式实际存储的是引用关系,在消费时实时获取。对于以上 Context,使用 <% CTX.myContextRelatedToProp %> 获取的值为 my.source-brick 的属性 sourceProp 的值。

使用方式:​​​​​​​

bricks:  - brick: my.source-brick    events:      something.change:        # - 'context.assign': use `Object.assign(context, newValue)` to update current context.        #   function contextAssign(contextName, newValue) => void        #        # - 'context.replace': use `context = newValue` to replace current context.        #   function contextReplace(contextName, newValue) => void        action: "context.assign"        args:          - myContext          - quality: better
  - brick: my.trigger-brick    events:      something.submit:        target: my.submit-provider        method: resolve        args:          - q: "<% CTX.myContext %>"

在占位符中可以使用 CTX.contextName 获得名字为 contextName 的上下文的值;对于事件则提供了 context.assign 和 context.replace 两个内置动作,更多信息请参考 Events 事件 > 内建处理器:context.*。

注意:不能对绑定构件属性的 Context 执行 context.* 操作。

# 条件判断 If

对于使用自由变量或 Resolve 方式的 Context,可以配置 if 来按条件决定是否启用对应的 Context。更多关于条件判断的说明请参考 If 条件渲染。

例如:​​​​​​​

context:  - name: "myData"    if: '<% !FLAGS["my-flag"] %>'    value: "My default value"  - name: "myData"    if: '<% FLAGS["my-flag"] %>'    resolve:      useProvider: "my.any-provider"

上述配置将在开关 my-flag 关闭时,将 CTX.myData 设置为固定值 "My default value",而 my-flags 打开时,则将 CTX.myData 设置为 my.any-provider 的请求结果。被忽略的 Context 不会生效,也不会发起请求。

另外 Resolve 配置中的 if 同样有效,例如:​​​​​​​

context:  - name: "myData"    resolve:      if: '<% FLAGS["my-flag"] %>'      useProvider: "my.any-provider"

⊙NOTE

需要声明依赖 brick_next: ^2.22.13。

# 变更事件

有时候我们希望声明一个 Context 变量,但不对它立即赋值,而是通过特定事件触发赋值,并且希望能监听其变更事件。

可以在声明 Context 时定义 onChange,例如:​​​​​​​

path: "/my-app"context:  - name: "myData"    value:      status: "loading"    # `onChange` 和其它事件处理接口一样,    # 可以设置为单个或多个(数组)事件处理器。    onChange:      target: "#myBrick"      properties:        someProp: "<% EVENT.detail.status %>"    # 另注:不能对绑定构件属性的 Context 设置 `onChange` 事件。

然后在特定条件发生时再对其赋值,例如:​​​​​​​

brick: "any-brick"events:  success:    action: "context.assign"    args:      - status: "loaded"  error:    action: "context.assign"    args:      - status: "failed"

当 Context 发生变化时,onChange 注册的事件处理器将被调用,传递的事件对象的 detail 为该 Context 的值。关于 Context 变更操作请参考 Events 事件 > 内建处理器:context.*。

⊙NOTE

使用 onChange 需要声明依赖 brick_next: ^2.19.7。

# 注意事项

在事件回调里始终能拿到当事件发生时、最新的 Context 的值,而在属性中,默认只能在构件初始时拿到 Context 的初始值,此时该 Context 相当于一个应用的常量,例如:​​​​​​​

bricks:  - brick: my.another-brick    properties:      oneProp: "<% CTX.myContext %>"

当 Context 值变化时,my.another-brick 的对应属性不会自动更新。框架理论上可以实现联动更新,但相对困难,后续将视实际场景需求决定是否支持。

# 构件属性追踪 Context 变更

如果希望构件的属性能跟随 Context 的变化而变化,可以在表达式前面添加一句 "track context", (逗号运算符),可以激活 Context 追踪模式,当表达式中引用的 Context 变化时,该属性将自动重新计算并赋值。

例如:​​​​​​​

bricks:  - brick: my.any-brick    properties:      anyProp: "<% 'track context', CTX.myContext + CTX.myAnotherContext %>"

当 myContext 或 myAnotherContext 任一值改变时,my.any-brick 将重新计算并赋值给属性 anyProp。注意 "track context" 仅用于第一层属性赋值,可以用于自定义模板,但目前不能用于 useBrick 的构件属性。

⊙NOTE

这里参考了 "use strict"; 的用法,并利用了逗号运算符返回最后一个运算对象的特性。

⊙NOTE

使用 "track context" 需要声明依赖 brick_next: ^2.27.24。

# 懒加载

默认情况下,如果 Context 定义为 Resolve,它会在页面加载前发起请求并阻塞渲染,但有些数据并不着急需要,可能只需在特定条件下再发起请求即可(例如打开抽屉时)。这时可以标记 resolve.lazy: true 将它设置为懒加载,该数据将不会默认发送请求,需要开发者在特定条件下主动触发 context.load 来发起请求。​​​​​​​

context:  - name: "myLazyData"    resolve:      useProvider: "my-provider"      lazy: true    # 可以为懒加载的数据配置一个初始值,默认为 `undefined`    value: "Initial"​​​​​​​
brick: "my-brick"properties:  dataSource: '<% "track context", CTX.myLazyData %>'events:  button.click:    action: "context.load"    args:      - "myLazyData"

⊙NOTE

context.load 将确保一个 Context 只会被加载一次,避免发起重复的数据请求。虽然 context.refresh 也可以用于主动加载一个标记了懒加载的 Context,但通常情况下这里我们应该使用 context.load 来避免发起重复的请求。

context.load 和 context.refresh 同时还支持配置回调事件:​​​​​​​

events:  button.click:    action: "context.load"    args:      - "myLazyData"    callback:      success:        action: console.log        args:          # Success 事件详情为更新后的 Context 值          - "<% EVENT.detail %>"      error:        action: console.error        args:          # Error 事件详情为错误对象          - "<% EVENT.detail %>"      finally:        action: console.info

# 主动强制更新

内置事件 context.refresh 可以强制更新一个设置了异步请求的 Context。​​​​​​​

brick: "my-brick"events:  button.click:    action: "context.refresh"    args:      - "myAnyData"

context.refresh 也支持配置回调事件,相关示例请见本文上一节。

# 依赖追踪

前面我们提到了 "track context" 用于构件属性自动追踪 Context 的更新,另一方面,我们还提供了让 Context 可以追踪其自身依赖的 Context 的能力。

例如:​​​​​​​

context:  - name: "myTrackableData"    track: true    resolve:      useProvider: my-provider      args:        - <% CTX.myDepA %>        - <% CTX.myDepB %>

标记 track: true 后,当 myDepA 或 myDepB 变更时(使用 context.replace/context.refresh 等),myTrackableData 会自动重新发起请求并计算得到新的值。

对于普通变量的数据也可以追踪:​​​​​​​

context:  - name: myTrackableData    track: true    value: "<% CTX.myDepA + CTX.myDepB %>"

⊙NOTE

对于指定了 track: true 的异步 Context,追踪到依赖变化后,将重新计算相关参数,但如果计算得到的请求参数没有发生任何变化,此时将命中缓存,不会发起新的请求。如果业务上需要强制更新数据,应使用 context.refresh,该方法将忽略请求缓存。

这篇关于优维低代码:Context 上下文的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/356771

相关文章

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1,PDF转Word2,PDF转Excel三、前端页面效果展示总结一

在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中,<trim>元素用于动态地添加SQL语句的一部分,例如SET或W

使用C#代码计算数学表达式实例

《使用C#代码计算数学表达式实例》这段文字主要讲述了如何使用C#语言来计算数学表达式,该程序通过使用Dictionary保存变量,定义了运算符优先级,并实现了EvaluateExpression方法来... 目录C#代码计算数学表达式该方法很长,因此我将分段描述下面的代码片段显示了下一步以下代码显示该方法如

python多进程实现数据共享的示例代码

《python多进程实现数据共享的示例代码》本文介绍了Python中多进程实现数据共享的方法,包括使用multiprocessing模块和manager模块这两种方法,具有一定的参考价值,感兴趣的可以... 目录背景进程、进程创建进程间通信 进程间共享数据共享list实践背景 安卓ui自动化框架,使用的是

SpringBoot生成和操作PDF的代码详解

《SpringBoot生成和操作PDF的代码详解》本文主要介绍了在SpringBoot项目下,通过代码和操作步骤,详细的介绍了如何操作PDF,希望可以帮助到准备通过JAVA操作PDF的你,项目框架用的... 目录本文简介PDF文件简介代码实现PDF操作基于PDF模板生成,并下载完全基于代码生成,并保存合并P

SpringBoot基于MyBatis-Plus实现Lambda Query查询的示例代码

《SpringBoot基于MyBatis-Plus实现LambdaQuery查询的示例代码》MyBatis-Plus是MyBatis的增强工具,简化了数据库操作,并提高了开发效率,它提供了多种查询方... 目录引言基础环境配置依赖配置(Maven)application.yml 配置表结构设计demo_st

SpringCloud集成AlloyDB的示例代码

《SpringCloud集成AlloyDB的示例代码》AlloyDB是GoogleCloud提供的一种高度可扩展、强性能的关系型数据库服务,它兼容PostgreSQL,并提供了更快的查询性能... 目录1.AlloyDBjavascript是什么?AlloyDB 的工作原理2.搭建测试环境3.代码工程1.

Java调用Python代码的几种方法小结

《Java调用Python代码的几种方法小结》Python语言有丰富的系统管理、数据处理、统计类软件包,因此从java应用中调用Python代码的需求很常见、实用,本文介绍几种方法从java调用Pyt... 目录引言Java core使用ProcessBuilder使用Java脚本引擎总结引言python

Java中ArrayList的8种浅拷贝方式示例代码

《Java中ArrayList的8种浅拷贝方式示例代码》:本文主要介绍Java中ArrayList的8种浅拷贝方式的相关资料,讲解了Java中ArrayList的浅拷贝概念,并详细分享了八种实现浅... 目录引言什么是浅拷贝?ArrayList 浅拷贝的重要性方法一:使用构造函数方法二:使用 addAll(

JAVA利用顺序表实现“杨辉三角”的思路及代码示例

《JAVA利用顺序表实现“杨辉三角”的思路及代码示例》杨辉三角形是中国古代数学的杰出研究成果之一,是我国北宋数学家贾宪于1050年首先发现并使用的,:本文主要介绍JAVA利用顺序表实现杨辉三角的思... 目录一:“杨辉三角”题目链接二:题解代码:三:题解思路:总结一:“杨辉三角”题目链接题目链接:点击这里