公司把一堆陈年烂谷子的Bug甩到我这里让我修。
虽说很多Bug都由很烂的代码组成的，但也有只是实现逻辑就很奇葩的Bug。
之前一篇文章已经有说过公司里代码的恶心以及测试和文档的诸多问题，今天也不嫌麻烦就再展示一坨出来。
发现与分配
之前公司有改动过一个叫『上传附件』的功能，开发初期我就知道有这个问题，但是直到几个月之后，这个 Bug 才被测试发现。
依旧是测试提交的信息量极少的Bug信息
公司有一个很不能理解的分配方法，完全随机分配。
即很有可能你已经修复了这个问题，但是问题不分配给你，转而分配给另一位对此功能一无所知的人去修复。
问题检查
只不过少了一个提示而已，应该不难修吧。
最初猜测是不是就是单纯的把提示信息或是样式给落下了？
有问题的按钮
正常的按钮
话说这tooltip不是在么！缺少的只是个 按钮的浮起 而已。Bug描述很显然与问题实质对不上号。
打开调试工具，看一下按钮的代码。
嗯？这是什么？
有两个附件？其中一个还在 kindeditor 的外边？
心里一寒！
检查一下，第一个入口有一个 opacity:0 属性？取消掉看看。
What the …
把整个 kindeditor 编辑器都隐藏后：
WTF!
上次开发完全是重新做了一个 input type=file，之后把按钮放到了 kindeditor 原来上传附件按钮的位置，透明度设置成0，对应位置显示的仍然是 kindeditor 的旧的按钮，但当用户点击时其实点击的是一个 input。
怪不得 kindeditor 的鼠标悬浮效果不生效，上面是有一个完全透明的 input 挡在前面骗点击！
思路
至此问题原因就明确了。并不是 kindeditor 的按钮样式问题，而是有另一个元素挡在前面骗点击。
那么这修复就开始难办了。
按照正常思路，应该把这个 input 干掉，之后用 kindeditor 实现这个功能。然而这样就意味着要重新开发整个功能。分配给原开发者的开发时间往往都是论天算的，然而给我这个修Bug的只有0.5个工作日，而且还要清理旧的逻辑和代码，很显然，我不会这么做。
那么就用兵来将挡的思路解决问题。既然是样式显示不正常，那么我只要把悬浮效果加回来就行了。
开动
首先先观察一下 kindeditor 正常按钮的悬浮效果，只是在对应按钮上加了一个样式。
那么我只要在鼠标悬浮到这个 input 上时，给这个原来的按钮也加上样式就行了。
之后发现 input type=file 有一个重大问题，即 mouseover 的判定大小，最小是这个按钮的标准长度，“选择文件”四个字要比预料中的大很多，用width并不能缩到最小。如果用这个做判断，那么就会影响到旁边 kindeditor 字体设置按钮。
怎么办？早就看你这个 input 不爽了！直接把他隐藏掉！用一个label代替他的位置。
|
1 2 |
<label id="uploadfile-label" for="uploadfile" class="upload">附</label> <input value='附件' id="uploadfile" type="file" name="attachments[]" multiple style="display: none"> |
给label设置必要的大小。
|
1 2 3 4 5 6 7 8 9 10 11 |
#uploadfile-label{ width:30px; height:26px; position:absolute; z-index:900; top:0px; left:0px; opacity:0; filter:alpha(opacity=0); -moz-opacity:0; } |
做两个鼠标事件监听动作。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('#uploadfile-label').on('mouseenter', mouseenterUploadfile); $('#uploadfile-label').on('mouseleave', mouseleaveUploadfile); function mouseenterUploadfile() { console.log('mouseenterUploadfile'); var ke_fileupload = document.getElementById('ke-id-fileupload'); ke_fileupload.setAttribute('style', 'border: 1px solid #5690D2;'); } function mouseleaveUploadfile() { console.log('mouseleaveUploadfile'); var ke_fileupload = document.getElementById('ke-id-fileupload'); ke_fileupload.removeAttribute('style'); } |
OK！样式搞定！
接下来别忘了加上title做tooltip鼠标悬浮提示效果。
|
1 |
<label id="uploadfile-label" for="uploadfile" class="upload" title="上传附件">附</label> |
结论
我在一坨陈年旧屎上又拉了一坨新的屎上去……
10 comments
Skip to comment form ↓
灰狼
2016 年 10 月 20 日 在 上午 10:40 (UTC 8) Link to this comment
擦，这是谁干的？编辑器本来就有上传功能的，难道是阉割后自己写一个上传文件的功能？
话说这种鬼提示的问题，不是前端的活？我记忆中你不是做前端的啊
石樱灯笼
2016 年 10 月 20 日 在 上午 11:11 (UTC 8) Link to this comment
公司里这种玩意遍地都是。
我不知道我是干什么的。
大致
2016 年 10 月 20 日 在 下午 12:22 (UTC 8) Link to this comment
你们公司很有必要搞一下CMM或者ISO的认证。这缺陷管理太混乱了。怎么做出这个BUG只值0.5日的判断的？
石樱灯笼
2016 年 10 月 21 日 在 上午 9:35 (UTC 8) Link to this comment
CMM、ISO的认证？别闹了，内部员工培训和活动多做的屎一样。
我现在就觉得，多数在正常公司工作的人，都不会理解我所工作过的公司都是什么样子的。
不亦乐乎
2016 年 10 月 30 日 在 下午 7:18 (UTC 8) Link to this comment
真是大开眼界啊，嘿嘿嘿。
土木坛子
2016 年 10 月 31 日 在 上午 12:25 (UTC 8) Link to this comment
只好来这里发发你的牢骚了，不过也好，发完可能心情更好一些。
石樱灯笼
2016 年 10 月 31 日 在 上午 1:05 (UTC 8) Link to this comment
牢骚要是都写出来，我都能出书了。
坠入银河
2016 年 11 月 3 日 在 下午 3:41 (UTC 8) Link to this comment
O(∩_∩)O哈哈~
我也经常遇到这种事,不过万幸,bug修复时间还是我们自己说了算的(因为他们不懂这个,手动#滑稽)…
石樱灯笼
2016 年 11 月 3 日 在 下午 6:19 (UTC 8) Link to this comment
“因为他们不懂”，我这边也是不懂啊，但是不懂不意味着不能瞎指挥。
疯狂减肥呆
2017 年 1 月 16 日 在 下午 4:36 (UTC 8) Link to this comment
在下佩服 开了眼界?