开发中我所遇到的前端问题
- 1、按钮问题
- 2、追加元素的问题
- 3、AJAX发送的数据是数组或者对象时，会报错
- 4、浮点数精度问题（7 * 0.8 会等于 5.6000000000000005）
- 5、区分JS中的undefined,null,"",0和false
- 5、误用ajax的complete
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 ) {
//一些操作
});后续更新中……