當前位置:編程學習大全網 - 源碼下載 - javascript應註意的問題

javascript應註意的問題

以下是JavaScript容易犯錯的幾個"陷阱".由本人google+體驗+搜集而來.雖然不是什麽很高深的技術問題,但註意壹下,會使您的編程輕松些.

1. 最後壹個逗號

如這段代碼,註意最後壹個逗號,按語言學角度來說應該是不錯的(python的類似數據類型辭典dictionary就允許如此)。IE會報語法錯誤,但語義不詳,妳只能用人眼從幾千行代碼中掃描。

Js代碼

<script>

var theObj = {

city : "ShenZhen",

state : "ok",

}

</script>

<script> var theObj = { city : "ShenZhen", state : "ok", } </script>

2. this的引用會改變

如這段代碼:

Js代碼

<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>

<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代碼

<input type="button" value="Gotcha!" id="theText" >

<script>

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 = this; this.alertMessage = “Javascript rules”; this.OnClick = function() { alert(self.value); } }(); document.getElementById(”theText”).onclick = MyObject.OnClick </script>

實質上,這就是JavaScript作用域的問題。如果妳看過,妳會發現解決方案不止壹種。

3. 標識盜賊

在JavaScript中不要使用跟HTML的id壹樣的變量名。如下代碼:

Js代碼

<input type="button" id="TheButton">

<script>

var TheButton = document.getElementById("TheButton");

</script>

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

IE會報對象未定義的錯誤。我只能說:IE 真爛.

4. 字符串只替換第壹個匹配

如下代碼:

Js代碼

<script>

var fileName = "This is a title";

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

</script>

<script> 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,"_");

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).

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 = 1; for ( var x in arr) { total = total * arr[x]; }

運行得好好的,不是嗎?但是有壹天它不幹了,給我返回的值變成了NaN, 暈。我只不過引入了壹個庫而已啊。原來是這個庫改寫了Array的prototype,這樣,我們的arr平白無過多出了壹個屬性(方法),而for...in...會把它給遍歷出來。

其實,就算沒有引進庫.它的結果也並不是數組所有元素的乘積,因為for...in...會遍歷到數組的length屬性.

所以這樣做才是比較安全的:

Js代碼

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

total = total * arr[x];

}

for ( var x = 0; x < arr.length; x++) { 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);

更詳細的資料參見:/course/1_web/javascript/jsjs/2008624/127762.html)

  • 上一篇:java中的三個數據庫連接池哪個比較好?
  • 下一篇:公寓出租源代碼
  • copyright 2024編程學習大全網