一个只有 99 行代码的 JS 流程框架

2017-04-21 张镇圳 CSDN CSDN

作者丨张镇圳

责编丨屠敏


最近一直在想一个问题,如何能让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可下载:https://mc.qcloudimg.com/static/archive/905cb1e213dfb43b52e3dbeb1a11ffc9/flowJS.zip




标签: 科技

CSDN最近文章:

GitHub里的MySQL基础架构自动化测试9小时前

从MySQL的备份、自动测试能否成功从备份恢复数据、模拟各种 master 可能挂掉的情况、自动测试 failover 是否正常、自动测试 schema 迁移等几个方面说明了为何会相信MySQL自动化。

开发者应该知道的代码审查工具,杜绝代码bug9小时前

由于项目时间紧,所以写出的代码就满是bug?别再找借口了

携程第四代架构探秘之运维基础架构升级9小时前

2014年底携程技术中心的框架、系统和运维团队共同启动了架构改造项目,历时2年,涉及所有业务线。本文回顾了携程在整个技术架构改造过程中的一些实践和收获。

九张图带你了解全宇宙最神秘的团体——程序员昨天

性取向想加薪怎么办?去一家公司主要看什么?最孤独的时刻两个程序员见面聊什么?人生理想?最讨厌听到的话?……

如何快速全面建立自己的大数据知识体系?7月21日

用户维度数据指标是不同维度分析要素与用户全生命周期轨迹各触点的二维交叉得出。

热门文章:

今日立冬:旧时天子率群臣迎冬神 民间“立冬补冬”11月8日

今天是中国传统二十四节气中的立冬。旧时在立冬日,天子要率百官举行仪式,迎接冬神。北京民俗学会秘书长高巍介绍道

金志文现身拉票会 乐队狂欢嗨翻全场5月4日

金志文接连演唱《狼》、《Racheal》、《女儿情》、《恰似你的温柔》、《为爱痴狂》五首歌曲。实力展现俱佳唱作,引得现场粉丝尖叫连连,俨然一场小型演唱会。

如皋市篮球联合会6月12日

如皋市篮球联合会,成立多年以来,已经为该地区广大篮球爱好者运作大小过百场比赛,联合会一贯秉承,走出去,请进

这样做开车会省油,是真的吗?5月24日

  对于平常老百姓来说,有个车已经不容易了,买车以后更多的是想着如何开车省钱,省钱的话就必须想办法省油,因为

4.7万亿刺激政策来了,未来的机会在哪里?5月31日

中国经济进入中低速增长“新常态”,而刺激措施的效果却越来越弱,法国兴业银行预计,在未来几个季度,中国经济将重新开启减速通道。未来的投资机会在哪儿?

(┯_┯)广告君被屏蔽了~~~

感谢您的支持,请按照如下步骤取消屏蔽ABBAO的广告(详细步骤):