ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法

        首先不得不承认,对于ligerUI的认识,我看到的只是表面,毕竟我没有深入到去看它的源码,但这毕竟是我开发过程中遇到的一个问题,所以我还是分享给大家。

        这是我开发中的一个小界面:

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第1张图片
单击然后弹窗
ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第2张图片
这是弹窗代码,我用的是$.ligerDialog.open
ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第3张图片
这是弹窗的效果

       有同事和我反应,有时候单击上面的确定按钮,没有一丁点反应,就算重新打开第一个图片的窗口,同样没反应,只能刷新链接重新打开,但是单击取消按钮,就没有任何问题,我第一想法那就是可能我处理单击确定按钮后所执行的代码有问题,于是我就慢慢跟踪了代码,怪了,没问题啊,总是能成功啊,没任何问题啊,直到我试着点了一下 X 关闭弹框

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第4张图片
单击X关闭弹框

        再次打开弹框

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第5张图片
再次单击打开弹框

        然后怎么按确定都没有反应

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第6张图片
页面效果一点反应都没有

但是!!!!看底层的代码

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第7张图片
undefined?未定义?

        因为是未定义,所以下面的代码也就没执行,所以也就没反应,怪了,那为什么是未定义呢?单击弹框的X按钮后,页面到底经历了一些什么可怕的东西,于是我屁颠屁颠的去看了ligerUI官网的demo,点确定和取消都没有问题,但是单击X关闭,在重新打开弹框后就有问题了。

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第8张图片
点X前,可以选择并返回数据
ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第9张图片
数据没选上,还弹出一个框,如下
ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第10张图片
弹出的框

        那我们就看看demo的源码吧

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第11张图片
demo的源码

        看demo的源码,既然弹框,那说明源码里!data=true;那么data有可能是false,null,undefined的一种,毕竟是demo,没法debug跟踪,但是我猜data是undefined,因为我的是undefined,而checkDataBool = itemCheckData();说明itemCheckData()没有返回任何东西。

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第12张图片

       而var itemCheckData = dialog.frame.f_itemCheckData || dialog.frame.window.f_itemCheckData;那么我们就看f_itemCheckData()方法就行了

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第13张图片
f_itemCheckData()方法的代码

        然后在点X关闭重新打开弹框后,debug跟踪一下

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第14张图片
这里数据竟然是空的

        数据是空的,直接return,没有返回任何值,所以checkDataBool是undefined,那么基本可以确定源码中的data就是undefined,源码也是没有数据返回。连官网给出的demo都出这个问题,那怎么办啊,去探索源码?好怕好怕,没那个时间啊,那先这样吧,哈哈。

      哈哈?那就这样吧?官网都出的问题就不用管了么?但这毕竟是真实存在的问题啊,知难而退,临阵逃脱不是我的风格,那就知难而进?不,知难不是进,而是智进,既然这样,那我想啊,我代码里点确定最后走的是框架的close()方法,没问题,那点X有问题,那么点X底层走的方法肯定不是close()啦,所以呢,我进去框架里的ligerDialog.js看一眼,经过九九八十一难,我终于找到了框架里点X的点击事件


ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第15张图片
框架里提供的点X的单击事件

        咦,你们看到上面有两个方法了么,g.hide();和g.close();既然点X没有走g.close();那肯定是走g.hide()啦,那按照我们的想法,只要点X单击事件走的是g.close();那么对于我们的需求来说,是没问题的,是吧,那我们把源码改么?把if干掉么?那怎么行,框架又不是为你这一个弹框服务的,你这么一改,其他的不就爆炸了?那怎么办啊,哎呀,没看到 if 里面的的p.isHidden么?p是什么?Lui,不想找,不是累,是lui,累就是累了,lui,那就是累得不得了了,之前找点X的单击事件已经很累了,再找p?那就很lui了,不想找p,那就找isHidden吧,

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第16张图片
看到了吧

        这不就是Dialog源码里面提供的参数么?再看注释,原来之前在点X单击事件里看到的2个方法g.hide();和g.close();前者是隐藏,后者是销毁,既然这样,那就去找ligerUI的API吧。

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第17张图片
ligerUI的API

        真是大快人心啊,Dialog有了这么一个参数,那就好办了,在我需要的Dialog里面配上这么一个参数,设为false,那么底层点X单击事件不就走else了么,接着走close()方法,这样就和单击确定的一致了,那就问题解决了。

ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法_第18张图片
我在我需要的Dialog加参数isHidden,置为false

        再测试,好了,我的问题解决了,跟踪也有数据了,我就不截图给你看了,不过要按照你的需求来决定点击X单击事件是要隐藏还是摧毁哦,不要盲目加哦。

        最后的最后,至于为什么隐藏我会出问题,写到现在,我真的是太lui了,不想再进一步探索了,有时间再研究吧,不过我的猜测是这样的,我点X隐藏后,这个东西还是存在的,只是隐藏了,看不见而已,当我再次弹框时,会重新弹框,那么实际上就会有多个弹框,这样选数据的时候就会错乱,那么,如果我的猜测是正确的话,那我也不一定加上isHidden这个参数,只要修改弹框功能,设一个变量,第一次弹新框,点X隐藏,点确定和取消也不要close()了,改为hide();这样当我再次点击的时候,根据变量就不要弹新框了,原来的框show()显示就行了,哈哈,我没有去试验,只是这样猜测,你们可以试试啊,睡觉睡觉。

你可能感兴趣的:(ligerUI的$.ligerDialog.open弹框点X关闭后出现的问题以及解决办法)