A JS process framework with only 99 lines of code

Recently I have been thinking about a problem, how to make the JS code more semantic and more readable.

Last weekend, when the code was running, it was similar to what we were doing, it was all done and then the next step, and some of these things were planned, and some needed to be done to know what to do next. Think of Here a JS frame prototype in my brain slowly formed, for the time being named Flowjs.

Next, what API should this framework have?

1, can be pre-planned every step of the process, such as this.setNext(‘步骤A‘) . setNext(‘步骤B‘) ......

2, can in any step decide what to do next, such as this.setNext(‘步骤C‘) , in fact, here the API and the above, just call the place is not the same.

3, in any step, you can know what the current step is doing, what the previous step, what to do next, such as, this.getCurr() this.getPrev() , this.getNext() .

4, the current step is done, can tell the result of the next step (just the next can get the results of the current pass, that is, in order to protect the variable pollution, each step can only get the results of the previous step), such as to the next pass value this.nextData({name1:value1,name2:value2,……}) , get the value of the previous step this.stepData(name1)或this.stepData() .

5. You can set or get global variables for the entire process so that all steps can share the variable, such as setting the global variable value this.flowData({name1:value1,name2:value2,……}) and getting the global variable value this.flowData(name1)或this.flowData() .

6, the previous step can know the execution result of the current step, success or failure, such as set in the previous step this.setNext(‘步骤B‘, successFun, failFun) , the current step through this.success(args)、this.fail(args) to tell the previous step.

7, the current step can be notified at any time to begin execution, such as this.next() .

8, some of the steps can be executed in parallel, and must be completed to perform the next step, such as this.setNext(‘步骤A‘).setNext([步骤B1,步骤B2,步骤B3]).setNext(‘步骤C‘) .

9, you can know at any time the current code flow ran track, flowJS.trace For example, this is useful for understanding the process of page execution.

Talk is cheap, Show me the code!

1. You can plan every step of the process in advance, such as this.setNext(‘步骤A‘).setNext(‘步骤B‘) ...

2, can in any step decide what to do next, such as this.setNext(‘步骤C‘) , in fact, here the API and the above, just call the place is not the same.

3, in any step, you can know what the current step is doing, what the previous step, what to do next, such as, this.getCurr() this.getPrev() , this.getNext() .

4, the current step is done, can tell the result of the next step (just the next can get the results of the current pass, that is, in order to protect the variable pollution, each step can only get the results of the previous step), such as to the next pass value this.nextData({name1:value1,name2:value2,……}) , get the value of the previous step this.stepData(name1)或this.stepData() .

5. You can set or get global variables for the entire process so that all steps can share the variable, such as setting the global variable value this.flowData({name1:value1,name2:value2,……}) and getting the global variable value this.flowData(name1)或this.flowData() .

6, the previous step can know the execution result of the current step, success or failure, such as set in the previous step this.setNext(‘步骤B‘, successFun, failFun) , the current step through this.success(args)、this.fail(args) to tell the previous step.

7, the current step can be notified at any time to begin execution, such as this.next() .

8, some of the steps can be executed in parallel, and must be completed to perform the next step, such as this.setNext(‘步骤A‘).setNext([步骤B1,步骤B2,步骤B3]).setNext(‘步骤C‘) .

9, you can know at any time the current code flow ran track, flowJS.trace For example, this is useful for understanding the process of page execution.

In fact, the use of FLOWJS is not limited to the method listed above, for example, you can try to make a sequential call in one step this.next() , you will find that the next step will be triggered multiple times. If you want to know more usage, we can apply the flowchart information we normally see to the inside to realize.

Maybe someone will use promise to compare with FLOWJS, in fact promise more to solve the problem of JS asynchronous callback, and FLOWJS can not only solve the asynchronous callback problem, but also can make the code appear more semantic and process, make the code more readable.

Especially when dealing with the kind of data, such as the need to do a series of verification and interface calls, it will be more appropriate, if one day need to be interspersed in the middle of a check or interface call, just to add a step to the process can be, completely loose coupling.

Flowjs not only can be used for page JS development, also in the era of Nodejs rampant, must also support the service side of the Nodejs to use, no third-party dependence!

Okay, so much for Amway, now take a look at the true face of this 99-line code frame ↓

I really do not have compression code, it really only 99 lines!

The last hint: frame source code and the demo in the attachment can be downloaded!

This article is reproduced from Tengyun, has been authorized by the author.

A JS process framework with only 99 lines of code