愚蠢的遗留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引入有问题，改了。

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