js链式调用理解，js链式调用+回调函数理解，promise原理窥探 ------码砖空间

作者：码砖空间

时间：2018-8-26

类型：开发总结

微信：码砖空间

背景介绍:

小程序开发中为了适应需要，开发可输入弹框，效果类似于js的prompt()的效果。

为了增加代码的可读性。参照promise，改写js代码，增加代码的可读性。

交互效果：

点击页面中的回复按钮时，弹出可输入弹框。可以进行回复内容输入。

代码效果：

图片1

 

为了实现以上效果，结合了promise的思想进行了自己的改写。此文中只论述了js部分实现分装的原理。

首先，为了达到以上代码截图中的链式调用的效果，首先改写prompt中的能从外部进行调用的代码，在函数末尾加上return this。

图片2

此中需要进行外部调用的就promptShow()、cancel()、confirm()三个方法。为它们分别加上return this结尾。此处要注意的是this的指向问题。在小程序中，此种情况下，返回的this是指代着prompt页面，以大括号为层次界限。也就是promptShow()的外层。因此需要直接让confirm和cancel函数与promptShow()在同一层,由此可得。第一幅图中的prompt.promptShow().confirm().cancel() 可以分解为先执行prompt.promptShow()因为promptShow()中返回this因此得到的依然是prompt对象。然后再执行prompt.confirm()对象。同理根据得到的对象执行prompt.cancel();在其他地方使用js时因为会涉及到this指代的问题，因此先进行this指代的判断。可以用console输出看下this进行确定。

接着，在prompt相关的代码中需要声明两个监听函数。去监听取消和确认按钮的触发。

图片3

图片4

然后我们需要操作的是，让调用cancel()函数和confirm()函数时作为参数传入的回调函数分别在对应的按钮触发的时候被执行。也就是需要它们分别在confirmTapListen方法中和cancelTapListen方法中被执行。

因为回调函数也属于参数，就可以将此需求理解为，跨函数调用参数。因为可以在两函数的外层声明一个全局变量，来暂时缓存。

图片5

 

在promptShow中对函数进行初始化操作，

图片6

在cancel和confirm中分别根据传入的回调函数对这两个函数进行重新的修改

图片7

然后在监听函数中进行调用

图片8