一个只有 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最近文章:

个人的中小型项目前端架构浅谈23分钟前

架构素来为需求服务,本文作者将分享自己最近做的一个项目,借以分析个人的中小型项目前端架构。

对于Docker改名Moby,大家怎么看?23分钟前

Docker公司直接把原Docker项目改名成了Moby,是为了将之前数年里构建出来的庞大的粉丝团体和Google搜索内容(Google search footprint)全部转移到Docker公司的商业产品上。

日处理20亿数据,实时用户行为服务系统架构实践23分钟前

每天处理20亿左右的数据量,查询服务每天服务8000万左右的请求,平均延迟在6毫秒左右。本文从实时性/可用性/性能/部署几个维度来说明系统的设计。

《近匠》专访Ayla Networks云平台工程部主管——企业级物联网云平台的设计与部署昨天

初级的智能化是依靠芯片,而真正把物联网智能化领上一个新台阶的,却是由芯片所产生的数据。

基于路由机制设计的App架构思路4月24日

2017-04-24 王亟亟 CSDN CSDN 对架构的理解 最近聊了许多小伙报价从高到低的各式各样的都有(这里只是举个例子,没有任何贬低的意思)  一提架构张嘴就来 MVC MVP MVVM等等等,如果简历写有大项目的架构经验并且要价偏高的我一般默认这样的小伙不是太可用(先看...

私活,永远解救不了自己屌丝的人生!4月24日

作为程序员的我,接私活有错么?

云计算年度50+好案例,Spark、Kubernetes、Tensorflow的Commiter齐聚CCTC 20174月24日

2017年5月18-19日,CSDN主办的中国云计算技术大会(CCTC)将在北京朝阳门悠唐皇冠假日酒店盛装启航。

看我如何躺在床上黑掉自家智能电视4月21日

建议大家不要使用智能电视中某些不太智能的功能。

7位架构师邀你共话高可用/高并发/高性能的系统架构设计4月21日

和架构的零距离接触的机会,错过再等一年!

热门文章:

土右旗沟门镇一居民楼突发爆炸 救援工作全力展开 83户259位房屋受损居民已获妥善安置3月25日

爆炸现场2017年3月25日下午1点55分,土右旗沟门镇北只图村向阳小区发生爆炸事故。事故发生后,土右旗委、

大货车威力真的很大,请远离它!2月25日

随手发给朋友,传递正能量!

北京人,早上起床后这3种东西不能吃!3月19日

早餐是一天中最重要的一餐但是你知道吗?早餐可不是乱吃的吃早餐也有很多禁忌哦!早上这3种东西不能吃1早上不该空

💠古代的洞房夜原来是这么的变态…3月21日

2017-03-21 爱分享 爱分享 北海市首富举行的宴会上,被邀请的人非富即贵。 宴会开始前,坐在角落里的位置不起眼的叶彦,不停在四周张望,神情局促不安,看上去很是紧张,嘴里更是在碎碎念着,“这里不行,方位不对,得赶紧换个位置。” 叶彦的异样,引起了对面朱氏集团的大少爷,朱允翔...

塘约道路——中国农业的出路只能是党领导的集体化道路”3月14日

作者:程 邈 来源:民族复兴网

将免费的午餐进行到底!!3月15日

2017-03-15 兆策传媒 重庆创意公园 重庆创意公园 来到园区米源食堂 一股香味飘进心场 二话不说跑到橱窗 三餐口味真是叫好  四方满座人气超旺 午间美食也有营养 666666666666666 方便快捷高效,棒! 冲进食堂眼前一亮 有序排队就是高效 稍等3分钟即可就餐 凳...

活动预告:天天开心每月一书 ------读《如何阅读一本书》4月21日

你是否在阅读上有这样的困惑?\x0a\x0a买书如山倒,读书如抽丝,家里面的书架上,至今还躺着许多没有拆封的书。

河南聘|昊华骏化集团有限公司2017校园招聘3月23日

再次提醒:平台核实能力有限,求职过程中出现任何缴费行为都不要相信并举报给小柒,其次请大家提高警惕性!今日招聘

家长注意!香蕉不要和这5种食物一起吃!尤其是第2种!!3月25日

古印度和波斯民间认为,金色的香蕉果实乃是“上苍赐予人类的保健佳果”。香蕉软糯可口,营养丰富,香蕉吃对了可以预

今天,宁乡、长沙、益阳、娄底...整个湖南都在疯传这2张照片!3月27日

2017-03-27 宁乡圈 宁乡圈 关注我们查看更多视频    

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

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