一個只有99行代碼的JS流程框架

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

上週末的時候突發奇想，當代碼在運行的時候，其實跟咱們作事情是相似的，都是作完一步接着下一步，而且這些事情有些是可規劃的，有些是須要作完該步才知道下一步該作什麼。想到這裏一個js框架雛形在我大腦中慢慢造成，暫且命名爲flowJS。

接着說說這個框架應該有哪些API？

一、能夠預先規劃好流程的每一步，如this.setNext('步驟A').setNext('步驟B')……

二、能夠在任何一步決定下一步作什麼，如 this.setNext('步驟C')，其實這裏的API和上面的同樣，只是調用的地方不同而已。

三、在任何一步中，能夠知道當前步是在作什麼，前面一步作了什麼、下一步準備要作什麼，如this.getCurr()、this.getPrev()、this.getNext()。

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

五、能夠設置或獲取整個流程的全局變量，這樣全部的步驟都能共享該變量，如 設置全局變量值this.flowData({name1:value1,name2:value2,……})，獲取全局變量值this.flowData(name1)或this.flowData()。

六、上一步能夠知道當前步的執行結果，成功 or 失敗，如 在上一步中設置this.setNext('步驟B', successFun, failFun)、當前步中經過this.success(args)、this.fail(args)來告訴上一步。

七、當前步能夠隨時通知下一步開始執行，如this.next()。

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

九、能夠在任什麼時候候知道當前代碼流程運行過的軌跡，如flowJS.trace，這對於瞭解頁面的執行過程會比較有幫助。

Talk is cheap, Show me the code!

一、能夠預先規劃好流程的每一步，如this.setNext('步驟A').setNext('步驟B')……

二、能夠在任何一步決定下一步作什麼，如 this.setNext('步驟C') ，其實這裏的API和上面的同樣，只是調用的地方不同而已。

三、在任何一步中，能夠知道當前步是在作什麼，前面一步作了什麼、下一步準備要作什麼，如 this.getCurr() 、this.getPrev() 、this.getNext() 。

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

五、能夠設置或獲取整個流程的全局變量，這樣全部的步驟都能共享該變量，如 設置全局變量值this.flowData({name1:value1,name2:value2,……})，獲取全局變量值this.flowData(name1)或this.flowData()。

六、上一步能夠知道當前步的執行結果，成功 or 失敗，如 在上一步中設置this.setNext('步驟B', successFun, failFun)、當前步中經過this.success(args)、this.fail(args)來告訴上一步。

七、當前步能夠隨時通知下一步開始執行，如this.next()。

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

九、能夠在任什麼時候候知道當前代碼流程運行過的軌跡，如flowJS.trace，這對於瞭解頁面的執行過程會比較有幫助。

其實flowJS的用法並不限於上面demo列出的方式，好比你能夠試着在某一步中連續調用幾回this.next()，你會發現下一步會被觸發屢次。想要知道更多用法，能夠把咱們平時看到的流程圖信息套用到裏面去實現。

可能有人會用Promise來跟flowJS對比，其實Promise更多的是爲了解決JS異步回調的問題，而flowJS不只也能解決異步回調問題，還能讓代碼看起來更加語義化和流程化，使得代碼更具可讀性。

特別是在處理那種好比提交一個數據前，須要作一連串的校驗和接口調用的時候，會更加適合，若是哪天須要在中間穿插一個校驗或接口調用，只須要往流程中添加一步就能夠了，徹底作到鬆耦合。

flowJS不只能用於頁面JS開發，一樣在nodeJS橫行的時代，必須也是支持在服務端的nodeJS來使用的，無任何第三方依賴！

好了，安利了那麼多，如今來看看這個只有99行代碼的框架的真面目 ↓

我真的沒有壓縮代碼，它真的只有99行！

最後提示： 框架源碼和各demo在附件中可下載！

本文轉載自騰雲閣，已得到做者受權。