把外部JavaScript文件放在HTML底部
如果把js放在单独文件中,当载入这个脚本文件的时候,HTML会停止解析,直到脚本载入完毕。。因此,用户可能会长时间对着一个空白的屏幕,看上去什么都没有发生。如果你的JavaScript代码只是增加一些功能(比如按钮的点击动作),那么尽管大胆地把文件引用放在HTML底部吧(就在之前),你会看到明显的速度提升。如果是用于其他目的的脚本文件,则需要慎重地考虑。但无论如何,这毫无疑问是一个非常值得考虑的地方。
避免全局变量
//糟糕的全局变量和全局函数
var current = null;
function init(){...}
function change(){...}
function verify(){...}
//如果变量和函数不需要在“外面”引用,那么就可以使用一个没有名字的方法将他们全都包起来。
(function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
})();
//如果变量和函数需要在“外面”引用,需要把你的变量和函数放在一个“命名空间”中
myNameSpace = function(){
var current = null;
function init(){...}
function change(){...}
function verify(){...}
//所有需要在命名空间外调用的函数和属性都要写在return里面
return{
init:init,
//甚至你可以为函数和属性命名一个别名
set:change
}
}();
使用前置+号来把字符串转化为数字
//会出现问题的代码
<form name="myform" action="[url]">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>
function total() {
var theform = document.forms["myform"];
var total = theform.elements["val1"].value + theform.elements["val2"].value;
alert(total); // This will alert "12", but what you wanted was 3!
}
//在字符串前面加上“+”,这是给JavaScript的一个暗示:这是一个数字而不是字符串
function total() {
var theform = document.forms["myform"];
var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
alert(total); // This will alert 3
}
获取对象属性的时候用方括号而不是点号
//这样是不行的
MyObject.value+i;
//这样就没有问题
MyObject["value"+i];