当前位置：Gxlcms > JavaScript > 15条JavaScript最佳实践小结_javascript技巧

15条JavaScript最佳实践小结_javascript技巧

时间：2021-07-01 10:21:17 帮助过：7人阅读

本文档整理大部分公认的、或者少有争议的JavaScript良好书写规范（Best Practice）。一些显而易见的常识就不再论述（比如要用对象支持识别判断，而不是浏览器识别判断；比如不要嵌套太深）。条目顺序按重要级粗略的从高到低排列。
把外部JavaScript文件放在HTML底部
我们的目标是相同的：为用户尽可能快地显示内容。当载入一个脚本文件的时候，HTML会停止解析，直到脚本载入完毕。因此，用户可能会长时间对着一个空白的屏幕，看上去什么都没有发生。如果你的JavaScript代码只是增加一些功能（比如按钮的点击动作），那么尽管大胆地把文件引用放在HTML底部吧（就在之前），你会看到明显的速度提升。如果是用于其他目的的脚本文件，则需要慎重地考虑。但无论如何，这毫无疑问是一个非常值得考虑的地方。
优化循环
循环遍历一个数组
代码如下:

//这段糟糕的代码会在每次进入循环的时候都计算一次数组的长度
var names = ['George','Ringo','Paul','John'];
for(var i=0;idoSomeThingWith(names[i]);
}

代码如下:

//这样的话，就只会计算一次了
var names = ['George','Ringo','Paul','John'];
var all = names.length;
for(var i=0;idoSomeThingWith(names[i]);
}

代码如下:

//这样就更加简短了
var names = ['George','Ringo','Paul','John'];
for(var i=0,j=names.length;idoSomeThingWith(names[i]);
}

代码如下:

//这段代码的糟糕之处在于，它把变量声明放在循环体内了，每次循环都会创建变量
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}

代码如下:

//在循环体外声明变量，变量只会创建一次
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}

用尽量简短的代码
如果可以增加可读性的话，那么使用代码的简短格式是有意义的，下面是一份不完全的列表：
代码如下:

//对于条件判断只有两次的，这是一种冗长的写法
var direction;
if(x > 100){
direction = 1;
} else {
direction = -1;
}

代码如下:

//更好的代码
var direction = (x > 100) ? 1 : -1;

代码如下:

//判断一个 变量是否定义，如果否，就赋予一个值，糟糕的代码
if(v){
var x = v;
} else {
var x = 10;
}

代码如下:

//更好的代码
var x = v || 10;

代码如下:

//重复了变量名很多次
var cow = new Object();
cow.colour = 'brown';
cow.commonQuestion = 'What now?';
cow.moo = function(){
console.log('moo');
}
cow.feet = 4;
cow.accordingToLarson = 'will take over the world';

代码如下:

//更好的写法是这样
var cow = {
colour:'brown',
commonQuestion:'What now?',
moo:function(){
console.log('moo);
},
feet:4,
accordingToLarson:'will take over the world'
};

代码如下:

//重复了很多次数组名
var aweSomeBands = new Array();
aweSomeBands[0] = 'Bad Religion';
aweSomeBands[1] = 'Dropkick Murphys';
aweSomeBands[2] = 'Flogging Molly';
aweSomeBands[3] = 'Red Hot Chili Peppers';
aweSomeBands[4] = 'Pornophonique';

代码如下:

//更好的代码
var aweSomeBands = [
'Bad Religion',
'Dropkick Murphys',
'Flogging Molly',
'Red Hot Chili Peppers',
'Pornophonique'
];

单引号和双引号
为了避免混乱，我们建议在HTML中使用双引号，在JavaScript中使用单引号。
代码如下:

//html


代码如下:

//JavaScript