一个只有99行代码的JS流程框架(二)
来源:互联网 发布:怎样才能加入淘宝商城 编辑:程序博客网 时间:2024/06/06 07:44
张镇圳,腾讯Web前端高级工程师,对内部系统前端建设有多年经验,喜欢钻研捣鼓各种前端组件和框架。
导语
前面写了一篇文章,叫《一个只有99行代码的JS流程框架》,虽然该框架基本已经能实现一个流程正常的逻辑流转,但是在分模块应用下还是缺少一定的能力,无法将一个页面中的不同模块很好的连接在一起,于是对之前的框架进行了升级,新增了子流程的概念。
子流程
什么是子流程?在这个升级后的框架里(当然代码已经不止99行了,不要在乎标题),每个步骤不但可以是一个function,还可以引用另一个流程,这个被引用的流程就叫子流程。先看个简单的例子:
flowJS({ init:function(){ this.setNext('步骤A').setNext('步骤B').setNext('步骤C'); this.next(); }, '步骤A':function(){ this.next(); }, '步骤B':{ init:function(){ this.setNext('子步骤B1').setNext('子步骤B2').setNext('子步骤B3'); this.next(); }, '子步骤B1':function(){ this.next(); }, '子步骤B2':function(){ this.next(); }, '子步骤B3':function(){ this.parent.next(); } }, '步骤C':function(){ console.log('执行 步骤C'); console.log('当前流程运行的轨迹:'); console.log(flowJS.trace); }});
上面这个例子中,步骤B对应的对象就是子流程。
还可以有另一种写法,也是对分模块应用的更好的实现:
/*定义子流程*/flowJS('子流程B', { init:function(){ this.setNext('子步骤B1').setNext('子步骤B2').setNext('子步骤B3'); this.next(); }, '子步骤B1':function(){ this.next(); }, '子步骤B2':function(){ this.next(); }, '子步骤B3':function(){ this.parent.next(); }});/*父流程*/flowJS({ init:function(){ this.setNext('步骤A').setNext('步骤B').setNext('步骤C'); this.next(); }, '步骤A':function(){ this.next(); }, '步骤B':'子流程B', '步骤C':function(){ console.log('执行 步骤C'); console.log('当前流程运行的轨迹:'); console.log(flowJS.trace); }});
可以看到,父流程的 步骤B 引用了前面定义的 子流程B,这样对于一些公共的流程逻辑就可以单独抽取出去作为子流程,被其他父流程引用。而子流程与父流程的交互,我们可以在代码中通过 this.parent 来实现。
在子流程的每一步中都可以获取 this.parent,得到的是当前子流程对应的步骤,这个步骤跟其他步骤一样也具有同样的API(详见上一篇文章《一个只有99行代码的JS流程框架》对步骤API的介绍)。
另外,需要说明的一点:这次的升级,并没有对流程步骤的API做改变,仅仅是引入了子流程的使用方式,其实就是定义子流程,然后引用子流程,接着就是父流程和子流程之间的交互。
同样,按照规矩,贴上code(例子的序号接上前篇文章的序号,从10开始)
最简单的子流程使用方法
flowJS({ init:function(){ console.log('执行 init'); this.setNext('步骤A').setNext('步骤B').setNext('步骤C'); this.next(); }, '步骤A':function(){ console.log('执行 步骤A'); this.next(); }, '步骤B':{ init:function(){ console.log('执行 子步骤B init'); this.setNext('子步骤B1').setNext('子步骤B2').setNext('子步骤B3'); this.next(); }, '子步骤B1':function(){ console.log('执行 子步骤B1'); this.next(); }, '子步骤B2':function(){ console.log('执行 子步骤B2'); console.log('上一步 :'+this.getPrev()); //打印:子步骤B1 console.log('当前步 :'+this.getCurr()); //打印:子步骤B2 console.log('下一步 :'+this.getNext()); //打印:子步骤B3 this.next(); }, '子步骤B3':function(){ console.log('执行 子步骤B3'); this.parent.next(); } }, '步骤C':function(){ console.log('执行 步骤C'); console.log('当前流程运行的轨迹:'); console.log(flowJS.trace); }});
执行结果:
子流程和父流程 通过 this.parent 进行交互
flowJS({ init:function(){ console.log('执行 init'); this.setNext('步骤A').setNext('步骤B').setNext('步骤C'); this.next(); }, '步骤A':function(){ console.log('执行 步骤A'); this.nextData({name1:'value1'}); this.flowData({name2:'value2'}); this.next(); }, '步骤B':{ init:function(){ console.log('执行 子步骤B init'); this.setNext('子步骤B1').setNext('子步骤B2').setNext('子步骤B3'); this.next(); }, '子步骤B1':function(){ console.log('执行 子步骤B1'); this.nextData({name3:'value3'}); this.flowData({name4:'value4'}); this.next(); }, '子步骤B2':function(){ console.log('执行 子步骤B2'); console.log('父步骤的上一步 :'+this.parent.getPrev());//打印:步骤A console.log('父步骤的步骤名 :'+this.parent.getCurr());//打印:步骤B console.log('父步骤的下一步 :'+this.parent.getNext());//打印:步骤C console.log('父步骤的数据:'); console.log(this.parent.stepData());//打印:Object {name1: "value1"} console.log(this.parent.flowData());//打印:Object {name2: "value2"} console.log('上一步 :'+this.getPrev());//打印:子步骤B1 console.log('当前步 :'+this.getCurr());//打印:子步骤B2 console.log('下一步 :'+this.getNext());//打印:子步骤B3 console.log('当前步的数据:'); console.log(this.stepData());//打印:Object {name3: "value3"} console.log(this.flowData());//打印:Object {name4: "value4"} this.next(); }, '子步骤B3':function(){ console.log('执行 子步骤B3'); this.parent.nextData({name5:'value5'}); this.parent.flowData({name6:'value6'}); this.parent.next(); } }, '步骤C':function(){ console.log('执行 步骤C'); console.log(this.stepData());//打印:Object {name5: "value5"} console.log(this.flowData());//打印:Object {name2: "value2", name6: "value6"} console.log('当前流程运行的轨迹:'); console.log(flowJS.trace); }});
执行结果:
多个子流程并行执行
flowJS({ init:function(){ console.log('执行 init'); this.setNext('步骤A').setNext(['步骤B', '步骤C']).setNext('步骤D'); this.next(); }, '步骤A':function(){ console.log('执行 步骤A'); this.next(); }, '步骤B':{ init:function(){ console.log('执行 子步骤B init'); this.setNext('子步骤B1').setNext('子步骤B2').setNext('子步骤B3'); this.next(); }, '子步骤B1':function(){ console.log('执行 子步骤B1'); this.next(); }, '子步骤B2':function(){ console.log('执行 子步骤B2'); this.next(); }, '子步骤B3':function(){ var self = this; //这里打印的时间和 子步骤C3 的时间一样 console.log('执行 子步骤B3 时间:' + new Date().getSeconds()); setTimeout(function(){ self.parent.next(); }, 2000); } }, '步骤C':{ init:function(){ console.log('执行 子步骤C init'); this.setNext('子步骤C1').setNext('子步骤C2').setNext('子步骤C3'); this.next(); }, '子步骤C1':function(){ console.log('执行 子步骤C1'); this.next(); }, '子步骤C2':function(){ console.log('执行 子步骤C2'); this.next(); }, '子步骤C3':function(){ var self = this; //这里打印的时间和 子步骤B3 的时间一样 console.log('执行 子步骤C3 时间:' + new Date().getSeconds()); setTimeout(function(){ self.parent.next(); }, 2000); } }, '步骤D':function(){ //这里打印的时间比上面的子流程的时间晚2秒,因为两个子流程是并行执行的 console.log('执行 步骤D 时间:' + new Date().getSeconds()); console.log('当前流程运行的轨迹:'); console.log(flowJS.trace); }});
执行结果:
定义子流程和引用子流程
flowJS('子流程A', { init:function(){ this.next('子步骤A1'); }, '子步骤A1':function(){ console.log('执行 子步骤A1'); console.log('当前步骤:'+this.getCurr());//打印:子步骤A1 console.log('父步骤:'+this.parent.getCurr());//打印:步骤A this.parent.next(); }});flowJS('子流程B', { init:function(){ console.log('执行 子步骤B init'); this.setNext('子步骤B1').setNext('子步骤B2').setNext('子步骤B3'); this.next(); }, '子步骤B1':function(){ console.log('执行 子步骤B1'); this.next(); }, '子步骤B2':function(){ console.log('执行 子步骤B2'); this.next(); }, '子步骤B3':function(){ console.log('执行 子步骤B3'); console.log('当前步骤:'+this.getCurr());//打印:子步骤B3 console.log('父步骤:'+this.parent.getCurr());//打印:步骤B this.parent.next(); }});flowJS('子流程C', { init:function(){ console.log('执行 子步骤C init'); this.setNext('子步骤C1').setNext('子步骤C2').setNext('子步骤C3'); this.next(); }, '子步骤C1':function(){ console.log('执行 子步骤C1'); this.next(); }, '子步骤C2':function(){ console.log('执行 子步骤C2'); this.next(); }, '子步骤C3':function(){ console.log('执行 子步骤C3'); console.log('当前步骤:'+this.getCurr());//打印:子步骤C3 console.log('父步骤:'+this.parent.getCurr());//打印:步骤C this.parent.next(); }});flowJS({ init:function(){ console.log('执行 init'); this.setNext('步骤A').setNext(['步骤B', '步骤C']).setNext('步骤D'); this.next(); }, '步骤A':'子流程A', '步骤B':'子流程B', '步骤C':'子流程C', '步骤D':function(){ console.log('当前流程运行的轨迹:'); console.log(flowJS.trace); }});
* 执行结果:*
从上面几个例子可以看到,子流程和父流程之间的信息交互非常简单,其实就是通过this.parent来获取到父步骤,通过父步骤来获取和传递数据,因此也能让这个流程框架拥有更大能力来适应更多的应用场景。
为了方便交流学习,上面例子完整代码可通过附件下载,最后同样贴上框架源码:
相关阅读
一个只有99行代码的JS流程框架 (一)
JavaScriptCore全面解析 (上篇)
JavaScriptCore全面解析 (下篇)
此文已由作者授权腾讯云技术社区发布,转载请注明文章出处
原文链接:https://www.qcloud.com/community/article/318172
获取更多腾讯海量技术实践干货,欢迎大家前往腾讯云技术社区
- 一个只有99行代码的JS流程框架(二)
- 一个只有99行代码的JS流程框架(二)
- 一个只有99行代码的JS流程框架
- 一个只有99行代码的JS流程框架
- 腾讯云教你一个只有99行代码的JS流程框架
- struts2框架的执行流程(二)
- 好的代码只有一个return
- 封装框架(二)框架的运行流程
- 一个incoming call的流程 (来电话代码流程)
- Java GUI之创建一个只有两个按钮的框架
- app只有一个activity的ui框架设计猜想
- spring MVC框架的配置流程(代码详解)
- js 里面if()括号里只有一个参数是什么意思
- 一个400行代码的网页游戏(二)
- 简单的activiti5流程框架代码实现:
- lua开源测试框架busted源码学习(二)--代码框架分析和用例执行流程
- 一个翻页的JS代码
- draft.js--富文本编辑器框架的实践(二)
- spark mllib源码分析之随机森林(Random Forest)(二)
- InputStream的mark和reset
- BZOJ 2733 [HNOI2012] 永无乡 [线段树+并查集做法]
- Linux中对文件描述符的操作(FD_ZERO、FD_SET、FD_CLR、FD_ISSET
- java.util.regex.PatternSyntaxException: Unclosed counted closure near index 14
- 一个只有99行代码的JS流程框架(二)
- H5 App设计者需要注意的问题
- laravel框架-任务调度-知识点总结
- RANSAC 原理
- java提高篇----详解内部类
- ioctl -构造命令编号 _IO,_IOW,_IOR,_IOWR
- JMS&MQ,从入门到精通(一)
- Linux文件压缩
- Centos6.7 64位安装配置kvm虚拟化