菜鳥必看:這些年我們愛犯的弱智錯(cuò)誤

作者：zTreeAPI 2012-02-27 15:56:14

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

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

閑言少敘，直接看正文：

No.1 大小寫不一致

把這個(gè)弱智錯(cuò)誤名列榜首，可是當(dāng)之無愧，從菜鳥到高手，能有幾人逃得過?

錯(cuò)誤描述：一會(huì)兒用 id、pid;一會(huì)兒又是 Id、pId。當(dāng)然要亂套了。

避免辦法：養(yǎng)成良好的命名習(xí)慣很重要。看著文檔做功課時(shí)要仔細(xì)。

No.2 輸入錯(cuò)誤

其實(shí)這個(gè)錯(cuò)誤和大小寫不一致類似。

錯(cuò)誤描述：輸入變量時(shí)左右手指出現(xiàn)了節(jié)奏時(shí)差，變量名中某兩個(gè)字母站錯(cuò)了位置，本來應(yīng)該輸入 function 結(jié)果一不小心輸入了 fucntion，如果不仔細(xì)看怎么看怎么對(duì)。另外多個(gè)字母少個(gè)字母的情況也時(shí)有發(fā)生。

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

<span style="font-size: x-small;">//兩行放在一起對(duì)比，是不是一眼就能看出來錯(cuò)誤的地方呢？  
var children = function() { var _this = this; var iCounter = 0;  iCounter++;}  
var children = funtcion() { var _this = this; var iCounter = 0;  icounter++;}</span>

No.3 多余的逗號(hào)

相信10個(gè)人中至少有8個(gè)人犯過這種錯(cuò)誤。

錯(cuò)誤描述：主要是對(duì)于 JSON 對(duì)象中，最后一個(gè)對(duì)象后面仍保留一個(gè)逗號(hào)。這種情況下對(duì)于 firefox、chrome 等瀏覽器來說運(yùn)行起來一切正常，可是放到 ie 上就報(bào)錯(cuò)，再加上 ie 還很難調(diào)試，所以對(duì)于菜鳥來說往往很難找到源頭。

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

出現(xiàn)這種錯(cuò)誤最常見的情況就是在 Server 端利用循環(huán)語句批量生成 JSON 數(shù)據(jù)字符串的時(shí)候。

避免辦法：這個(gè)的確沒有太好的辦法徹底避免，只能是讓你的腦子里多一根經(jīng)，一旦批量制作 JSON 格式的內(nèi)容時(shí)，就要小心最后面是不是會(huì)多一個(gè)逗號(hào)。

No.4 數(shù)組的長度

錯(cuò)誤描述：關(guān)于數(shù)組的使用時(shí)，總會(huì)時(shí)不時(shí)的出現(xiàn)一些下標(biāo)越界或者 null 方面的錯(cuò)誤。

舉例：某個(gè) function 中一段代碼 a[0] = a[1]+1; 大部分時(shí)候正常，但偶爾會(huì)出現(xiàn)錯(cuò)誤。

避免辦法：產(chǎn)生這個(gè)錯(cuò)誤一般來說是沒有養(yǎng)成使用數(shù)組時(shí)要首先對(duì) 數(shù)組對(duì)象進(jìn)行檢查的習(xí)慣，例如首先判斷 a!=null; 另外還要判斷 a.length 是否滿足你需要用到的 index 值。這個(gè)就是個(gè)習(xí)慣問題。

No.5 詭異的計(jì)數(shù)器

這是一個(gè) zTree 中曾經(jīng)犯下的弱智錯(cuò)誤，但由于原先使用多棵樹的用戶并不多，所以很長時(shí)間都沒有暴露出來。

錯(cuò)誤描述：有一個(gè)全局變量用于計(jì)數(shù)，但有多個(gè)不同的地方都在使用這一個(gè)計(jì)數(shù)器，當(dāng)其中某處忘記了其他地方還在使用這個(gè)計(jì)數(shù)器時(shí)，可能會(huì)對(duì)其進(jìn)行清零重置。。OMG，這樣可就糟糕了吧，別的地方因?yàn)橛?jì)數(shù)器歸零會(huì)容易導(dǎo)致某些值沖突。

避免辦法：對(duì)于全局變量的使用要規(guī)范，對(duì)于改變?nèi)肿兞康牡胤皆缴僭胶茫蛘叻庋b成固定的方法，要清楚全局變量的作用，修改時(shí)一定要慎重。

No.6 難以理解的等式

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

<span style="font-size: x-small;">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</span>

錯(cuò)誤描述：對(duì)于 number 和 string 在 if 表達(dá)式中，如果值是 0 或 "0" 時(shí)總會(huì)讓你措手不及。

避免辦法：建議對(duì)于非 boolean 對(duì)象的在判定時(shí)采用 !! 進(jìn)行標(biāo)準(zhǔn)的 boolean 轉(zhuǎn)換，同時(shí)要記住 js 中對(duì)于 0 這個(gè)特殊情況的判定，再結(jié)合你的需求編寫正確的判定表達(dá)式。

No.7 JSON 對(duì)象的理解

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

錯(cuò)誤描述：錯(cuò)誤的認(rèn)為只要 {}里面的內(nèi)容相同，那么這兩個(gè)對(duì)象就是一樣的。

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

避免辦法：需要正確理解 JSON 對(duì)象的定義。每次 {} 就相當(dāng)于生成一個(gè)新的 JSON 對(duì)象。

No.8 js 文件加載順序

你是不是出現(xiàn)過js 文件都加載了，可是還總報(bào) undefined 的錯(cuò)誤呢?

錯(cuò)誤描述：由于先加載了使用某個(gè)對(duì)象的代碼，后加載了定義該對(duì)象的代碼，導(dǎo)致報(bào)錯(cuò)。

舉例：

<span style="font-size: x-small;">// a.js 文件  
function a() {return "a";}  
 
// b.js 文件  
alert(a());</span>

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

No.9 瀏覽器的兼容問題

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

錯(cuò)誤描述：在某個(gè)瀏覽器下調(diào)整的好好的，怎么換個(gè)瀏覽器就不好使了??

避免辦法：如果讓你完全牢記所有會(huì)出現(xiàn)兼容問題的代碼，貌似不太現(xiàn)實(shí)。一般來說只能記住一些常用的，或者是利用 jQuery 等架構(gòu)減輕遇到這些問題的可能性。再有就是要提高警惕，一旦出現(xiàn)此類情況，就要考慮一下是不是因?yàn)?js 的兼容問題造成的呢?(然后就去 google 一下，如果被墻了，那么就去百度吧!呵呵)

補(bǔ)充：在不少情況下，往往是 css 的兼容出現(xiàn)了錯(cuò)誤，讓你誤以為是 js 的錯(cuò)誤。

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

對(duì)于一個(gè)菜鳥來說，對(duì)于異步加載的理解很關(guān)鍵，也是一個(gè)經(jīng)常容易犯錯(cuò)誤的地方。

錯(cuò)誤描述：用 Ajax 去給某個(gè)對(duì)象賦值，緊接著 Ajax 的代碼后面就執(zhí)行了使用這個(gè)對(duì)象的代碼。然后你就會(huì)發(fā)現(xiàn)明明 Ajax 返回的結(jié)果是正確的，為何還不能正常執(zhí)行呢??

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

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

上面說了一定要在 Ajax 的 success 和 error 這兩個(gè)回調(diào)函數(shù)中執(zhí)行必要代碼，success 不就可以了，為何還要在 error 中執(zhí)行呢??

錯(cuò)誤描述：對(duì)于某些在 Ajax 前設(shè)定的標(biāo)識(shí)，只在 Ajax 的 success 中修改標(biāo)識(shí)，會(huì)發(fā)現(xiàn)一旦 server 或網(wǎng)絡(luò)異常導(dǎo)致 Ajax 出錯(cuò)時(shí)，就會(huì)出現(xiàn)一些很難理解的錯(cuò)誤現(xiàn)象。

舉例：

<span style="font-size: x-small;">//這段代碼簡單的實(shí)現(xiàn)避免同時(shí)多個(gè) ajax 執(zhí)行的代碼，只有當(dāng) ajax 完成后才能重新 ajax  
//一旦ajax過程出現(xiàn)錯(cuò)誤后，這段代碼將導(dǎo)致 goAjax 永遠(yuǎn)不會(huì)再進(jìn)行 ajax 調(diào)用  
var a = true;  
 
function goAjax() {  
  if (a) {  
    a = false;  
    //這里用 jQuery 的 ajax 調(diào)用舉例  
    $.ajax({  
       success: function(msg) {  
           a = true;  
       }  
 
    });  
  }  
}</span>