zoukankan      html  css  js  c++  java
  • 愚蠢的遗留BUG

    二次开发本来就是很恶心的事,我竟然是三次开发。

      今天遇到一个BUG,上传图片的时候报错了,操作过程很简答,点击上传按钮,选择图片,确定上传,如图:

      报错信息很直白,也很奇怪:

      

      (为了写博客,把代码回滚复现BUG,后台应该不会发现吧)

      总之,报错很直白,语法错误,Sizzle引擎解析失败,抛出错误。我好歹也是看过jq源码的人啊,Sizzle引擎报错是传入了异常的Selector,目测就是#号后面那个function。WTK????我上传个图片为啥会$一个函数?

      一脸懵逼的开始调试,好在老项目,代码虽然垃圾(全是行内样式、事件触发全靠onclick、JSP代码),但是调试还是很直白,根据onchange的事件,定位到一个函数:  

      

      这个函数来自于一个额外的JS,搜索源头JS,发现这个方法也不难,根据方法传入的2个字符串,做简单的验证然后进行发送图片的请求。

      在一行一行的log后,又将问题定位到了最后的ajax请求上,这个请求也是来源于一个插件(应该是前人自己写的):

      看起来跟ajax特别像,实际上也就是一个简单的封装,然后extend到jq上面。

       

      进入该JS后,发现竟然有英文注释???难道是正规插件,难不成是上传的问题?不过,据后台讲,其他页面也有用这个功能,并没有报错。

      简单log后,问题再度定位到那个createUploadForm方法上,给大伙们瞧瞧这个函数:

        

      我相信明眼的人应该能看出是啥问题,这里的fileElementId是之前upFileImg传进来的第一个参数,是一个DOM的id。

      我比较蠢,当时没看出来,但是看出了问题一定处在这个fileElementId上面,于是开始log,看到这里变成个啥玩意:

      是的,很纯洁,本身是个字符串,在上面的包装后,变成一个普通的数组。

      那问题出在哪???我开始下一步,打印for-in中的元素,发现一个奇怪的事,打印那个 i ,出现一个奇怪的字符串:

      这个remove是个啥玩意,由于for-in基本没用过,于是上MDN简单查了一下,是这样解释的:for...in 语句以任意顺序遍历一个对象的可枚举属性。

      对象?对哦,这个玩意一般用来遍历对象,那这个remove难道是?我点击了一下__proto__,发现了真相:

      是的,这方法把原型上的方法也遍历出来了,而remove方法源码就是报错信息#号后面的那个function,为啥只遍历出两个?因为解析第一个就报错,JS停止执行了。

      所以说,你在上面包装了数组,明知道是数组,为什么要用for-in来遍历啊,你TM傻逼啊。

      最后,我想了想如何修复问题,有三种方法:

      第一种是在for-in中做判断:,这个代码看起来比较丑,被我做备胎了。

      第二种是直接把for-in改成普通for循环,即:

      本来准备就这样提交代码的,后面转念一想,要是这个fileElementId是对象咋办,前面只是将字符串包装成数组,并不能保证这里肯定是数组,于是放弃这个方法。

      第三种就比较正常,直接做判断,如果是数组,做普通for循环,否则就用for-in,这样基本万无一失。

      

      后记。。。。

      后来我比较好奇,后台说其他地方不会出现这个问题,肯定我搞错了什么地方。

      于是我要来了正常的页面,跑了一下,log出了这个:

      

      当前我就愣住了,这个TM不也搞出原型的函数了么,但是没报错,还吞掉了?简单一想就明白了,jQ的版本问题,老版本Sizzle引擎可能有问题,回到头部简单一看:

        

        

      是的,果然是不同的jquery,一个1.7,一个是1.11,两代人的智慧,融合成了这个bug,我能怎么办?我也很绝望啊!

      最后我已经懒得改那个疑似老外写的插件,直接把jq引入改了下,然后给后台解释:jq引入有问题,改了。

      圆满解决,我的内心毫无波动,甚至想删库跑路。

  • 相关阅读:
    简单的远程控制软件
    VS集成环境中的JavaScript脚本语法检查
    vs2022安装
    有关httpContext.Current.Session[值] 取值的问题
    【python3.7】文件操作
    148. 排序链表
    11. 盛最多水的容器
    23. 合并K个升序链表
    147. 对链表进行插入排序
    146. LRU 缓存机制
  • 原文地址:https://www.cnblogs.com/QH-Jimmy/p/7238767.html
Copyright © 2011-2022 走看看