寫(xiě)任何編程代碼，不同的開(kāi)發(fā)者都會(huì )有不同的見(jiàn)解。但參考一下總是好的，下面是來(lái)自Javascript Toolbox發(fā)布的14條最佳JS代碼編寫(xiě)技巧，Sofish翻譯(1,2)。 1. 總是使用 ‘var’在JavaScript中，變量不是全局范圍的就是函數范圍的，使用”var”關(guān)鍵詞將是保持變量簡(jiǎn)潔明了的關(guān)鍵。當聲明一個(gè)或者是全局或者是函數級（function-level）的變量，需總是前置”var”關(guān)鍵詞，下面的例子將強調不這樣做潛在的問(wèn)題。 不使用 Var 造成的問(wèn)題 var i=0; // This is good - creates a global variable function test() { for (i=0; i<10; i++) { alert("Hello World!"); } } test(); alert(i); // The global variable i is now 10!因為變量函數中變量 i 并沒(méi)有使用 var 使其成為函數級的變量，在這個(gè)例子中它引用了全局變量?？偸鞘褂?var 來(lái)聲明全局變量是一個(gè)很多的做法，但至關(guān)重要的一點(diǎn)是使用 var 定義一個(gè)函數范圍的變量。下面這兩個(gè)方法在功能上是相同的： 正確的函數 function test() { var i=0; for (i=0; i<10; i++) { alert("Hello World!"); } }正確的函數 function test() { for (var i=0; i<10; i++) { alert("Hello World!"); } }2. 特性檢測而非瀏覽器檢測一些代碼是寫(xiě)來(lái)發(fā)現瀏覽器版本并基于用戶(hù)正使用的客戶(hù)端的對其執行不同行為。這個(gè)，總的來(lái)說(shuō)，是一個(gè)非常糟的實(shí)踐。更好的方法是使用特性檢測，在使用一個(gè)老瀏覽器可能不支持的高級的特性之前，首先檢測（瀏覽器的）是否有這個(gè)功能或特性，然后使用它。這單獨檢測瀏覽器版本來(lái)得更好，即使你知道它的性能。你可以在 http://www.jibbering.com/faq/faq_notes/not_browser_detect.html找到一個(gè)深入討論這個(gè)問(wèn)題的文章。 例子： if (document.getElementById) { var element = document.getElementById('MyId'); } else { alert('Your browser lacks the capabilities required to run this script!'); }3. 使用方括號記法當訪(fǎng)問(wèn)由執行時(shí)決定或者包括要不能用”.”號訪(fǎng)問(wèn)的對象屬性，使用方括號記法。如果你不是一個(gè)經(jīng)驗豐富的Javascript程序員，總是使用方括號是一個(gè)不錯的做法 對象的屬性由兩種固定的方法來(lái)訪(fǎng)問(wèn)：”.”記法和”[ ]“方括號記法： “.”號記法 MyObject.property“[ ]“方括號記法 MyObject["property"]使用”.”號，屬性名是硬代碼，不能在執行時(shí)改變。使用”[]“方括號，屬性名是一個(gè)通過(guò)計算屬性名而來(lái)的字符串。字符串要以是硬代碼，也可能是變量，甚至可以是一個(gè)調回一個(gè)字母串值的函數。如果一個(gè)屬性名在執行產(chǎn)生，方括號是必須，如果你有 “value1″, “value2″, 和 “value3″這樣的屬性，并且想利用變量i=2來(lái)訪(fǎng)問(wèn) 這個(gè)可以運行： MyObject["value"+i]這個(gè)不可以： MyObject.value+i并且在某些服務(wù)器端環(huán)境（PHP、Struts等）下，Form 表單被附加了 [ ] 號來(lái)表示 Form表單在服務(wù)器端必須被當作數組來(lái)對待。如此，用”.”號來(lái)引用一個(gè)包含 [ ] 號的字段將不會(huì )執行，因為 [ ] 是引用一個(gè) Javascript數組的語(yǔ)法。所以，[ ] 號記法是必須的： 這個(gè)可以運行： formref.elements["name[]"]這個(gè)不可以： formref.elements.name[]推薦使用”[ ]“方括號記法是說(shuō)當其需要時(shí)（明顯地）總是使用它。當不是嚴格需要使用它的時(shí)候，它是一個(gè)私人的偏好和習慣。一個(gè)好的經(jīng)驗原則是，使用”.”號記法訪(fǎng)問(wèn)標準的對象屬性，使用”[ ]“方括號記法訪(fǎng)問(wèn)由頁(yè)面定義的對象屬性。這樣，document["getElementById"]() 是一個(gè)完美可行的”[ ]“方括號記法用法，但 document.getElementById() 在語(yǔ)法上是首選，因為 getElementById 是一個(gè) DOM 規范中定義的一個(gè)標準文檔對象屬性?；旌鲜褂眠@兩個(gè)記法使哪個(gè)是標準對象屬性，哪個(gè)屬性名是由上下文所定義的，在代碼中顯得清晰明了： document.forms["myformname"].elements["myinput"].value這里，forms 是 document 的一個(gè)標準屬性，而表單名 myformname 則是由頁(yè)面所定義的。同時(shí)，elements 和 value 屬性都是由規范所定義的標準屬性。而 myinput 則是由頁(yè)面所定義的。這頁(yè)是句法讓人非常容易理解（代碼的內容），是一個(gè)推薦遵循的習慣用法，但不是嚴格原則。
4. 避免 ‘eval’在Javascript中，eval()功能是一個(gè)在執行期中執行任意代碼的方法。在幾乎所有的情況下，eval 都不應該被使用。如果它出現在你的頁(yè)面中，則表明你所做的有更好的方法。舉一個(gè)例子，eval 通常被不知道要使用方括號記法的程序員所使用。 原則上，”Eval is evil（Eval是魔鬼）”。別使用它，除非你是一個(gè)經(jīng)驗豐富的開(kāi)發(fā)者并且知道你的情況是個(gè)例外。 5. 正確地引用表單和表單元素所有的 HTML 表單都應該有一個(gè) name 屬性。對于 XHTML 文檔來(lái)說(shuō)，name 屬性是不被要求的，但 Form 標簽中應有相應有 id 屬性，并必須用 document.getElementById() 來(lái)引用。使用像 document.forms[0] 這樣的索引方法來(lái)引用表單，在幾乎所有情況下，是一個(gè)糟糕的做法。有些瀏覽器把文檔中使用 form 來(lái)命名的元素當作一個(gè)可用的 form 屬性。這樣并不可靠，不應該使用。 下面這個(gè)例子用使用方括號和正確的對象引用方法來(lái)展示如何防止錯誤地引用一個(gè)表單的input： 正確引用表單 Input： document.forms["formname"].elements["inputname"]糟糕的做法: document.formname.inputname如果你要引用一個(gè)函數里的兩個(gè)表單元素，較好的做法是先引用這個(gè)form對象，并將其儲存在變量中。這樣避免了重復查詢(xún)以解決表單的引用： var formElements = document.forms["mainForm"].elements; formElements["input1"].value="a"; formElements["input2"].value="b";當你使用 onChange 或者其他類(lèi)似的事件處理方法，一個(gè)好的做法是總是通過(guò)一個(gè)引來(lái)把 input 元素本身引用到函數中來(lái)。所有 input 元素都帶有一個(gè)對包含其在內的Form表單有一個(gè)引用： <input type="text" name="address">
function validate(input_obj) { // 引用包含這個(gè)元素的form var theform = input_obj.form; // 現在你可以不需要使用硬代碼來(lái)引用表單自身 if (theform.elements["city"].value=="") { alert("Error"); } }通過(guò)對表單元素的引用來(lái)訪(fǎng)問(wèn)表單的屬性，你可以寫(xiě)一個(gè)不包含硬代碼的函數來(lái)引用這個(gè)頁(yè)面中任何一個(gè)有特定名的表單。這是一個(gè)非常好的做法，因為函數變得可重用。 避免 ‘with’Javascript 中的 with 聲明在一個(gè)作用域的前端插入一個(gè)對象，所以任何屬性/變量的引用將會(huì )倚著(zhù)對象被首先解決。這通常被用作一個(gè)避免重復引用的快捷方法： 使用 with 的例子： with (document.forms["mainForm"].elements) { input1.value = "junk"; input2.value = "junk"; }但問(wèn)題在于程序員并沒(méi)有方法來(lái)驗證 input1 或 input2 實(shí)際上已經(jīng)被當作 Form元素數組的屬性來(lái)解決。它首先以為這些名來(lái)檢測屬性，如果找不到，它將會(huì )繼續（向下）檢測這個(gè)作用域。最后，它在全局對象中嘗試把input1 和input2 作為一個(gè)全局對象來(lái)對待，而這以一個(gè)錯誤作為結尾。 變通的方法是：創(chuàng )建一個(gè)引用來(lái)減少引用的對象，并使用它來(lái)解決這些引用。 使用一個(gè)引用： var elements = document.forms["mainForm"].elements; elements.input1.value = "junk"; elements.input2.value = "junk";7. 在錨點(diǎn)中使用 “onclick” 替代 “javascript: Pseudo-Protocol”如果你想在 <a> 標簽中觸發(fā)Javascript 代碼，選擇 onclick 而非JavaScript: pseudo-protocol；使用 onclick 來(lái)運行的 Javascript 代碼必須返回 ture或者false（or an expression than evalues to true or false [這句要怎么翻譯呢?我是這樣理解的：一個(gè)優(yōu)先性高于true 或 false 的表達式]）來(lái)返回標簽本身：如果返回 true，則錨點(diǎn)的 href將被當作一個(gè)一般的鏈接；如果返回 false，則 href 會(huì )被忽略。這就是為什么”return false;” 經(jīng)常被包含在 onclick所處理代碼的尾部。 正確句法： <a href="javascript_required.html">go</a>在這個(gè)實(shí)例中，”doSomething()” 函數(定義于頁(yè)面的某個(gè)角落)將在被點(diǎn)擊時(shí)調用。href將永遠不會(huì )被啟用了Javascript 的瀏覽器訪(fǎng)問(wèn)。在你可以提醒Javascript 是必須的、而用戶(hù)未啟用之的瀏覽器中，文檔javascript_required.html 才會(huì )被加載。通常，當你確保用戶(hù)將會(huì )開(kāi)啟 Javascript 支持，為盡量簡(jiǎn)化，鏈接將只包含href=”#”。 而這個(gè)做法是不被鼓勵的。通常有一個(gè)不錯的做法是：可以提供沒(méi)用啟用 javascript 一個(gè)返回本地的頁(yè)面。 有時(shí)，眾多想要分情況來(lái)訪(fǎng)問(wèn)一個(gè)鏈接。例如，當一個(gè)用戶(hù)要離開(kāi)你的一個(gè)表單頁(yè)面，而想先驗證來(lái)確保沒(méi)有東西被改變。在這個(gè)情況下，你的 onclick 將會(huì )訪(fǎng)問(wèn)一個(gè)返回詢(xún)問(wèn)鏈接是否應該被遵循的函數： 有條件的鏈接訪(fǎng)問(wèn): <a href="/">Home</a>
function validate() { return prompt("Are you sure you want to exit this page?"); }在這個(gè)實(shí)例中，validate() 函數必須只返回 ture 或 false。ture 的時(shí)候用戶(hù)將被允許問(wèn)題 home 頁(yè)面，或false 的時(shí)候鏈接不被訪(fǎng)問(wèn)。這個(gè)例子提示確認（其行為），以訪(fǎng)問(wèn) ture 或 false，這完全由用戶(hù)點(diǎn)擊”確實(shí)”或者”取消”決定。 下面是一些”不應該”的例子。如果你在自己的頁(yè)面中看到下面這樣的代碼，這是不正確的，需要被修改： 什么是不應該做的： <a href="javascript:doSomething()">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a>8. 使用一元 ‘+’ 號運算符使類(lèi)型轉向Number在Javascript中，”+”號運算符同時(shí)充當數學(xué)加號和連接符。這會(huì )在form表單的域值相加時(shí)出現問(wèn)題，例如，因為Javascript是一個(gè)弱類(lèi)型語(yǔ)言，form 域的值將會(huì )被當作數組來(lái)處理，而你把它們”+”一起的時(shí)候，”+”將被當成連接符，而非數學(xué)加號。 有問(wèn)題的例子: <form name="myform" action=""> <input type="text" name="val1" value="1"> <input type="text" name="val2" value="2"> </form>
