前言
通常我们进行项目开发时，为了提高开发的效率往往会引入一些开源的插件，在使用中出现的问题时习惯性的直接查查网上有没有类似的问题和解决的方法。找不到方案时就懵了，甚至想更换插件，然而插件恰好符合需求不方便更换，就得自己来解决问题了。个人认为开源的插件犹如草原上飞奔的野马，功能强大越难以驾驭，当我们有足够的能力驾驭它时，它将一变成手中耀眼的利器。下面内容笔者以最近遇到的bootstrap-fileinput.js图片预览高度BUG为例，谈谈如何提高这种解决开源插件BUG的能力，老鸟飞过，供菜鸟参考。
最近项目使用的前端框架是基于Bootstrap的Metronic，图片上传插件是bootstrap-fileinput.js v3.1.3（http://www.jasny.net/bootstrap/javascript/#fileinput），使用的时候无意发现，如果上传图片的宽：高>=4：3，图片受max-width限制，自动缩小显示，效果很好，但是如果宽：高<4:3时，图片受max-width限制缩小后，图片有部分显示不出来，这种问题发生在firefox、IE9/10、Edge里，而chrome没有这个问题，官网里的Demo也有这个问题，如图：
BUG处理
1、精读官方文档。开源插件的官方文档很重要，要想熟练使用它，很有必要将文档认真阅读一遍。很多开源插件文档只有英文版，大家往往望而生畏，其实对比一下其他学科，比如：医学、生物学等，计算机类的专业词汇已经够简单了,不信就将您的手机系统语言调整英语，一样用。仔细看了官方文档后，并没有找到这个BUG的解决方法。
2、查看渲染后的代码和样式。这个BUG在firefox和chrome呈现不同的效果，因此直接看浏览器渲染后生成的代码和样式，firefox里在元素上右键【查看元素】，chrome里是右键【检查】，进行对比，发现计算后的样式明显不一样（以下所有对比图左边是firefox，右边是chrome），而html代码里，chrome多了一句style(style=”max-height: 140px;”)。初步分析，插件js里，根据父容器的max-height值，动态的给img增加了样式，在chrome里运行正常，在上面提到的其他浏览器运行失败却没有报错。
3、关键字定位。上一步知道bootstrap-fileinput.js里会添加max-height的值，因此，可以直接用max-height在bootstrap-fileinput.js里进行搜索，找到给img添加max-height的值的代码。在第92行找到，看看上下文中的代码的意思就是增加max-height值，这个值是通过父容器的max-height减去img的padding和border的宽度。这里注意到获取border宽度用的是preview.css(‘border-top’),当时笔都并不能肯定问题是否因它引起。
4、验证。上一步注意到获取border宽度用的是preview.css(‘border-top’)，为了验证是不是它的问题，在这里加一句代码。
alert(preview.css('border-top'));
firefox获取到的是空值，chrome获取到了值。问题就出在这里了。
5、确定处理方法。上一步知道问题所在就可以确定处理问题的方法了。
方法一 修改样式。前面的分析得知，预览图片高度不对是因为添加样式失败，那么可以直接在页面里增加样式。优点：不用修改插件源码，适用于代码复杂且自己没有信心驾驭的开源插件；缺点：父容器值变化时，得修改这个样式，治标不治本。
.fileinput .thumbnail > img{ max-height:140px; }方案二 修改js（推荐）。将preview.css(‘border-top’)和preview.css(‘border-bottom’)分别改成preview.css(‘border-top-width’)和preview.css(‘border-bottom-width’)。优点：一劳永逸，也可以通过GIT向作者贡献代码，帮助完善插件，坚决不当伸手党；缺点：项目中的插件代码与官方代码不一致，升级时得注意。
if (preview.css('max-height') != 'none') $img.css('max-height', parseInt(preview.css('max-height'), 10) - parseInt(preview.css('padding-top'), 10) - parseInt(preview.css('padding-bottom'), 10) - parseInt(preview.css('border-top-width'), 10) - parseInt(preview.css('border-bottom-width'), 10))6、积累。通过.css(‘border-top’)获取属性值，chrome可以获取到宽度、类别、颜色等值，而firefox、IE9/10、Edge获取到是空值。
总结
通过上面的内容简单的介绍了在使用开源插件遇到问题时该怎么处理，随着经验的积累，我们驾驭开源插件的能力也将不断提高，鼓励大家，自己也开发一些开源插件。没有一个开源插件是完美的，将开源插件趋近完美需要大家共同的努力。
补充
笔者在项目中使用ajaxfileupload.js插件配合bootstrap-fileinput.js进行文件的ajax上传，再次遇到了只能上传一次的BUG，同时也找到解决的方案，详见另外一篇博客《ajaxfileupload.js目前功能最全版本（多文件、异常处理等），顺便解决只能上传一次的BUG(非live绑定)》
