taowen
首发于taowen

Go 程序员相比 FE 的优越感已经不复存在了!

Go程序员的goroutine曾经是很有优越感的。当年嘲笑FE的回调满天飞,那是多么的荣光。



但是这个年代已经一去不复返了。今天我们来分析一段精致的 javascript 代码,来看看现在 javascript 是如何叼炸天



完整的代码可以在这里执行:jsfiddle.net/taowen/L0p

这份代码的执行效果是这样的









继续点submit,又回重复这个过程。

这个执行过程是这样的

1、渲染表单



这里的 step1 是vue的组件名字,{current: result} 是给这个组件提供的 model。然后我们看一下组件的定义





就是一个极其普通的表单渲染代码。用伪代码来说就是 render_component("step1", {current: result}),然后就出现了



2、动态选择组件

这里有一个问题是,界面显示的表单是变化的。所以需要根据指定的组件名进行切换。这个切换的逻辑是这样实现的



这里的 is,根据运行时提供的组件名,动态构建了组件。



对应的step_ui是在await scheduler.user_input 的时候设置的。所以当我们点击 launch_task 的时候,step_ui切换了,所以界面的表单就切换了。

3、表单提交

点了submit提交了表单之后,输入返回到了sub1_task中,更新了result这个上下文变量。











就是拿选择的函数名,却得函数的callback,然后回调的过程。

4、展示结果

提交完表单,调用完业务处理代码之后,接下来就是展示结果了。

这个过程也就是render_component("show-msg", {msg: xxx})这样的一个逻辑。





根据前面的分析,设置了step_ui之后,表单就发生了切换了。这里就是切换到了 show-msg 这个组件





5、await 继续执行

下一步是 await scheduler.user_input 继续执行。这里 scheduler 是指全局变量,那个vue的instance。不是什么关键字。



这个调用会把sub1_task自身剩下的还没有执行的部分变成一个回调函数,名字叫resolve。

然后这个resolve会传递给user_input的promise



await的时候,执行权就被交给promise内部了。直到promise回调了resolve。



传给resolve的值会变成await的返回值。

6、sleep 然后重复这个过程

这个过程和前面的await一样,只是回调的触发者不是用户点击按钮,而是系统的setTimeout,根据时间自动触发。



sleep完之后,重复回到while循环的开头,继续等待用户的输入。然后如此往复。

可以看到,javascript的async/await比go func() {}要灵活得多,而且用途广得多。Go程序员们,你们的优越感还好吗?

前端程序员们,1024节日快乐!

编辑于 2018-10-24

文章被以下专栏收录