張鎮(zhèn)圳，騰訊Web前端高級(jí)工程師，對(duì)內(nèi)部系統(tǒng)前端建設(shè)有多年經(jīng)驗(yàn)，喜歡鉆研搗鼓各種前端組件和框架。

最近一直在想一個(gè)問(wèn)題，如何能讓js代碼寫(xiě)起來(lái)更語(yǔ)義化和更具有可讀性。

上周末的時(shí)候突發(fā)奇想，當(dāng)代碼在運(yùn)行的時(shí)候，其實(shí)跟我們做事情是類(lèi)似的，都是做完一步接著下一步，并且這些事情有些是可規(guī)劃的，有些是需要做完該步才知道下一步該做什么。想到這里一個(gè)js框架雛形在我大腦中慢慢形成，暫且命名為flowJS。

接著說(shuō)說(shuō)這個(gè)框架應(yīng)該有哪些API？

1、可以預(yù)先規(guī)劃好流程的每一步，如this.setNext('步驟A').setNext('步驟B')……

2、可以在任何一步?jīng)Q定下一步做什么，如 this.setNext('步驟C')，其實(shí)這里的API和上面的一樣，只是調(diào)用的地方不一樣而已。

3、在任何一步中，可以知道當(dāng)前步是在做什么，前面一步做了什么、下一步準(zhǔn)備要做什么，如this.getCurr()、this.getPrev()、this.getNext()。

4、當(dāng)前步做完后，能將結(jié)果告訴下一步（僅僅是下一步能獲取到當(dāng)前步傳遞的結(jié)果，也就是為了保護(hù)變量污染，每一步都只能獲取到前一步的結(jié)果），如 給下一步傳值this.nextData({name1:value1,name2:value2,……})、獲取上一步傳來(lái)的值this.stepData(name1)或this.stepData()。

5、可以設(shè)置或獲取整個(gè)流程的全局變量，這樣所有的步驟都能共享該變量，如 設(shè)置全局變量值this.flowData({name1:value1,name2:value2,……})，獲取全局變量值this.flowData(name1)或this.flowData()。

6、上一步可以知道當(dāng)前步的執(zhí)行結(jié)果，成功 or 失敗，如 在上一步中設(shè)置this.setNext('步驟B', successFun, failFun)、當(dāng)前步中通過(guò)this.success(args)、this.fail(args)來(lái)告訴上一步。

7、當(dāng)前步可以隨時(shí)通知下一步開(kāi)始執(zhí)行，如this.next()。

8、有些步驟能并行執(zhí)行，并且要都執(zhí)行完才能執(zhí)行下一步，如 this.setNext('步驟A').setNext([步驟B1,步驟B2,步驟B3]).setNext('步驟C')。

9、可以在任何時(shí)候知道當(dāng)前代碼流程運(yùn)