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

最近一直在想一個問題，如何能讓js代碼寫起來更語義化和更具有可讀性。

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

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

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

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

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

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

5、可以設(shè)置或獲取整個流程的全局變量，這樣所有的步驟都能共享該變量，如 設(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)前步中通過this.success(args)、this.fail(args)來告訴上一步。

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

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

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