2.3.7.15 复杂逻辑
复杂逻辑组件是通过画代码的方式实现一段逻辑。它和在事件中使用自定义有2个区别:一是可以被重复使用,例如:在页面中有2个地方调用同一段逻辑,就可以定义一个复杂逻辑,在2个地方调用。二是可以获得返回值,在表达式编辑器中会显示复杂逻辑组件,这样组件的属性值也可以通过画代码的方法设置。
1、编辑代码
复杂逻辑组件是功能组件,选择复杂逻辑组件,单击属性栏设置区域的“编辑代码”按钮进入画代码界面。
画代码的目标是解决某个特定的问题,解决问题需要有思路,这个思路用代码表现出来便是逻辑。与初中、高中证明数学题一样,逻辑清晰,并把它表达出来是最终的目标。画代码只是把原本程序员一行行手写的代码,改为使用画流程图的方式实现而已。
画代码是实现逻辑的手段,其实也是用一种特殊的语言——程序语言,而不是文字来表达一段意思。平时写文章需要注意分段,分层,分条理。画代码也是一样,要求思路清晰、结构清晰。在画代码的时候,要仔细想想,如何把变量名取得清楚一些,如何把逻辑表现地清晰一些。
(1)开始和结束
一段代码必须有一个开始,如图4-64所示,可以有一个或多个结束,也可以没有结束,如图4-65所示。
图4-64 代码开始
“开始”标识代码的起点。有没有“结束”取决于使用画代码的方式。如果使用的是事件上的自定义画代码,就不需要“结束”。如果是使用复杂逻辑组件,就可以设置“结束”,并在结束中设置“返回值”,这个值就作为请求的返回值,可以在表达式编辑器中使用。
图4-65 代码结束
(2)动作
“动作”就是设置要执行的动作,如图4-66所示。动作是系统API。根据动作的不同,在选择“执行动作”后,可能会设置“目标对象”;在“输入设置”中设置“变量初始值”、“变量类型”;在“输出设置”中设置“返回值类型”、“变量名称”、“使用返回值”和“新增变量”等信息。
图4-66 代码动作
在设置“动作”时,会出现两种页面,一个是选择动作的页面,如图4-68所示。一个是选择值的页面,如图4-67所示。选择动作就是选择一个要执行的动作;选择值就是给动作的某个属性设置值。这两个页面完全不同,即使都显示上下文变量,前者选择变量的方法,后者选择变量的值。
图4-67 设置动作时设置值
图4-58中工具栏上的符号按钮说明如下:
l 数学计算符:+加 -减 *乘 /除 %取余数
l 逻辑预算符:||或者 &&并且 !非
l 比较运算符:>大于 >=大于等于 <小于 <=小于等于 !=不等于 ==等于
l 常用符号:“英文双引号 空格
单击“执行动作”右侧的…按钮,打开选择动作页面。在这里,可以选择组件的API、上下文变量的方法、系统工具类和辅助方法。
l 选择组件的方法
在“组件”下面列出的是页面中引入的组件,每个组件下提供该组件的方法,如图4-68所示。
图4-68 组件的方法
l 选择上下文变量方法
在声明变量、使用动作返回值之后,这些变量就成为上下文变量,即在当前代码中可以访问的变量,根据变量的类型不同,变量的方法也不同,如图4-69所示。
图4-69 上下文变量的方法
l 选择工具类方法
“工具”中列出的都是系统API,如图4-70所示,包括UUID类。
图4-70 工具类的方法
l 选择辅助动作
“辅助动作”下面的3个动作是常用动作,如图4-71所示。声明变量是新建一个简单类型的变量;退出循环是退出当前循环。
图4-71 辅助动作
(3)条件分支和分支合并
在确认订单页面中,提交订单时判断是否选择了收货地址,如果已选择地址,则保存订单,并进入支付页面,如果没选择地址,则提示“请先添加收货地址”,这个场景就是条件分支,根据不同的条件,执行不同的动作。条件分支的条件就设置为:判断订单数据集的收货地址列是否为空。在条件分支后面增加两个动作,分别用两根连接线连接这两个动作。在上面连接线的条件值中选择真,如图4-72所示,表示条件为真时执行这条连接线后面的动作,那么动作就应该设置为:提示 “请先添加收货地址”。两条连接线只在一条上标注条件值即可。没有标注条件值的连接线连接的动作,表示条件为假时执行的动作,此时应该设置为保存订单。
图4-72 条件分支
分支各自结束后,还需要汇聚到一起,继续往下执行,就需要在两条分支的后面连接一个分支合并,在分支合并后再添加新的动作。
(4)循环
在购物车页面中,结算时要将购物车数据集中的数据复制到订单详情数据集中。这就需要循环购物车数据集的所有数据,一条一条的赋值给订单详情数据集。这个场景就是循环,循环对象就是购物车数据集。在循环中添加动作,获取循环变量所有列的值,添加到订单详情数据集中,如图4-73所示。
在循环中添加动作的操作有些特殊。如果选中循环,添加动作,动作就会添加到循环的后面。在循环内添加动作的方法是,在设计区中的网格线上单击,使得设计区的所有图形都处于非选中状态。此时,单击工具栏中的动作,放入循环中,就可以将动作放到循环内。
图4-73 循环
在循环中,循环对象是数据集组件,循环变量就包括数据集组件中的行对象,数据集组件中有多少行,循环就会执行多少次。在循环中执行“获取列值”和“设置列值”动作时,通常需要使用循环变量中的行对象,才能获取到循环中的当前行。将“获取列值”和“设置列值”动作的“输入设置”中的“行”属性设置为“循环变量.行对象”即可,其中“循环变量.行对象”是在表达式编辑器中选择的。
(5)连接线
当一个图形被选中,再单击工具栏上面的一个图形,系统会在被选中图形后面绘制新选择的图形,并且生成连接线,因此通常不需要手工添加连接线。其实图形可以任意放置,连接线也可以重新添加。添加连接线的方法是:在工具栏上选择连接线,将鼠标滑动到连接线起点的图形上,图形会显示出3个大定位点,按住鼠标左键不松手,拖曳到连接线的终点图形,终点图形会出现1个大定位点,拖曳到定位点,松开鼠标,连接线添加完成。
(6)设置返回值
要想在“结束”中设置返回值,必须先在“全局属性”中设置“返回值类型”,如图4-74所示。切换到“全局属性”页,在“返回值类型”中选择一个正确的类型。
图4-74 设置返回值类型
设置“返回值类型”后,单击“结束”,结束的基本设置中就会显示出“返回值”属性,设置一个返回值即可,如图4-75所示。
图4-75 设置返回值
(7)查看代码
画代码是使用画流程图的方式,代替手写代码,因此画代码的结果就是生成代码。有兴趣的话,可以单击“查看代码”看看生成的代码。
(8)启用浏览器调试
在画代码中提供了调试代码的功能,选中“启用浏览器调试”复选框,就在该段代码的开头增加了断点,即插入了debugger;语句。在预览页面中,按F12打开浏览器的开发人员工具,刷新当前页面,执行操作触发复杂代码逻辑,开发人员工具执行到断点,进入调试界面。调试代码的具体方法参见“14.4.4调试JS”一节。
2、基础属性
复杂逻辑组件提供1个基础属性:显示名称,用于在表达式编辑器的函数区域中显示复杂逻辑。
3、操作
复杂逻辑组件提供1个操作:执行,用于在组件的事件中执行复杂逻辑。
4、在表达式编辑器中使用
页面中添加复杂逻辑组件,并设置“显示名称”属性后,在表达式编辑器的函数区域中,会显示出来,如图4-76所示。在函数区域中显示出了“显示名称”属性定义为“获取编号”的复杂逻辑。复杂逻辑的使用方法和函数区域中的其它函数一样。
图4-76 表达式编辑器中使用复杂逻辑
5、示例
购物车中商品合计的计算逻辑为:只计算选中状态为1的商品的合计。采用复杂逻辑实现该业务功能,复杂逻辑共包含7个动作,1个分支条件和1个循环,如图4-77所示。
图4-77 购物车合计画代码
表4-12列出了逻辑图中各步骤的说明及编号。
表4-12 逻辑说明
步骤 |
购物车商品总计逻辑 |
||
1 |
声明一个变量sum=0 |
||
2 |
循环购物车数据集 |
||
3 |
获取循环项中选中状态的列值checked |
||
4 |
获取循环项中折扣价的列值price |
||
5 |
获取循环项中数量的列值num |
||
6 |
判断checked是否等于1 |
||
7 |
是 |
9 |
否 |
8 |
修改变量sum=sum+ price*num |
10 |
退出当前循环 |
11 |
结束返回sum |
表4-13列出了7个动作的属性设置。
表4-13 动作属性设置
步骤 |
动作 |
调用设置 |
输入设置 |
输出设置 |
1 |
辅助动作→声明变量 |
执行动作=变量声明 |
变量初始值=0 |
返回值类型=含小数数字 变量名称=sum |
3 |
组件→业务数据→获取列值 |
执行动作=获取列值 目标对象=购物车 |
列名称=选中状态 行=item.行对象 |
返回值类型=字符串 使用返回值=是 新建变量=是 变量名称=checked |
4 |
组件→业务数据→获取列值 |
执行动作=获取列值 目标对象=购物车 |
列名称=商品ID-折扣价 行=item.行对象 |
返回值类型=字符串 使用返回值=是 新建变量=是 变量名称=price |
5 |
组件→业务数据→获取列值 |
执行动作=获取列值 目标对象=购物车 |
列名称=数量 行=item.行对象 |
返回值类型=字符串 使用返回值=是 新建变量=是 变量名称=num |
8 |
辅助动作→修改变量 |
执行动作=修改变量
|
变量值= sum + price * num |
返回值类型=含小数数字 变量名称=sum |
10 |
辅助动作→退出循环 |
|
|
|
表4-14列出了条件分支及两条连接线的属性设置。
表4-14 条件分支属性设置
步骤 |
图形 |
属性设置 |
6 |
条件分支 |
条件=checked==1 |
7 |
条件为真的连接线 |
条件值=true |
9 |
条件为假的连接线 |
条件值不需要设置 |
表4-15列出了循环的属性设置。
表4-15 循环属性设置
步骤 |
图形 |
属性设置 |
2 |
循环 |
循环对象=购物车 循环变量名称=item |
逻辑图画好后,单击“确定”按钮关闭代码编辑器,修改复杂逻辑组件的“显示名称”属性为“商品合计”。在显示商品合计的文本组件的动态文本属性中,打开表达式编辑器,选择“商品合计()”,运行后即可在文本中显示出合计金额。