没有错误和没有明显错误的差别
2016-05-23 20:14
603 查看
本文通过一段Js代码,锚点绝对位置问题来剖析编码过程中,没有错误和没有明显错误的心理变化。
先来一句经典语录
世界上最遥远的距离不是生和死,而是你亲手制造的Bug就在你的眼前,你却怎么都找不到它。
这段代码看起没什么问题,点击后页面滚动到指定位置。
事实上忽略页面中,图片大多数是使用lazyload,页面中的图片加载后大量元素高度变化,导致页面会重绘。
初始状态距离顶部的值
滚动页面后,大量图片加载后块级元素的高度增加了。
通常一些微乎其微的问题直接导致你的功能不可用。测试就显得很重要。
改后的代码为:
先来一句经典语录
世界上最遥远的距离不是生和死,而是你亲手制造的Bug就在你的眼前,你却怎么都找不到它。
没有错误
作为写代码的人常说,我写的代码没有问题。同产品经理、测试工程师较量时,信誓旦旦说没有错误,那就肯定有错误的。一般情况都是等他们一转身,自己偷偷把错误给改了。这种问题一般比较好避免,写代码的仔细用心一般问题不大。没有明显错误
作为管理层和代码审计(测试)常说,代码看起没多大问题,但可能存在深层次的未知问题。一般情况下在测试过程中代码覆盖率和测试环境不同导致没法测全代码中的问题,这种问题很难避免,随着编程年龄的增加这种问题会略微减少。锚点绝对位置
功能描述:点击按钮a,页面滚动到元素b。js代码如下:$('.f4-detail').on('click touch', function(){ scroll($(".Q_gui").offset().top-10,800); }); //滚动回调函数 var scroll = function(endY, duration) { endY = endY || ($.os.android ? 1 : 0); duration = duration || 200; var startY = document.body.scrollTop, startT = +(new Date()), finishT = startT + duration; var interpolate = function (source, target, shift) { return (source + (target - source) * shift); }; var easing = function (pos) { return (-Math.cos(pos * Math.PI) / 2) + .5; }; var animate = function() { var now = +(new Date()), shift = (now > finishT) ? 1 : (now - startT) / duration; window.scrollTo(0, interpolate(startY, endY, easing(shift))); (now > finishT) || setTimeout(animate, 15); }; animate(); };
这段代码看起没什么问题,点击后页面滚动到指定位置。
事实上忽略页面中,图片大多数是使用lazyload,页面中的图片加载后大量元素高度变化,导致页面会重绘。
初始状态距离顶部的值
$(".Q_gui").offset().top //初始高度:3936.625
滚动页面后,大量图片加载后块级元素的高度增加了。
$(".Q_gui").offset().top //元素之前元素加载后高度:5970.625
通常一些微乎其微的问题直接导致你的功能不可用。测试就显得很重要。
改后的代码为:
$('.f4-detail').on('click touch', function(){ scroll($(".Q_gui"), 800); }); //滚动回调函数 var scroll = function(obj, duration) {//传入对象 duration = duration || 200; var startY = $('body').scrollTop(), startT = +(new Date()), finishT = startT + duration; var interpolate = function (source, target, shift) { //动态获取目标位置的高度 var target= target.offset().top; return (source + (target - source) * shift); }; var easing = function (pos) { return (-Math.cos(pos * Math.PI) / 2) + .5; }; var animate = function() { var now = +(new Date()), shift = (now > finishT) ? 1 : (now - startT) / duration; window.scrollTo(0, interpolate(startY, obj, easing(shift))); (now > finishT) || setTimeout(animate, 15); }; animate(); };
相关文章推荐
- Android之使用Http协议实现文件上传功能
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js数组实现图片轮播
- mysql集群之MMM简单搭建
- 通晓网络测试常用命令
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表