细节影响成败——一次前端调试引发的思考

题记——当产品完成了99%时，最不应该忽视的是剩下的1%，最后的成败可能就取决于这1%。也有人说，胜利就在最后5分钟。

无论是长跑也好，创业也好，做产品也好，总有中途，总有冲刺，总有高峰和低谷。在每个阶段应该做现阶段该做的事情，该冲刺和追求完美的时候，需要我们拿出勇气和毅力来完成这些工作。如果我们做对了，那么我们做的事成功的几率就会大大增加。

最近帮助开发人员完成了一次前台框架的使用优化，有了更深的感触。近期我们研发的一款产品即将发布，产品的主体框架采用了一套基于jQuery技术的插件实现的tab标签。具体的功能就是从左侧的导航栏打开一个功能页时，可以用标签的形式展示。类似浏览器提供的标签页的模式，具体如下：

采用这种方式可以支持用户的多任务处理，和浏览器的多页签是一个道理。

但是之前的框架存在一个明显的问题，那就是当左侧的导航栏隐藏起来时，标签页中的div没有自动计算宽度，导致的问题是，导航栏隐藏时，整个界面框架左侧出现一条空白。这个问题我与相关的开发人员说过几次，他的回答都是，这是因为使用了第三方插件，不知道怎么修改，可能没法修改吧。我感觉他骨子里认为，这样已经可以了。导航栏迟早会显示的，显示时问题不就消失了吗？

作为一个用过多种语言写过N年程序的老程序猿，我想不用再去讲道理了，虽然有日子没碰前端程序，改这样一个问题应该不是问题。

很快，我发现这个插件写的还是很不错的。标签的容器（div）被封装为对象，只要在导航栏显示/隐藏的onClick事件中找到主体框架的容器对象，然后对其进行resize即可，于是我在onClick事件中增加了如下代码：

var bodyFrame = jQuery( window.parent.document ).find( "#contentFrame" ).attr("contentWindow");

jQuery( bodyFrame.document.getElementById("tabPanel") ).tabs('resize');

 

测试了一下，问题果然解决了。不过很快就发现IE又出问题了，对，没错就是IE，前端程序员的噩梦。虽然这个界面在Chrome、Firefox、Safari下全部正常，但是在IE下发现，当导航栏隐藏时，主框架可以正常扩展，导航栏显示时，主框架宽度会保持不变并延展到屏幕之外，形成很想滚动条，而不是预期的重新计算大小。

又经过一番调整，很快发现一个bug。插件在IE下使用了jQuery( "#divid" ).width()，无法取到div动态变化的值，于是修改为取其容器的offsetWidth，可以取得真实度度。代码如下：

jQuery( "#divid" ).parent().attr( "offsetWidth" );

 

至此问题全部解决。这是个不起眼的功能，也没什么技术上的难度，修改的内容也很少，但是这是必须要解决的问题。仅此而已。

在未作修改之前，这个功能的主体框架应该是可用的：多页签，可切换，能关能刷，但这仅仅是在开发人员眼中。作为软件开发人员，至少要做到让你的用户能用、可用。而你的用户又包含很多角色，例如其他开发人员、测试、产品经理、最终用户等等。他们在使用你提供的框架、API、Plugin、产品UI和功能时，提出的每个修改意见都是非常有价值的。我们需要去做精心的分析和判断并改进我们的产品，这是一个长期的过程，也是开发人员需要修炼的地方。我见过无数程序员，当别人提出改进意见时，不加任何考虑的情况下，他们的回复是，我觉得这样也可以！

 

没有人喜欢别人说自己做的东西不好，每个人都希望得到赞美，但是，有时候我们必须面对现实，承认别人的建议是合理的。这需要修炼！

在人的整个生涯中，虽然说运气占据了一定的成分，但总体来说，还是性格决定命运。回头去看看自己走过的路，再看看他人的生活轨迹，会发现每每在重大时刻，总是性格在左右你的选择和决定。所以，修炼性格和提升心智的力量，是人生最重要的事。无论你是程序员，还是其他从业人员。

现在这个纷繁复杂的世界，成败的因素很多，天时地利人和，有时你还需要一点运气，细节还能决定成败吗？至少，我们要说，细节影响成败！