前端process-definition框架

                                                                                        前端process-definition框架

1. 
   概述

为了简化前端开发，现开发process-definition框架，简化前端开发工作。

源码地址:https://gitee.com/hushaoli/process-definition.git

process-definition框架优点如下：

1. 使用责任链模式，动态设置函数调用顺序，形成不同的函数调用流程。
2. 支持流程中加入定时器，在定时器触发时，会自动结束流程。
3. 使用策略模式， 支持动态选择不同流程。
4. 流程中的每个函数，支持增加预处理和后处理方法。
5. 流程中的每个函数，支持增加异常处理函数。
6. 流程支持跳转功能，在跳转到另一个页面的时候，会自动结束当前页面的流程。
7. 支持手动停止流程。
8. 支持函数中加入定时器（以下简称节点定时器），节点定时器的声明周期仅限于当前函数。在当前函数结束的时候，会自动销毁节点定时器。

1. 框架安装

将process-definition.js文件放到项目中即可完成框架安装。

1. 框架导入

         mpvue使用 

         通过 import process_def from “process-definition.js” 导入框架组件.

1. 框架使用

假设有一个流程，需要按顺序调用f1,f2,f3.

1. 定义流程

//创建流程,流程名称为process_name process_def.addProcess(“process_name”) //增加流程的第一个函数 .add(this.f1) //增加流程的第二个函数 .add(this.f2) //增加流程的第三个函数 .add(this.f3);

1. 预处理函数

预处理函数表示在执行特定方法之前，会先调用该预处理方法。

声明预处理函数，需要在当前主方法之后，且在下一个主方法之前定义。

//创建流程,流程名称为process_name process_def.addProcess(“process_name”) //增加流程的第一个函数 .add(this.f1) //增加流程的第一个函数的预处理方法 .add_pre(this.f1_pre) //增加流程的第二个函数 .add(this.f2) //增加流程的第二个函数的预处理方法 .add_pre(this.f2_pre) //增加流程的第三个函数 .add(this.f3);

上述流程函数执行顺序为

f1_pre->f1->f2_pre->f2->f3

1. 
   后处理函数

预处理函数表示在执行特定方法之后，会调用该后处理方法。

声明后处理函数，需要在当前主方法之后，且在下一个主方法之前定义。

//创建流程,流程名称为process_name process_def.addProcess(“process_name”) //增加流程的第一个函数 .add(this.f1) //增加流程的第一个函数的后处理方法 .add_after(this.f1_after) //增加流程的第二个函数 .add(this.f2) //增加流程的第二个函数的后处理方法 .add_after(this.f2_after) //增加流程的第三个函数 .add(this.f3);

1. 异常函数

当流程中某一个函数出现异常时，会自动调用对应函数的异常方法。

声明方式如下：

//创建流程,流程名称为process_name process_def.addProcess(“process_name”) //增加流程的第一个函数 .add(this.f1) //增加流程的第一个函数的异常处理 .add_err(this.f1_err) .add(this.f3);

当f1出现异常，会自动捕获异常，并调用f1_err方法。

同时，流程可以定义默认异常处理函数。

在定义了默认异常处理函数之后，如果某一个函数没有声明对应的异常函数，那么会自动调用默认异常处理函数。反之，如果摸一个函数声明了对应的异常函数，则优先调用对应的异常函数。

//创建流程,流程名称为process_name process_def.addProcess(“process_name”) //增加默认异常处理函数 .add_err_default(this.err_default) //增加流程的第一个函数 .add(this.f1) //增加流程的第一个函数的异常处理 .add_err(this.f1_err) .add(this.f3);

上述情况，如果f3出现异常错误，会调用err_default函数。

f1出现异常错误，会调用f1_err函数。

1. 使用流程

//getProcess方法获取流程实例 //start方法，开始执行流程方法 process_def.getProcess(“process_name”).start();

1. 停止流程

//getProcess方法获取流程实例 //stop方法，开始执行流程方法 process_def.getProcess(“process_name”).stop();

1. 定时器

//getProcess方法获取流程实例 //this.TimerFun为超时触发的方法， 1000表示超时时间（单位毫秒） process_def.addProcess(“process_name”).addTimer(this.timerFun, 1000)

 

1. 
   选择器

不同的场景，可能执行不同的流程。例如支付流程，如果是支付宝，则执行支付宝流程。 如果是微信，则需要执行微信流程。

1. 定义选择器

//payFilter表示选择器名称(后面可以根据该名称调用该选择器) //this.filter为选择器实现函数（返回为流程名称） //params 为选择器实现函数的入参 process_def.addFilter("payFilter", this.filter, params);

This.filter实现: filter : function() {        If (条件满足支付宝支付条件) {       return “alipay”; } If (条件满足微信支付条件) {       return “wxpay”; } }

1. 选择器使用

//getFilter 表示获取选择器实例 //getProcess获取对应的选择器 //start表示开始执行流程函数 process_def.getFilter("payFilter").getProcess().start();

 

1. 流程跳转

流程跳转时，会先停止当前页面流程。然后进行跳转操作。

跳转方式包括：reLaunch redirectTo navigateTo navigateBack

process_def.getProcess(“process_name”).reLaunch("./../lock/lock");

 

1. 节点内定时器

该定时器与节点函数绑定，作用域仅限于当前函数。若当前函数执行完毕，定时器也会被销毁。让开发人员主需要关注定时器中业务代码实现，而无需关注定时器何时应该被销毁。

应用场景： 例如手机支付， 可以通过定时器来定期查询支付结果。 若支付成功，则跳转到下一个节点函数，同时销毁定时器。

var timeoutFun = setTimeout(()=>{ //具体业务逻辑 }); process_def.getProcess(this.process_name).setSysTimer(timeoutFun);