菜鳥必看：這些年我們愛犯的弱智錯誤

作者: zTreeAPI 來源: ITeye 發布時間: 2012-09-11 09:29 閱讀: 8049 次推薦: 38 原文鏈接 [收藏]

　　做了開源以后，最大的感觸就是：溝通增加了，信息來源增加了。提問的朋友很多，各種問題都會有，有時候在解答時也是很郁悶，這兩天感覺適當總結一下自己以及周圍朋友在制作 js 時愛犯的弱智錯誤，還是很有必要的。這些弱智錯誤經常會讓我們抓狂——這么簡單的東西怎么就是總出錯呢?反復檢查好幾遍就是找不到錯誤，一旦你恍然大悟時，必然會驚呼：啊!太弱智了。。。。

　　這篇文章肯定無法幫助你應付面試(面試一般不會考你“弱智錯誤”的)，也肯定不會讓你的技術水平得到深入的提高(弱智錯誤一般和你使用的技術深淺無關)，但應該能讓你在調試代碼的過程中提高效率(更多是一種習慣，或者說還是“細節決定成敗”)，如果能對這些弱智錯誤牢記心間的話，當你遇到那些怎么改都改不對的時候，就要想想“是不是我犯了弱智錯誤??”，所以本篇文章主要獻給菜鳥們，對于老手來說，歡迎多多提供自己的經驗教訓，讓菜鳥們能夠更快的成長起來。

　　閑言少敘，直接看正文：

　　No.1 大小寫不一致

　　把這個弱智錯誤名列榜首，可是當之無愧，從菜鳥到高手，能有幾人逃得過?

　　錯誤描述：一會兒用 id、pid; 一會兒又是 Id、pId。當然要亂套了。

　　避免辦法：養成良好的命名習慣很重要。看著文檔做功課時要仔細。

　　No.2 輸入錯誤

　　其實這個錯誤和大小寫不一致類似。

　　錯誤描述：輸入變量時左右手指出現了節奏時差，變量名中某兩個字母站錯了位置，本來應該輸入 function 結果一不小心輸入了 fucntion，如果不仔細看怎么看怎么對。另外多個字母少個字母的情況也時有發生。

　　避免辦法：敲代碼時要盡量集中精神，避免三心二意。檢查錯誤時可以把正常的代碼和錯誤部分的代碼粘貼到一起，對比查看，往往很容易能夠發現這種錯誤。(推薦多玩玩兒“找不同”，也會不同程度的提升糾錯能力)

//兩行放在一起對比，是不是一眼就能看出來錯誤的地方呢？  
var children = function() { var _this = this; var iCounter = 0;  iCounter++;}  
var children = funtcion() { var _this = this; var iCounter = 0;  icounter++;}

　　No.3 多余的逗號

　　相信10個人中至少有8個人犯過這種錯誤。

　　錯誤描述：主要是對于 JSON 對象中，最后一個對象后面仍保留一個逗號。這種情況下對于 Firefox、Chrome 等瀏覽器來說運行起來一切正常，可是放到 IE 上就報錯，再加上 IE 還很難調試，所以對于菜鳥來說往往很難找到源頭。

　　舉例： {"a":1, "b":2, "c":3,}

　　出現這種錯誤最常見的情況就是在 Server 端利用循環語句批量生成 JSON 數據字符串的時候。

　　避免辦法：這個的確沒有太好的辦法徹底避免，只能是讓你的腦子里多一根經，一旦批量制作 JSON 格式的內容時，就要小心最后面是不是會多一個逗號。

　　No.4 數組的長度

　　錯誤描述：關于數組的使用時，總會時不時的出現一些下標越界或者 null 方面的錯誤。

　　舉例：某個 function 中一段代碼 a[0] = a[1]+1; 大部分時候正常，但偶爾會出現錯誤。

　　避免辦法：產生這個錯誤一般來說是沒有養成使用數組時要首先對數組對象進行檢查的習慣，例如首先判斷 a!=null; 另外還要判斷 a.length 是否滿足你需要用到的 index 值。這個就是個習慣問題。

　　No.5 詭異的計數器

　　這是一個 zTree 中曾經犯下的弱智錯誤，但由于原先使用多棵樹的用戶并不多，所以很長時間都沒有暴露出來。

　　錯誤描述：有一個全局變量用于計數，但有多個不同的地方都在使用這一個計數器，當其中某處忘記了其他地方還在使用這個計數器時，可能會對其進行清零重置。。OMG，這樣可就糟糕了吧，別的地方因為計數器歸零會容易導致某些值沖突。

　　避免辦法：對于全局變量的使用要規范，對于改變全局變量的地方越少越好，或者封裝成固定的方法，要清楚全局變量的作用，修改時一定要慎重。

　　No.6 難以理解的等式

　　寫代碼就少不了 if; 你在使用 if 的時候是否總會出現莫名其妙的結果呢? 看看下面這段代碼的結果，比較一下 a/b 的等式結果吧：

var a = 0;  
var b = "0";       
if (a) {console.log(1);}             // false  
if (!!a) {console.log(2);}           //  false  
if (b) {console.log(3);}             //  true  
if (!!b) {console.log(4);}           //  true  
if (a == false) {console.log(5);}    // true  
if (!!a == false) {console.log(6);}  //  true  
if (b == false) {console.log(7);}    //  true  
if (!!b == true) {console.log(8);}   //  true

　　錯誤描述：對于 number 和 string 在 if 表達式中，如果值是 0 或 "0" 時總會讓你措手不及。

　　避免辦法：建議對于非 boolean 對象的在判定時采用 !! 進行標準的 boolean 轉換，同時要記住 js 中對于 0 這個特殊情況的判定，再結合你的需求編寫正確的判定表達式。

　　No.7 JSON 對象的理解

　　有的初學者對于 server 端的對象能夠爭取理解，但是放到 js 中時往往開始變得糊涂了。

　　錯誤描述：錯誤的認為只要{}里面的內容相同，那么這兩個對象就是一樣的。

　　舉例：認為 var a = {"id":1}; var b = {"id":1} 那么 a == b (正確答案： a != b)

　　避免辦法：需要正確理解 JSON 對象的定義。每次 {} 就相當于生成一個新的 JSON 對象。

　　No.8 js 文件加載順序

　　你是不是出現過js文件都加載了，可是還總報 undefined 的錯誤呢?

　　錯誤描述：由于先加載了使用某個對象的代碼，后加載了定義該對象的代碼，導致報錯。

　　舉例：

// a.js 文件  
function a() {return "a";}  
     
// b.js 文件  
alert(a());

　　避免辦法：牢記先要定義對象，然后才能使用對象，確保 js 文件的加載順序。

　　No.9 瀏覽器的兼容問題

　　前兩天看到一句話，大概意思是：“作為一個前端程序員來說，很少有人能夠如此幸運——只兼容一款瀏覽器”。

　　錯誤描述：在某個瀏覽器下調整的好好的，怎么換個瀏覽器就不好使了??

　　避免辦法：如果讓你完全牢記所有會出現兼容問題的代碼，貌似不太現實。一般來說只能記住一些常用的，或者是利用 jQuery 等架構減輕遇到這些問題的可能性。再有就是要提高警惕，一旦出現此類情況，就要考慮一下是不是因為 js 的兼容問題造成的呢?

　　補充：在不少情況下，往往是 css 的兼容出現了錯誤，讓你誤以為是 js 的錯誤。

　　No.10 異步加載的疏忽(一)

　　對于一個菜鳥來說，對于異步加載的理解很關鍵，也是一個經常容易犯錯誤的地方。

　　錯誤描述：用 Ajax 去給某個對象賦值，緊接著 Ajax 的代碼后面就執行了使用這個對象的代碼。然后你就會發現明明 Ajax 返回的結果是正確的，為何還不能正常執行呢??

　　避免辦法：對于需要確保 Ajax 執行完畢后才能執行的代碼，一定要在 Ajax 的 success 和 error 這兩個回調函數中進行。絕對不能緊跟在 Ajax 的代碼后面立刻執行。一定要深刻理解“異步加載”的含義，以及它最簡單的工作原理。

　　No.11 異步加載的疏忽(二)

　　上面說了一定要在 Ajax 的 success 和 error 這兩個回調函數中執行必要代碼，success 不就可以了，為何還要在 error 中執行呢??

　　錯誤描述：對于某些在 Ajax 前設定的標識，只在 Ajax 的 success 中修改標識，會發現一旦 server 或網絡異常導致 Ajax 出錯時，就會出現一些很難理解的錯誤現象。

　　舉例：

//這段代碼簡單的實現避免同時多個 ajax 執行的代碼，只有當 ajax 完成后才能重新 ajax  
//一旦ajax過程出現錯誤后，這段代碼將導致 goAjax 永遠不會再進行 ajax 調用  
var a = true; 
function goAjax() {  
    if (a) {  
    a = false;  
    //這里用 jQuery 的 ajax 調用舉例  
    $.ajax({  
        success: function(msg) {  
            a = true;  
        }  
     
    });  
    }  
}