当前位置:首页 » 网页前端 » 前端的8个bug
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端的8个bug

发布时间: 2022-06-22 11:36:47

前端开发时遇到过什么坑尤其是webapp开发时

这个问题前几天刚刚总结了一下,之前已在知乎上回答过类似问题,
1、tap事件穿透(解决方案:click事件代替, 或者尝试fastclick这个框架);
或者尝试下面的办法重写一下zepto绑定的事件
/*************** 重写zepto on方法避免事件穿透 ******************/
(function() {
var INTERVAL_MIN = 500;
var lastCalledTime = (new Date()).getTime();
function throttle(handler) {
return function() {
var curTime = (new Date()).getTime();
//两次tap事件的间隔如果不大于500
if(curTime - lastCalledTime > INTERVAL_MIN) {
lastCalledTime = curTime;
handler.apply(this, arguments);
}
}
}
var oldOn = $.fn.on;
$.fn.on = function( evt ){
if(evt === 'tap'){
var args = Array.prototype.slice.call(arguments);
var handlerIndex;
for(var i = 0; i < args.length; i++) {
if(typeof args[i] === 'function') {
handlerIndex = i;
break;
}
}
args[handlerIndex] = throttle(args[handlerIndex]);
this.on('click', function(e) {
e.preventDefault();
});
return oldOn.apply( this, args );
}
return oldOn.apply( this, arguments );
};
})();

解决原理:正常有意义的用户操作不会在500毫秒内连续触发两次tap事件,如果发现两次tap事件的时间间隔不大于500毫秒则阻止第二次tap事件
有两个副作用和一个不能修复的问题
(1). 可能会穿透点到a链接上,需要额外给a绑定tap事件,在js中进行跳转
(2). trigger主动触发得时候可能有问题
(3).无法解决跨页面的穿透问题
2、fixed的元素有input框时在ios上的bug(可以考虑头和底部定高,中间加上一个iScroll的内容区域实现头尾固定,中间内容滑动的UI交互布局);
3、离线缓存更新成功后必须刷新页面才能显示新的修改(写个全局的方法,监听updateready后,主动帮用户刷新一次页面);
4、UC浏览器不支持alert(建议用自己通用的弹窗方法);
5、同样的zepto写的选择器,有时候层级过深在某些浏览器中失效(在节点class和id上命名上合理分配,用常规选择器串);
6、QQ浏览器SVG失效;
7、chrome和小米自带的手机浏览器,开发调试时不走代理(可以下载chrome的beta版)

⑵ 领导说,个人写的代码超过8个bug就要开除,是否太严格了

这确实是太严格了,这样可能会导致员工消极怠工,员工都把时间精力用在检查是否有bug上面了,这样员工一天写的代码估计都没有多少。其实可以奖励buy数最少、写代码最多的员工,把奖品设置地足够诱人,大家为了得到奖品,写得多同时出的错也少,这比开除员工显得更加人性化了。

所以个人写的代码超过8个bug就要开除这种方法其实是不可行的,这样无异于阻碍公司的发展。领导想要程序员有质有量的完成任务,还是要想出别的对策。

⑶ 前端js 遇到难以重现的 bug 该怎么办

推荐使用Fundebug监控。Fundebug的用户行为记录可以帮助你更好地去理解BUG的成因,快速复现bug。

⑷ 前端VUE 最神奇的BUG

能否来个完整代码图片, 你这说的不明不白的

⑸ web前端这个字体BUG怎么的

这个bug是由于h3标签本身自带的标签产生的,


望采纳!谢谢!

⑹ 前端开发都包括哪些技术

前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1] 。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显着,功能更加强大。
前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,最新的高级版本HTML5、CSS3,以及SVG等。
前端开发需要学习的技术
1 掌握基本web前端开发技术:HTML、CSS、JavaScript、DOM、BOM、AJAX等,而且要了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug
2 必须掌握网站性能优化、SEO和服务器端开发技术的基础知识
3 必须学会运用各种web前端开发与测试工具进行辅助开发
4 除了掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等
5 未来web前端开发工程师还要研究HTML5、web视觉设计、网站配色、网站交互设计模式等相关技术
web前端有广阔的发展空间,app、小程序、移动端、pc端等都网站是需要前端技术的开发支持才能够完成,技术门槛相对较低、需求量较大,薪资待遇良好。只要是互联网端的客户界面,就需要前端来制作完成,前端开发的编程量不大,但是需要部分编程,入门简单,但是要学的深入需要一个过程。
Web前端招聘岗位
• 前端开发工程师、Web开发工程师、网页开发工程师、HTML开发工程师...
• H5开发工程师、移动应用开发工程师、App开发工程师、小程序开发工程师...
• JS开发工程师、Vue.js开发工程师、Node.js开发工程师、前端架构师...
• 小游戏开发工程师、数据可视化开发工程师、WebGL开发工程师、WebVR开 发工程师、Web安全工程师...

⑺ 前端开发遇到的问题与怎么解决的

最终解决方法:愿化蝶飞向,注定是错觉,前端开发遇题与解决只是,不要高估情的美。,对方留下各种各样的印记。中间的小邪送出了。对每个人微笑。


⑻ 前端开发bug如何快速

1,根据报错信息定位:
(1) Uncaught TypeError: Cannot read property 'attr' of undefined;
此类型为变量或者对象属性未定义类型。
(2) Uncaught TypeError: a.map is not a function;
a.map不是函数,说明a不是数组,只有数组才有map方法。

(3) Uncaught SyntaxError: Invalid or unexpected token;
这种一般是js的代码格式错误。

2, 排除法
页面中一共有abcd五个方法,注释掉d后代码正常说明d有问题。
3,剥离法
同样一个方法,在A页面没问题,在B页面有问题,这时候,新建一个剥离这个组件,然后运行,如果没有异常,就算不是这个组件或者方法的问题,然后逐渐在新页面中加入可能影响B页面的条件。

⑼ 求助小白自学前端,但是不知道怎么找BUG

那方面的bug 呢,页面还是逻辑代码
页面bug 可以在浏览器 delete 按键一个元素一个元素的删除排查,刷新就都恢复了
逻辑代码这个不好说,需要经验和时间

⑽ 常见前台bug区分

前端bug主要分为3个类别:HTML、CSS、Javascript三类问题
出现样式的问题基本都是CSS的Bug
出现文本的问题基本都是Html的Bug
出现交互类的问题基本都是Javascript的Bug
黑马程序员视频库上的课程基础知识都很全面,可以空闲的时候进行免费学习。