原文资料:http://www.36ria.com/4479
看了这篇文章后,发现有些错误自己确实需要多加注意,写篇文章加深下记忆。
错误1-使用全局变量
//解决方法,使用封转
(function(){
var total = 0, tax = 0.05;
//other code
}())
这样做后,在函数外部是绝对不能访问到函数内部定义的变量,形成了个人的代码空间。但是这样就不能公开部分方法或属性。例如,想要创建一个购物车,定义一个总价的变量,作为公共属性,这种情况下可以采用模块式编程。
var cartTotaler = (function(){
var total = 0,tax = 0.05;
//other code
return{
addItem:function(item){},
removeItem:function(item){}
}
}());
//demo2
var dog = (function(){
var name = 'brow',age = 18;
return{
speak:function(){
console.log('my name is:' + name);
console.log('my age is:' + age);
}
};
}());
dog.speak();
关于全局变量有一点值得注意,如果不用关键词var来声明创建变量,那么javascript引擎会默认将该变量定义为全局变量。
(function(){
tax = 0.05;
}());
var totalPrice = 100 + (100*tax); //105
错误3-使用==
比较下面的代码
if(1=='1'){
console.log('it's true!');
}
if(1==='1'){
console.log('it's true!');
}
错误5-使用for-in时不对属性检查
var pro,obj = {name:'Joe',job:'Coder',age:25};
for(pro in obj){
console.log(pro+':' + obj[pro]);
}
但是,浏览器中for-in遍历对象属性和方法时会包括对象原型链上的所有属性和方法,但是绝大多数属性是不希望被枚举出来的。可以使用hasOwnProperties方法来检查属性是否属于对象。
Function Dog(name){
this.name = name;
}
Dog.prototype.legs = 4;
Dog.prototype.speak = function(){
return 'woof';
};
var d = new Dog('Bowser');
for(var prop in d){
console.log(pro + ':' + d[prop]);
}
console.log('======');
for(var prop in d){
if(d.hasOwnProperty(prop)){
console.log(prop+":" +d[prop]);
}
}
有时,只希望枚举出对象的属性,不包括方法,可以使用typeof方法过滤
for(var prop in d){
if(typeof d[prop] !== 'function'){
console.log(prop + ':' + d[prop]);
}
}
不管如何,在使用for-in循环时要确保对属性进行检查,以避免得到你意料之外的结果。
在使用parseInt时不用基数
parseInt('200');//200
parseInt('043');//35
parseInt('043',10);//43
parseInt('aaa333',10);//NaN
parseInt('100',2);//4
错误9-单个单个的插入dom元素
DOM操作会使浏览器重绘页面,所以如果有一连串的元素一个接一个的插入页面中,这会急剧增加浏览器渲染页面的负担。所以推荐使用Document fragments,如下
var list = document.getElementById('list'),
frag = document.createDocumentFragment(),
items = ['one','two','three','four'],el;
for(var i = 0; items[i];i++){
el = document.createElement('li');
el.appendChild(document.createTextNode(item[i]));
frag.appendChild(el);//best way
}
list.appendChild(frag);