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

標籤：共用   做了   show   中間   rac   cloud   慢慢   非同步回調   調用   

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

上周末的時候突發奇想，當代碼在啟動並執行時候，其實跟我們做事情是類似的，都是做完一步接著下一步，並且這些事情有些是可規劃的，有些是需要做完該步才知道下一步該做什麼。想到這裡一個js架構雛形在我大腦中慢慢形成，暫且命名為flowJS。

接著說說這個架構應該有哪些API？

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

2、可以在任何一步決定下一步做什麼，如 this.setNext(‘步驟C‘)，其實這裡的API和上面的一樣，只是調用的地方不一樣而已。

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

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

5、可以設定或擷取整個流程的全域變數，這樣所有的步驟都能共用該變數，如 設定全域變數值this.flowData({name1:value1,name2:value2,……})，擷取全域變數值this.flowData(name1)或this.flowData()。

6、上一步可以知道當前步的執行結果，成功 or 失敗，如 在上一步中設定this.setNext(‘步驟B‘, successFun, failFun)、當前步中通過this.success(args)、this.fail(args)來告訴上一步。

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

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

9、可以在任何時候知道當前代碼流程運行過的軌跡，如flowJS.trace，這對於瞭解頁面的執行過程會比較有協助。

Talk is cheap, Show me the code!

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

2、可以在任何一步決定下一步做什麼，如 this.setNext(‘步驟C‘) ，其實這裡的API和上面的一樣，只是調用的地方不一樣而已。

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

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

5、可以設定或擷取整個流程的全域變數，這樣所有的步驟都能共用該變數，如 設定全域變數值this.flowData({name1:value1,name2:value2,……})，擷取全域變數值this.flowData(name1)或this.flowData()。

6、上一步可以知道當前步的執行結果，成功 or 失敗，如 在上一步中設定this.setNext(‘步驟B‘, successFun, failFun)、當前步中通過this.success(args)、this.fail(args)來告訴上一步。

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

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

9、可以在任何時候知道當前代碼流程運行過的軌跡，如flowJS.trace，這對於瞭解頁面的執行過程會比較有協助。

其實flowJS的用法並不限於上面demo列出的方式，比如你可以試著在某一步中連續調用幾次this.next()，你會發現下一步會被觸發多次。想要知道更多用法，可以把我們平時看到的流程圖資訊套用到裡面去實現。

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

特別是在處理那種比如提交一個資料前，需要做一連串的校正和介面調用的時候，會更加適合，如果哪天需要在中間穿插一個校正或介面調用，只需要往流程中添加一步就可以了，完全做到松耦合。

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

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

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

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

本文轉載自騰雲閣，已獲得作者授權。

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