收藏:Javascript 指令碼的調試經驗

來源:互聯網
上載者:User
   隨著用JavaScript編程的深入,你會開始理解那些JavaScript給出的不透明錯誤資訊。一旦你理解了你常犯的一般性錯誤,你就會很快知道怎樣避免它們,這樣你寫的代碼中的錯誤將越來越少。編程實際上是一種能隨著時間不斷飛快進步的技術。但是不管變得多麼熟練,你仍然要花一些時間調試你的代碼。如果你做過家庭作業,或有過JacaScript編程經驗,你會知道相當多的時間是花在調試上。這很正常 - 這隻是編程者必須做的事之一。實際上,按照大量的研究,程式員平均百分之五十的時間花在解決代碼中的錯誤。

  關鍵是學會怎樣有效地調試你的程式。我有一些技巧可以協助你解決程式為什麼沒有象應該的那樣運行,或者幫你首先避免寫有很多錯誤的代碼:

  1.用不同方式列印出變數
  2.注意一般性錯誤
  3.編碼之前先想好
  --------------------------------------------------------------------------------
  如果JavaScript沒能捕獲你的錯誤,你也沒有通過查看代碼發現錯誤,有時列印出變數會對你有所協助。最簡單的方法是象下面這樣使用一個alert():

  1.   // theGreeting gets a name using getName, then presents
  2.   // one or two alert boxes depending on what the name is
  3.   //function getName()
  4.   {
  5.     var first_name = prompt("what's your first name?","");
  6.     var last_name = prompt("what's your last name?","");
  7.     var the_name = first_name + " " + last_name;
  8.     alert("in getName, the_name is: " + the_name);
  9.   }

  -----------------------------找到錯誤--------------------------------------------------
  1.一般性程式錯誤
  多數錯誤只是無聊的語法錯誤。記住關閉那些引號,大括弧和小括弧會花費很長時間,不過幸運的是 JavaScript自動錯誤偵測器能捕獲大部分此類錯誤。雖然JavaScript錯誤偵測器隨著日漸複雜的流覽器而不斷完善,但是一些錯誤仍會溜走。下面是一些需要留意的常見錯誤:

  2.混淆變數名或函數名
  大寫和複數變數和函數名產生的錯誤令人煩惱地經常出現,有時JavaScript錯誤偵測器不能捕獲它們。通過建立和堅持使用一種對變數和函數的命名協定,會大大減少這些麻煩的數量。例如,我全部用小寫字母定義變數,並用底線代替空格(my_variable,the_data, an_example_variable),用內建符號表示函數 (addThreeNumbers(), writeError()等)。我避免使用任何複數,因為我總是忘記那些變數是不是複數。

  3.偶然地使用了保留字
  一些字不能作為變數名,因為它們已經被JavaScript使用。例如,不能定義一個叫 “if”的變數,因為它實際上是JavaScript的一部分 - 如果使用“if”,你會遇到各種麻煩。當你因為使用命名為“if”的變數而變得瘋狂時,一個叫做“document”的變數是很誘人的。不幸的是,“document”是一個JavaScript對象。另一個經常遇到的問題是把變數命名為“name”(表單元素有“names”屬性)。把變數命名為“name”不會總出問題,只是有時 - 這會更使人迷惑 - 這就是避免使用“name”變數的原因。
  不幸的是,不同的流覽器有不同的保留字,所以沒有辦法知道該迴避哪些字。最安全的辦法是避免使用已經成為JavaScript一部分的字和HTML使用的字。如果你因為變數遇到問題,並且不能發現哪兒錯了,試著把變數改個名字。如果成功了,你或許就避開了保留字。

  4.記住在邏輯判斷時應該用兩個等號
  一些流覽器能捕獲這種錯誤,有些卻不能。這是一種非常常見的錯誤,但是如果流覽器不能替你指出來,你就很難發現。下面是一個這種錯誤的例子:

  1.   var the_name = prompt("what's your name?", "");
  2.   if (the_name = "the monkey")
  3.   {
  4.   alert("hello monkey!");
  5.   } else {
  6.   alert("hello stranger.");
  7.   }

  這段代碼將產生“hello monkey!”警告對話方塊 - 不管你在提示裡敲的是什麼 - 這不是我們希望的。原因是在if-then語句中只有一個等號,這句話告訴JavaScript你想讓一件事等於另一件。假設你在提示中敲的是 “robbie the robot”。最開始,變數the_name的值是“robbie the robot”,但是隨後if語句告訴JavaScript你想把the_name設為“the monkey.”。於是JavaScript很高興地執行你的命令,送一個“true”訊息給if-then語句,結果警告對話方塊每次都出現“hello monkey!”。這種陰險的錯誤會使你發瘋,所以注意使用兩個等號。

  5.偶然給變數加上了引號,或忘了給字串加引號
  我不時遇到這個問題。JavaScript區分變數和字串的唯一方法是:字串有引號,變數沒有。下面有一個明顯的錯誤:

  1.   var the_name = 'koko the gorilla';
  2.   alert("the_name is very happy");

  雖然the_name是一個變數,但是程式還會產生一個提示“the_name is very happy,”的警告對話方塊。這是因為一旦JavaScript看見引號包圍著某些東西就不再考慮它,所以當你把the_name放在引號裡,你就阻止了 JavaScript從記憶體中尋找它。下面是一個不太明顯的此類錯誤的擴充:

  1.   function wakeMeIn3()
  2.   {
  3.     var the_message = "Wake up! Hey! Hey! WAKE UP!!!!";
  4.     setTimeout("alert(the_message);", 3000);
  5.   }

  這裡的問題是你告訴JavaScript三秒後執行alert(the_message)。但是,三秒後the_message將不再存在,因為你已經退出了函數。這個問題可以這樣解決:

  1.   function wakeMeIn3()
  2.   {
  3.     var the_message = "Wake up!";
  4.     setTimeout("alert('" + the_message+ "');", 3000);
  5.   }

  把the_message放在引號外面,命令“alert('Wakeup!');”由 setTimeout預定好,就可以得到你想要的。這隻是一些可能在你的代碼中作祟的很難調試的錯誤。一旦發現了它們,就有不同的或好或差的方法來改正錯誤。你很幸運,因為你能從我的經驗和錯誤中獲益。

  -------------------------------清除錯誤------------------------------------
  找到錯誤,有時侯雖然很難,卻只是第一步。然後你必須清除錯誤。下面是一些在清除錯誤時應該做的一些事:
  
  首先拷貝你的程式

  有些錯誤很難清除。實際上,有時在根除錯誤時,你會破壞整個程式 - 一個小錯誤使你瘋狂。在開始調試前儲存你的程式是確保錯誤不會利用你的最好方法。

  一次修正一個錯誤
  如果你知道有好幾個錯誤,應該修正一個,檢驗其結果,再開始下一個。一次修正許多錯誤而不檢驗你的工作只會招致更多的錯誤。

  警惕迷惑性錯誤
  有時你知道存在一個錯誤,但不真正知道為什麼。假設有一個變數“index”,由於某種原因 “index”總比你期望的小1。你可以做下面兩件事中的一件:在那兒坐一會兒,解決它為什麼變小了,或只是聳聳肩;在使用“index”之前加1,然後繼續進行。後一種方法稱為迷惑編程。當你開始思考“究竟是怎麼了 - 為什麼index是2而不是3呢?好吧...我現在先讓它正常工作,以後再修改錯誤。”時,你正在把一塊護創膏布貼到一處潛在的硬傷上。
  迷惑編程可能在短期內有用,但是你可以看到長期的厄運 - 如果你沒有完全理解你的代碼到可以真正清除錯誤的程度,那個錯誤將會回來困擾你。它或者以另一種你不能解決的怪異錯誤的方式回來,或者當下一個可憐的被詛咒的靈魂讀你的代碼時,他會發現你的代碼非常難以理解。

  尋找小錯誤
  有時侯,對程式員來說,剪下和粘貼代碼的能力是一種很壞的事。通常,你會在一個函數中寫一些 JavaScript代碼,然後把它們剪下和粘貼到另一個函數中。如果第一個函數有問題,那麼現在兩個函數都有問題。我並不是說你不應該剪下和粘貼代碼。但是錯誤會以某種方式繁殖,如果你發現了一個錯誤,你就應該尋找與其相似的其它錯誤。(或者在製作它的若干版本之前確切知道會發生什麼。)變數名拼字錯誤在一段JavaScript代碼中會突然多次出現 - 在一個地方把the_name錯拼成teh_name,你就有機會在其它地方發現這個錯誤。

  如果所有其它的方法都失敗了
  如果你正坐在那兒盯著一個錯誤,並且不能指出是怎麼回事(或者根本沒有發現錯誤,但是因為程式不能正確運行,你知道存在錯誤),你最好從電腦前走開。去讀一本書,在角落散散步,或者拿一杯可口的飲料 - 做些事,任何事,但不要去想程式或問題。這種技術在某種情況下叫做“醞釀”,效果非常好。在你稍做休息和放鬆後,再試著找出錯誤。你會得到一幅比較清晰的景象。“醞釀”起作用是因為它使你從思維混亂中解脫出來。如果沿著一條錯路走太遠,你有時會發現無法轉身。這種情況下最好開闢一條新路。我知道這會令人發火,但確實有效。真的!

  如果上面的方法還不成功...
  請求別人的協助。有時你的思想會形成定式,只有換一種眼光才能洞察問題之所在。在結構化編程環境中,程式員們定期地互相複查別人的代碼。這可以適當地叫做“代碼複查”,不僅可以協助消除錯誤,還可以得到更好的代碼。不要怕把你的 JavaScript代碼給別人看,它會使你成為更好的JavaScript程式員。
  
  但是消除錯誤的絕對最好的辦法是...

  一開始就建立沒有錯誤的代碼。

  -------------------------------建立沒有錯誤的代碼---------------------------------------
  編好程式的關鍵是程式是寫給人的,不是寫給電腦的。如果你能明白其他人或許會閱讀你的 JavaScript,你就會寫更清晰的代碼。代碼越清晰,你就越不容易犯錯誤。機靈的代碼是可愛的,但就是這種機靈的代碼會產生錯誤。最好的經驗法則是 KISS,即Keep It Simple,Sweetie(保持簡單,可愛)。另一個有協助的技術是在寫代碼之前作注釋。這迫使你在動手之前先想好。一旦寫好了注釋,你就可以在其下面寫代碼。
  下面是一個用這種方法寫函數的例子:

  第一步:寫注釋

  第二步:填充代碼
  這種先寫注釋的策略不僅迫使你在寫代碼前思考,而且使編碼的過程看起來容易些 - 通過把任務分成小的,易於編碼的各個部分,你的問題看起來就不太象珠穆朗瑪峰,而象一群令人愉悅的起伏的小山。

  最後... 總以分號結束你的每一條語句。
  雖然並不是嚴格必需,你應該養成以分號結束每一條語句的習慣,這樣可以避免這行後面再有代碼。忘了加分號,下一行好的代碼會突然產生錯誤。把變數初始化為“var”,除非你有更好的理由不這樣做。用“var”把變數局域化可以減少一個函數與另一個不相關函數相混淆的機會。
  好了,既然你已經知道了如何編碼,下面就讓我們學習怎樣使

  你的JavaScript快速運行。>>
  ---------------------------------------------------------
  按速度最佳化JavaScript代碼
  1.限制迴圈內的工作量
  2.定製if-then-else語句,按最可能到最不可能的順序
  3.最小化重複執行的運算式

From: http://blog.csdn.net/java2000_net/archive/2008/10/10/3046871.aspx

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.