javascript的最佳实践

时间:2022-09-13 14:49:35

把外部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];