做了開源以后,最大的感觸就是:溝通增加了,信息來源增加了。提問的朋友很多,各種問題都會有,有時候在解答時也是很郁悶,這兩天感覺適當總結一下自己以及周圍朋友在制作 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 的兼容問題造成的呢?(然后就去 google 一下,如果被墻了,那么就去百度吧!呵呵)
補充: 在不少情況下,往往是 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 ;
- }
- });
- }
- }
避免辦法: 對于必要的標識,一定要在 error 中設置相應的數據恢復,避免由于 ajax 異常導致程序邏輯錯誤。
例如上面的代碼需要增加:
error: function() { a = true;}
No.12 jQuery 搜索DOM對象是否存在的判定
這是一個剛使用 jQuery 時非常容易犯的錯誤。
錯誤描述: var a = $("#test"); if(!!a) {alert("ok!");} 運行這段代碼你會發現,永遠都會 alert,不管是否存在 id = "test" 的DOM
避免辦法: jQuery 的 $ 方法查找對象,始終都會返回一個 jQuery 對象的,不管是否存在查找的結果。檢查是否有結果請利用 length 屬性,比如 if(a.length>0) {alert("ok!");}
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
