1. 条件判断的陷阱
在if判断中,使用===
作比较,避免掉入==
造成的陷阱。
在条件判断时,这样的一些值表示false
:null
,undefined
,字符串' '
,数字0
,NaN
而在==
时,则会有一些让人难以理解的陷阱,如:
(function () {
var undefined;
undefined == null; // true
1 == true; //true
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN;// false
[] == false; // true
[] == ![]; // true
})();
对于不同类型的 ==
判断,有这样一些规则,顺序自上而下:
-
undefined
与null
相等 - 一个是
number
一个是string
时,会尝试将string
转换为number
- 尝试将
boolean
转换为number
,0
或1
- 尝试将
Object
转换成number
或string
,取决于另外一个对比量的类型
所以,对于0
、空字符串的判断,建议使用===
。===
会先判断两边的值类型,类型不匹配时为false
。
2. 简单类型转换
- number to string的转换,建议使用
1 + ' '
或String(1)
,不使用new String(1)
或1.toString()
的方式。 - string to number的转换,建议使用
parseInt
,必须显式指定第二个参数的进制。下面的例子展示了不指定进制的风险:
parseInt('08'); // 0
parseInt('08', 10); //8
- float to integer的转换,建议使用
Math.floor/Math.round/Math.ceil
方法,不使用parseInt
。
3. 字符串拼接
字符串拼接,应使用数组保存字符串片段,使用时调用join
方法。避免使用+
或+=
的方式拼接较长的字符串,每个字符串都会使用一个小的内存片段,过多的内存片段会影响性能。如:
不好的拼接方式,+=
var str = '';
for (var i = 0, len = list.length; i < len; i++) {
str+= '<div>' + list[i] + '</div>';
}
dom.innerHTML = str;
正确拼接方式,Array的push+join
var str = [];
for (var i = 0, len = list.length; i < len; i++) {
str.push('<div>'+ list[i] + '</div>');
}
dom.innerHTML = str.join('');
4. 获取元素
获取单个元素
通常,我们使用document.getElementById
来获取dom元素,避免使用document.all
。document.getElementById
是标准方法,兼容所有浏览器
ie浏览器会混淆元素的id
和name
属性,document.getElementById
可能获得不期望的元素。
在对元素的id
与name
属性的命名需要非常小心,应使用不同的命名法。
下面是一个name
与id
冲突的例子:
<input type="text" name="test"> <div id="test"></div>
<button onclick="alert(document.getElementById('test').tagName)"></button>
<!-- ie6下为INPUT -->
5.设置兼容事件
//设置兼容事件
function addEvent(ele, event, func) {
if (ele.addEventListener) {
ele.addEventListener(event, func, false);
} else if (ele.attachEvent) {
ele.attachEvent('on' + event, func);
} else {
ele['on' + event] = func;
}
}
网友评论