Javascript調(diào)試腳本的經(jīng)驗之談
更新時間:2008年10月13日 18:31:46 作者:
隨著用JavaScript編程的深入,你會開始理解那些JavaScript給出的不透明錯誤信息。一旦你理解了你常犯的一般性錯誤,你就會很快知道怎樣避免它們,這樣你寫的代碼中的錯誤將越來越少。
雖然the_name是一個變量,但是程序還會產(chǎn)生一個提示“the_name is very happy,”的警告對話框。這是因為一旦JavaScript看見引號包圍著某些東西就不再考慮它,所以當你把the_name放在引號里,你就阻止了 JavaScript從內(nèi)存中查找它。下面是一個不太明顯的此類錯誤的擴展:
function wakeMeIn3()
{
var the_message = "Wake up! Hey! Hey! WAKE UP!!!!";
setTimeout("alert(the_message);", 3000);
}
這里的問題是你告訴JavaScript三秒后執(zhí)行alert(the_message)。但是,三秒后the_message將不再存在,因為你已經(jīng)退出了函數(shù)。這個問題可以這樣解決:
function wakeMeIn3()
{
var the_message = "Wake up!";
setTimeout("alert('" + the_message+ "');", 3000);
}
把the_message放在引號外面,命令“alert('Wakeup!');”由 setTimeout預(yù)定好,就可以得到你想要的。這只是一些可能在你的代碼中作祟的很難調(diào)試的錯誤。一旦發(fā)現(xiàn)了它們,就有不同的或好或差的方法來改正錯誤。你很幸運,因為你能從我的經(jīng)驗和錯誤中獲益。
-------------------------------清除錯誤------------------------------------
找到錯誤,有時侯雖然很難,卻只是第一步。然后你必須清除錯誤。下面是一些在清除錯誤時應(yīng)該做的一些事:
首先拷貝你的程序
有些錯誤很難清除。實際上,有時在根除錯誤時,你會破壞整個程序 - 一個小錯誤使你瘋狂。在開始調(diào)試前保存你的程序是確保錯誤不會利用你的最好方法。
一次修正一個錯誤
如果你知道有好幾個錯誤,應(yīng)該修正一個,檢驗其結(jié)果,再開始下一個。一次修正許多錯誤而不檢驗?zāi)愕墓ぷ髦粫兄赂嗟腻e誤。
警惕迷惑性錯誤
有時你知道存在一個錯誤,但不真正知道為什么。假設(shè)有一個變量“index”,由于某種原因 “index”總比你期望的小1。你可以做下面兩件事中的一件:在那兒坐一會兒,解決它為什么變小了,或只是聳聳肩;在使用“index”之前加1,然后繼續(xù)進行。后一種方法稱為迷惑編程。當你開始思考“究竟是怎么了 - 為什么index是2而不是3呢?好吧...我現(xiàn)在先讓它正常工作,以后再修改錯誤?!睍r,你正在把一塊護創(chuàng)膏布貼到一處潛在的硬傷上。
迷惑編程可能在短期內(nèi)有用,但是你可以看到長期的厄運 - 如果你沒有完全理解你的代碼到可以真正清除錯誤的程度,那個錯誤將會回來困擾你。它或者以另一種你不能解決的怪異錯誤的方式回來,或者當下一個可憐的被詛咒的靈魂讀你的代碼時,他會發(fā)現(xiàn)你的代碼非常難以理解。
尋找小錯誤
有時侯,對程序員來說,剪切和粘貼代碼的能力是一種很壞的事。通常,你會在一個函數(shù)中寫一些 JavaScript代碼,然后把它們剪切和粘貼到另一個函數(shù)中。如果第一個函數(shù)有問題,那么現(xiàn)在兩個函數(shù)都有問題。我并不是說你不應(yīng)該剪切和粘貼代碼。但是錯誤會以某種方式繁殖,如果你發(fā)現(xiàn)了一個錯誤,你就應(yīng)該尋找與其相似的其它錯誤。(或者在制作它的若干版本之前確切知道會發(fā)生什么。)變量名拼寫錯誤在一段JavaScript代碼中會突然多次出現(xiàn) - 在一個地方把the_name錯拼成teh_name,你就有機會在其它地方發(fā)現(xiàn)這個錯誤。
如果所有其它的方法都失敗了
如果你正坐在那兒盯著一個錯誤,并且不能指出是怎么回事(或者根本沒有發(fā)現(xiàn)錯誤,但是因為程序不能正確運行,你知道存在錯誤),你最好從計算機前走開。去讀一本書,在角落散散步,或者拿一杯可口的飲料 - 做些事,任何事,但不要去想程序或問題。這種技術(shù)在某種情況下叫做“醞釀”,效果非常好。在你稍做休息和放松后,再試著找出錯誤。你會得到一幅比較清晰的景象?!搬j釀”起作用是因為它使你從思維混亂中解脫出來。如果沿著一條錯路走太遠,你有時會發(fā)現(xiàn)無法轉(zhuǎn)身。這種情況下最好開辟一條新路。我知道這會令人發(fā)火,但確實有效。真的!
如果上面的方法還不成功...
請求別人的幫助。有時你的思想會形成定式,只有換一種眼光才能洞察問題之所在。在結(jié)構(gòu)化編程環(huán)境中,程序員們定期地互相復(fù)查別人的代碼。這可以適當?shù)亟凶觥按a復(fù)查”,不僅可以幫助消除錯誤,還可以得到更好的代碼。不要怕把你的 JavaScript代碼給別人看,它會使你成為更好的JavaScript程序員。
但是消除錯誤的絕對最好的辦法是...
一開始就創(chuàng)建沒有錯誤的代碼。
-------------------------------創(chuàng)建沒有錯誤的代碼---------------------------------------
編好程序的關(guān)鍵是程序是寫給人的,不是寫給計算機的。如果你能明白其他人或許會閱讀你的 JavaScript,你就會寫更清晰的代碼。代碼越清晰,你就越不容易犯錯誤。機靈的代碼是可愛的,但就是這種機靈的代碼會產(chǎn)生錯誤。最好的經(jīng)驗法則是 KISS,即Keep It Simple,Sweetie(保持簡單,可愛)。另一個有幫助的技術(shù)是在寫代碼之前作注釋。這迫使你在動手之前先想好。一旦寫好了注釋,你就可以在其下面寫代碼。
下面是一個用這種方法寫函數(shù)的例子:
第一步:寫注釋
第二步:填充代碼
這種先寫注釋的策略不僅迫使你在寫代碼前思考,而且使編碼的過程看起來容易些 - 通過把任務(wù)分成小的,易于編碼的各個部分,你的問題看起來就不太象珠穆朗瑪峰,而象一群令人愉悅的起伏的小山。
最后... 總以分號結(jié)束你的每一條語句。
雖然并不是嚴格必需,你應(yīng)該養(yǎng)成以分號結(jié)束每一條語句的習慣,這樣可以避免這行后面再有代碼。忘了加分號,下一行好的代碼會突然產(chǎn)生錯誤。把變量初始化為“var”,除非你有更好的理由不這樣做。用“var”把變量局域化可以減少一個函數(shù)與另一個不相關(guān)函數(shù)相混淆的機會。
好了,既然你已經(jīng)知道了如何編碼,下面就讓我們學習怎樣使
你的JavaScript快速運行。>>
---------------------------------------------------------
按速度優(yōu)化JavaScript代碼
1.限制循環(huán)內(nèi)的工作量
2.定制if-then-else語句,按最可能到最不可能的順序
3.最小化重復(fù)執(zhí)行的表達式
您可能感興趣的文章:
- Javascript調(diào)試工具(下載)
- javascript腳本調(diào)試方法小結(jié)
- 在IE,Firefox,Safari,Chrome,Opera瀏覽器上調(diào)試javascript
- js調(diào)試工具 Javascript Debug Toolkit 2.0.0版本發(fā)布
- ie 調(diào)試javascript的工具
- Javascript 調(diào)試利器 Firebug使用詳解六
- 調(diào)試JavaScript/VBScript腳本程序(IE篇)
- Aptana調(diào)試javascript圖解教程
- 兩個JavaScript jsFiddle JSBin在線調(diào)試器
- JavaScript 錯誤處理與調(diào)試經(jīng)驗總結(jié)
- javascript 在firebug調(diào)試時用console.log的方法
- 調(diào)試Javascript代碼(瀏覽器F12及VS中debugger關(guān)鍵字)
- 10個基于瀏覽器的JavaScript調(diào)試工具分享
- 利用瀏覽器的Javascript控制臺調(diào)試PHP程序
- 禁用JavaScript控制臺調(diào)試的方法
- JS高級調(diào)試技巧:捕獲和分析 JavaScript Error詳解
- JavaScript調(diào)試技巧之console.log()詳解
- javascript調(diào)試之DOM斷點調(diào)試法使用技巧分享
- 使用Chrome調(diào)試JavaScript的斷點設(shè)置和調(diào)試技巧
- 谷歌瀏覽器調(diào)試JavaScript小技巧
- JavaScript如何調(diào)試有哪些建議和技巧附五款有用的調(diào)試工具
相關(guān)文章
bootstrap 設(shè)置checkbox部分選中效果
本篇文章主要介紹了bootstrap 設(shè)置checkbox部分選中效果,主要涉及到j(luò)s各個方面的內(nèi)容,對于bootstrap設(shè)置checkbox選中效果感興趣的朋友可以參考一下吧2017-04-04JS實現(xiàn)數(shù)組去重復(fù)值的方法示例
這篇文章主要介紹了JS實現(xiàn)數(shù)組去重復(fù)值的方法,結(jié)合實例形式分析了JS通過數(shù)組遍歷、運算等方法實現(xiàn)去重復(fù)值的操作技巧,需要的朋友可以參考下2017-02-02Bootstrap實現(xiàn)下拉菜單多級聯(lián)動
這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)下拉菜單多級聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11