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


    题记——当产品完成了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和功能时,提出的每个修改意见都是非常有价值的。我们需要去做精心的分析和判断并改进我们的产品,这是一个长期的过程,也是开发人员需要修炼的地方。我见过无数程序员,当别人提出改进意见时,不加任何考虑的情况下,他们的回复是,我觉得这样也可以!

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

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

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


    身边越来越多的人开始使用Mac,经常被问道Mac的使用问题和技术问题。遂决定,每天发布一则#Mac技巧#。同时发布于微博和微信公众账号“Mac技巧”,微信号sagacity-mac,有微信账号的童鞋扫描下图片或搜索微信号即可
  • 相关阅读:
    南邮PHP反序列化
    偏移脚本
    nginx配置不当导致的目录遍历下载漏洞-“百度杯”CTF比赛 2017 二月场
    初识smarty
    weblogic nmap扫描脚本
    巅峰极客CTF writeup[上]
    JS调用免费接口根据ip查询位置
    JS调用免费接口根据ip查询位置
    JS一维数组、多维数组和对象的混合使用
    JS一维数组、多维数组和对象的混合使用
  • 原文地址:https://www.cnblogs.com/chijianqiang/p/details.html
Copyright © 2020-2023  润新知