javascript应注意的问题

2023-04-05 15:39:02JavaScript027

javascript应注意的问题,第1张

以下是JavaScript容易犯错的几个"陷阱".由本人google+体验+搜集而来.虽然不是什么很高深的技术问题，但注意一下，会使您的编程轻松些.

1. 最后一个逗号

如这段代码，注意最后一个逗号，按语言学角度来说应该是不错的（python的类似数据类型辞典dictionary就允许如此）。IE会报语法错误，但语义不详，你只能用人眼从几千行代码中扫描。

Js代码

var theObj = {

city : "ShenZhen",

state : "ok",

}

</script>

2. this的引用会改变

如这段代码：

Js代码

var MyObject = function () {

this.alertMessage = "Javascript rules"

this.ClickHandler = function() {

alert(this.alertMessage ) //行1

}

}()

document.getElementById("theText").onclick = MyObject.ClickHandler

</script>

<input type="button" value="Gotcha!" id="MyButton" ><script>var MyObject = function () { this.alertMessage = "Javascript rules"this.ClickHandler = function() { alert(this.alertMessage )//行1 } }()document.getElementById("theText").onclick = MyObject.ClickHandler</script>

并不如你所愿，答案并不是”JavaScript rules”。在执行MyObject.ClickHandler时，在行1中，this的引用实际上指向的是document.getElementById("theText")的引用。可以这么解决：

Js代码

var MyObject = function () {

var self = this

this.alertMessage = “Javascript rules”

this.OnClick = function() {

alert(self.value)

}

}()

document.getElementById(”theText”).onclick = MyObject.OnClick

</script>

<input type="button" value="Gotcha!" id="theText" ><script>var MyObject = function () { var self = thisthis.alertMessage = “Javascript rules”this.OnClick = function() { alert(self.value)} }()document.getElementById(”theText”).onclick = MyObject.OnClick </script>

实质上，这就是JavaScript作用域的问题。如果你看过，你会发现解决方案不止一种。

3. 标识盗贼

在JavaScript中不要使用跟HTML的id一样的变量名。如下代码：

Js代码

var TheButton = document.getElementById("TheButton")

</script>

<input type="button" id="TheButton"><script>var TheButton = document.getElementById("TheButton")</script>

IE会报对象未定义的错误。我只能说：IE 真烂.

4. 字符串只替换第一个匹配

如下代码：

Js代码

var fileName = "This is a title"

fileName=fileName.replace(" ","_")

</script>

而实际上，fileName结果是"This_is a title". 在JavaScript中，String.replace的第一个参数应该是正则表达式。所以，正确的做法是这样：

Js代码

var fileName = "This is a title".replace(/ /g,"_")

5. mouseout意味着mousein

事实上，这是由于事件冒泡导致的。IE中有mouseenter和mouseleave，但不是标准的。作者在此建议大家使用js库来解决问题。

6. parseInt是基于进制体系的

这个是常识，可是很多人给忽略了parseInt还有第二个参数，用以指明进制。比如，parseInt("09")，如果你认为答案是9，那就错了。因为，在此，字符串以0开头，parseInt以八进制来处理它，在八进制中，09是非法，返回false，布尔值false转化成数值就是0. 因此，正确的做法是

Js代码

parseInt("09", 10).

7. for...in...会遍历所有的东西

有一段这样的代码：

Js代码

var arr = [5,10,15]

var total = 1

for ( var x in arr) {

total = total * arr[x]

}

var arr = [5,10,15] var total = 1for ( var x in arr) { total = total * arr[x]}

运行得好好的，不是吗？但是有一天它不干了，给我返回的值变成了NaN, 晕。我只不过引入了一个库而已啊。原来是这个库改写了Array的prototype，这样，我们的arr平白无过多出了一个属性（方法），而for...in...会把它给遍历出来。

其实,就算没有引进库.它的结果也并不是数组所有元素的乘积,因为for...in...会遍历到数组的length属性.

所以这样做才是比较安全的：

Js代码

for ( var x = 0x <arr.lengthx++) {

total = total * arr[x]

}

for ( var x = 0x <arr.lengthx++) { total = total * arr[x]}

其实，这也是污染基本类的prototype会带来危害的一个例证。

8. 事件处理器的陷阱

这其实只会存在使用作为对象属性的事件处理器才会存在的问题。比如window.onclick = MyOnClickMethod这样的代码，这会复写掉之前的window.onclick事件，还可能导致IE的内容泄露（sucks again）。在IE还没有支持DOM 2的事件注册之前，作者建议使用库来解决问题，比如使用YUI:

YAHOO.util.Event.addListener(window, "click", MyOnClickMethod)

这应该也属于常识问题，但新手可能容易犯错。

9. focus() 出错

新建一个input文本元素，然后把焦点挪到它上面，按理说，这样的代码应该很自然：

Js代码

var newInput = document.createElement("input")

document.body.appendChild(newInput)

newInput.focus()

newInput.select()

var newInput = document.createElement("input")document.body.appendChild(newInput)newInput.focus()newInput.select()

但是IE会报错。这是因为当你执行fouce()的时候，元素尚未可用。因此，我们可以延迟执行：

Js代码

var newInput = document.createElement("input")

newInput.id = "TheNewInput"

document.body.appendChild(newInput)

//在0.01秒之后调用匿名函数获取焦点

setTimeout(function(){

document.getElementById('TheNewInput').focus()

document.getElementById('TheNewInput').select()}, 10)

var newInput = document.createElement("input")newInput.id = "TheNewInput"document.body.appendChild(newInput)//在0.01秒之后调用匿名函数获取焦点 setTimeout(function(){ document.getElementById('TheNewInput').focus()document.getElementById('TheNewInput').select()}, 10)

更详细的资料参见:http://realazy.org/blog/category/javascript-dom/

10.document.write()完全替换之前页面内容

有这样一段代码:

Js代码

function init() {

document.write("现在时间是:" + Date() )

}

window.onload = init

</script>

<h3>开始</h3><script type="text/jscript">function init() { document.write("现在时间是:" + Date() )} window.onload = init</script><h3>结束</h3>

上面代码块中的"开始"和"结束"两块不会输出.

当onload事件结束之后,如果再一次调用document.write()方法写进一段HTML,这段HTML会完全替换掉之前页面的内容.整个页面的源代码就变为了document.write()所写的内容.把上面的改为:

Js代码

function init() {

document.write("现在时间是:" + new Date() )

}

init()

</script>

<h3>开始</h3><script type="text/jscript">function init() { document.write("现在时间是:" + new Date() )} init() </script><h3>结束</h3>

"开始"和"结束"就会正常输出.

11.注意你name的值.

有这样一段代码:

Js代码

</form>

//获取form的id

alert(document.forms[0].action)

</script>

<form name="myForm" action="aa.htm"><input type="text" name="action" /></form><script>//获取form的id alert(document.forms[0].action)</script>

可输出结果不是我们想要的"aa.htm",而是一个"[object]"字符串.因为它得到的是myForm中的name为"action"的input标签的值.更详细的内容请参考[url]https://bugzilla.mozilla.org/show_bug.cgi?id=322488

[/url]

12.后台数据传输不会影响到前台

也许你会说这是一非常低级的错误.但我还是想说下:

页面login.htm代码

Js代码

...

xmlHttp.open("GET","check.htm",false)

xmlHttp.send()

alert(xmlHttp.responseText)

...

... xmlHttp.open("GET","check.htm",false)xmlHttp.send()alert(xmlHttp.responseText)...

页面check.htm代码

Js代码

...

window.onload=checkLogin

function checkLogin(){

...

//如果验证失败,弹出错误

alert("登录失败")

...

}

...

... window.onload=checkLoginfunction checkLogin(){ ... //如果验证失败,弹出错误 alert("登录失败")... } ...

很多人习惯用这种方法来进行登录失败的提示.但是要注意:xmlHttp发送数据的时候是进行的后台发送,它所关心的,仅仅是send之后,得到所请求URL的响应.而check.htm页面所执行的一切,都是只在后台完成.不管它怎么跳转,或者alert(),或者close().都不会在界面中有任何显示.

-----------------------------------------------------------------------------------------

在实践中，JavaScript的陷阱还有很多很多，大多是由于解析器的实现不到位而引起。这些东西一般都不会在教科书中出现，只能靠开发者之间的经验分享。希望大家有更好的分享。

部分内容引用自:http://www.haoxiai.net/wangzhanzhizuo/JavaScript/48650.html

文章出处：DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/2008624/127762.html)

一、让代码简洁：一些简略的表达方式也会产生很好的优化

eg：x=x+1在不影响功能的情况下可以简写为x++

二、变量名方法名尽量在不影响语意的情况下简单。（可以选择首字母命名）

eg：定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength。

三、关于JS的循环，循环是一种常用的流程控制。

JS提供了三种循环：for()、while()、for(in)。在这三种循环中for(in)的效率最差，因为它需要查询Hash键，因此应尽量少用for(in)循环，for()、while()循环的性能基本持平。当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或–运算符。

四、如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。

因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。

五、尽量选用局部变量而不是全局变量。

局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。

六、尽量少使用eval。

每次使用eval需要消耗大量时间，这时候使用JS所支持的闭包可以实现函数模板。

七、减少对象查找

因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。

八、字符串连接。

如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要连接多个字符串，应该少使用+=，如s+=as+=bs+=c应该写成s+=a + b + c；

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下

var buf = new Array()for(var i = 0i <100i++){ buf.push(i.toString())}var all = buf.join("")

九、类型转换

1. 把数字转换成字符串，应用"" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：("" +) >String() >.toString() >new String()

尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。

String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。

2. 浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。

3. 对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高

十、尽量作用JSON格式来创建对象，而不是var obj=new Object()方法。

因为前者是直接复制，而后者需要调用构造器，因而前者的性能更好。

十一、当需要使用数组时，也尽量使用JSON格式的语法，

使用JSON格式的语法即直接使用如下语法定义数组：[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。

十二、对字符串进行循环操作，例如替换、查找，就使用正则表达式。

因为JS的循环速度比较慢，而正则表达式的操作是用C写成的API，性能比较好。

十三、插入HTML

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。

十四、对象查询

使用[“”]查询要比.items()更快

十五、定时器