前端常见问题总结(正在更新中)

1、按钮问题

(1)、没有准确定位到按钮的选择器(这就不便多说,都知道的,提出来只是希望大家回去排查这个最不起眼的问题)
建议办法:
1、是不是精准定位到这个元素了;
2、这个button元素是不是后来的js部分添加上去的,之前的DOM里面并没有,这个时候就是添加的是否需要注意了,如下:

`$('.btns', $('body)).append('<button class="btn">按钮</button>');`

这里面的…$('body)我只是象征性的取当前页面的body标签,你这需要改成你当前操作的那个Dom

(2)、按钮点击,却使表单提交了(button标签的type属性是不是submit,或者type没有写成button,偶会导致这种情况;
反之,需要点击便提交表单,这需要把type属性改成submit)
建议办法: <button type='button' class="btn">按钮</button>

(3)、点击按钮,会把你定义的事件触发多次,比如,弹出多个弹窗(点一次弹出一个弹窗,点击第二次便会弹出第二个)
建议办法://避免响应多次执行
$('.btns').off("click").on("click", function () { });

$("myDiv").unbind("click").bind("click");

2、追加元素的问题

(1)、元素内部追加append,多次点击会一直加上新的元素
建议办法:$('.text').empty().append('<span>123</span>');

(2)、元素外部追加,会出现多个
建议办法:在追加之前就需要判断是否存在,给加上的元素一个class属性,用hasClass来判断,不存在就可以直接添加,存在就不追加

3、AJAX发送的数据是数组或者对象时,会报错

建议办法:用JSON.stringify()来转化为json

				 data : {
                          data: JSON.stringify($where)
                }

4、浮点数精度问题(7 * 0.8 会等于 5.6000000000000005)

建议办法:
1、将小数转成整数来运算,之后再转回小数;
2、调用round() 方法四舍五入或者toFixed() 方法保留指定的位数(对精度要求不高,可用这种方法);
3、使用特殊的进制数据类型,如前文提到的bignumber(对精度要求很高,可借助这些相关的类库)

5、区分JS中的undefined,null,"",0和false

<script>

alert(0 == ''); //true
alert(0 == false); //true
alert(false == ''); //true
alert(null == undefined); //true

alert(!0); //true
alert(!false); //true
alert(!undefined); //true
alert(!null); //true
alert(!''); //true

alert(0 == undefined); //false
alert(0 == null); //false
alert(false == null); //false
alert(false == undefined);//false
alert('' == null); //false
alert('' == undefined); //false

</script>

建议方法:如果是判断返回值是否是false这样确定的情况,那么尽量用 === (全等)来操作

5、误用ajax的complete

建议方法:当用ajax进行数据请求时,避免使用complete回调方法,而应该使用success方法。complete回调在请求成功或失败都会触发。

//错误的写法
$.ajax({
  url: "http://tools.42du.cn/jsonp/student/all",
}).complete(function( data ) {
    //一些操作  
});

//正确的写法
$.ajax({
  url: "http://tools.42du.cn/jsonp/student/all",
}).success(function( data ) {
    //一些操作  
});

后续更新中……

猜你喜欢

转载自blog.csdn.net/qq_41417172/article/details/89205361