The author data editing | | zhang town fans deer

Zhenzhen Zhang, Tencent Web front-end senior engineer, has many years of experience in internal system front-end construction, like to study and tamper with various front-end components and frameworks.

Introduction:

Wrote an article in front, called a JS process framework of only 99 lines of code, although the basic framework has to implement a process to normal flow of logic, but still lack a certain under points module application ability, can’t connect different modules in a page good together, and so on before the upgrade, the framework of the new concept of the subprocess.

subprocesses

What is a subprocess? In this updated framework (of course there are more than 99 lines of code, never mind the title), each step can not only be a function, but can also refer to another process, which is called a subprocess. Let’s start with a simple example:

FlowJS ({init:function(){this.setNext(' step A').setnext (' step B').setnext (' step C'); flowJS({init:function(){this.setnext (' step A'). this.next(); }, 'step A':function(){this.next(); }, 'step B: {init: function () {enclosing setNext (' substeps B1) setNext (' substeps B2). SetNext (' substeps B3); this.next(); }, 'substep B1':function(){this.next(); }, 'substep B2':function(){this.next(); }, 'substep B3':function(){this.parent. Next (); }}, 'step C':function(){console.log(' perform step C'); Console. log(' Current process running trace: '); console.log(flowJS.trace); }});Copy the code

In the example above, the object corresponding to step B is the subprocess.

There is another way to write this, which is a better implementation of the modular application:

FlowJS (' subprocess B', {init:function(){this.setNext(' substep B1').setnext (' substep B2').setnext (' substep B3'); this.next(); }, 'substep B1':function(){this.next(); }, 'substep B2':function(){this.next(); }, 'substep B3':function(){this.parent. Next (); }}); / * the parent process * / flowJS ({init: function () {enclosing setNext (' A 'step). SetNext (' step B) setNext (' step C); this.next(); }, 'step A':function(){this.next(); B}, 'steps' :' the sub-process B ', 'step C: the function () {the console. The log (' step C); Console. log(' Current process running trace: '); console.log(flowJS.trace); }});Copy the code

As you can see, step B of the parent process refers to the previously defined subprocess B, so that some common process logic can be separately extracted as a subprocess and referenced by other parent processes. The interaction between the child process and the parent process can be implemented in code through this.parent.

This.parent can be retrieved at each step of the subprocess, resulting in the corresponding step of the current subprocess, which has the same API as the other steps (see the step API in the previous article, “A 99-line JS Process Framework”).

Another point to note: this update does not change the API of the process steps, but only introduces the use of subprocesses, which are defined, referred to, and then the interaction between the parent process and the subprocess.

Again, as a rule, paste code (the serial number of the example follows the serial number of the previous article, starting with 10)

Simplest way to use a subprocess

FlowJS ({init:function(){console.log(' execute init'); Enclosing setNext (' A 'step.) setNext (' step B) setNext (' step C); this.next(); }, 'step A':function(){console.log(' perform step A'); this.next(); }, 'step B':{init:function(){console.log(' perform substep B init'); This.setnext (' substep B1').setnext (' substep B2').setNext(' substep B3'); this.next(); }, 'substep B1':function(){console.log(' execute substep B1'); this.next(); }, 'substep B2':function(){console.log(' perform substep B2'); Console. log(' previous step: '+this.getPrev()); // Print: substep B1 console.log(' current step: '+ this.getcurr ()); // Print: substep B2 console.log(' Next: '+this.getNext()); // Print: substep B3 this.next(); }, 'substep B3':function(){console.log(' perform substep B3'); this.parent.next(); }}, 'step C':function(){console.log(' perform step C'); Console. log(' Current process running trace: '); console.log(flowJS.trace); }});Copy the code

Execution Result:

Child and parent processes interact with each other via this.parent

FlowJS ({init:function(){console.log(' execute init'); Enclosing setNext (' A 'step.) setNext (' step B) setNext (' step C); this.next(); }, 'step A':function(){console.log(' perform step A'); this.nextData({name1:'value1'}); this.flowData({name2:'value2'}); this.next(); }, 'step B':{init:function(){console.log(' perform substep B init'); This.setnext (' substep B1').setnext (' substep B2').setNext(' substep B3'); this.next(); }, 'substep B1':function(){console.log(' execute substep B1'); this.nextData({name3:'value3'}); this.flowData({name4:'value4'}); this.next(); }, 'substep B2':function(){console.log(' perform substep B2'); Console. log(' previous step of parent: '+this.parent. GetPrev ()); // Print: step A console.log(' parent step name: '+this.parent. GetCurr ()); // Print: step B console.log(' next step of parent step: '+this.parent. GetNext ()); // Print: step C console.log(' Parent step data: '); console.log(this.parent.stepData()); // Print: Object {name1: "value1"} console.log(this.parent-flowdata ()); // Print: Object {name2: "value2"} console.log(' previous step: '+this.getPrev()); // Print: substep B1 console.log(' current step: '+ this.getcurr ()); // Print: substep B2 console.log(' Next: '+this.getNext()); // Print: substep B3 console.log(' Current step data: '); console.log(this.stepData()); // Print: Object {name3: "value3"} console.log(this.flowdata ()); // Print: Object {name4: "value4"} this.next(); }, 'substep B3':function(){console.log(' perform substep B3'); this.parent.nextData({name5:'value5'}); this.parent.flowData({name6:'value6'}); this.parent.next(); }}, 'step C':function(){console.log(' perform step C'); console.log(this.stepData()); // Print: Object {name5: "value5"} console.log(this.flowData()); // Print: Object {name2: "value2", name6: "value6"} console.log(' Current process running trace: '); console.log(flowJS.trace); }});Copy the code

Execution Result:

Multiple subprocesses are executed in parallel

FlowJS ({init:function(){console.log(' execute init'); Enclosing setNext (' A 'step.) setNext ([' step B', 'step C]). SetNext (' step D); this.next(); }, 'step A':function(){console.log(' perform step A'); this.next(); }, 'step B':{init:function(){console.log(' perform substep B init'); This.setnext (' substep B1').setnext (' substep B2').setNext(' substep B3'); this.next(); }, 'substep B1':function(){console.log(' execute substep B1'); this.next(); }, 'substep B2':function(){console.log(' perform substep B2'); this.next(); }, 'B3':function(){var self = this; // The time printed here is the same as that for substep C3 console.log(' time to execute substep B3: '+ new Date().getseconds ()); setTimeout(function(){ self.parent.next(); }, 2000); }}, 'step C':{init:function(){console.log(' execute substep C init'); This.setnext (' substep C1').setnext (' substep C2').setnext (' substep C3'); this.next(); }, 'C1':function(){console.log(' C1'); this.next(); }, 'substep C2':function(){console.log(' execute substep C2'); this.next(); }, 'substep C3':function(){var self = this; // The time printed here is the same as that of substep B3 console.log(' execute substep C3 time: '+ new Date().getseconds ()); setTimeout(function(){ self.parent.next(); }, 2000); }}, 'step D':function(){// The time printed here is 2 seconds later than the time of the above subprocess, because both subprocesses are executed in parallel console.log(' execute step D time:' + new Date().getseconds ()); Console. log(' Current process running trace: '); console.log(flowJS.trace); }});Copy the code

Execution Result:

Define and reference subprocesses

FlowJS (' subprocess A', {init:function(){this.next(' substep A1'); }, 'substep A1':function(){console.log(' execute substep A1'); Console. log(' current step: '+ this.getcurr ()); // Print: substep A1 console.log(' parent: '+this.parent. GetCurr ()); // Print: step A this.parent. Next (); }}); FlowJS (' subprocess B', {init:function(){console.log(' execute substep B init'); This.setnext (' substep B1').setnext (' substep B2').setNext(' substep B3'); this.next(); }, 'substep B1':function(){console.log(' execute substep B1'); this.next(); }, 'substep B2':function(){console.log(' perform substep B2'); this.next(); }, 'substep B3':function(){console.log(' perform substep B3'); Console. log(' current step: '+ this.getcurr ()); // Prints: child step B3 console.log(' parent step: '+this.parent. GetCurr ()); // Print: step B this.parent. Next (); }}); FlowJS (' subprocess C', {init:function(){console.log(' execute substep C init'); This.setnext (' substep C1').setnext (' substep C2').setnext (' substep C3'); this.next(); }, 'C1':function(){console.log(' C1'); this.next(); }, 'substep C2':function(){console.log(' execute substep C2'); this.next(); }, 'substep C3':function(){console.log(' perform substep C3'); Console. log(' current step: '+ this.getcurr ()); // Prints: child step C3 console.log(' parent step: '+this.parent. GetCurr ()); // Print: step C this.parent. Next (); }}); FlowJS ({init:function(){console.log(' execute init'); Enclosing setNext (' A 'step.) setNext ([' step B', 'step C]). SetNext (' step D); this.next(); }, 'steps' A' : 'the sub-process A', 'step B' : 'subprocesses B', 'step C' : 'subprocesses C', 'step D' : the function () {the console. The log (' current process running track: '); console.log(flowJS.trace); }});Copy the code

Execution Result:

As can be seen from the examples above, the information interaction between the child process and the parent process is very simple. In fact, the parent step is obtained through this.parent, and the data is obtained and transmitted through the parent step, thus enabling the process framework to have greater capacity to adapt to more application scenarios.

In order to facilitate exchange and learning, the above example complete code can be downloaded through the attachment, the last also attached frame source code: