張鎮圳，騰訊Web前端高級工程師，對內部系統前端建設有多年經驗，喜歡鑽研搗鼓各種前端組件和框架。
最近一直在想一個問題，如何能讓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在附件中可下載！
相關閱讀
前端開發框架簡介:angular和react
免費體驗雲服務器，提供最佳上雲實踐機會
40行代碼的人臉識別實踐
此文已由作者授權騰訊雲技術社區發布，轉載請注明文章出處，獲取更多雲計算技術干貨，可請前往騰訊雲技術社區
原文鏈接：https://www.qcloud.com/community/article/537217001491374183
歡迎大家關注騰訊雲技術社區-博客園官方主頁，我們將持續在博客園為大家推薦技術精品文章哦~