本文講述了編寫JavaScript代碼時應遵循的14條規律。分享給大家供大家參考，具體如下：
1. 總是使用 ‘var'
在javascript中，變量不是全局范圍的就是函數范圍的，使用”var”關鍵詞將是保持變量簡潔明了的關鍵。當聲明一個或者是全局或者是函數級（function-level）的變量，需總是前置”var”關鍵詞，下面的例子將強調不這樣做潛在的問題。
不使用 Var 造成的問題
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 並沒有使用 var 使其成為函數級的變量，在這個例子中它引用了全局變量。總是使用 var 來聲明全局變量是一個很多的做法，但至關重要的一點是使用 var 定義一個函數范圍的變量。下面這兩個方法在功能上是相同的：
正確的函數
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. 特性檢測而非浏覽器檢測
一些代碼是寫來發現浏覽器版本並基於用戶正使用的客戶端的對其執行不同行為。這個，總的來說，是一個非常糟的實踐。更好的方法是使用特性檢測，在使 用一個老浏覽器可能不支持的高級的特性之前，首先檢測（浏覽器的）是否有這個功能或特性，然後使用它。這單獨檢測浏覽器版本來得更好，即使你知道它的性 能。你可以在 http://www.jibbering.com/faq/faq_notes/not_browser_detect.html找到一個深入討論這個問題的文章。
例子：
if (document.getElementById) {
var element = document.getElementById('MyId');
} else {
alert('Your browser lacks the capabilities required to run this script!');
}
3. 使用方括號記法
當訪問由執行時決定或者包括要不能用”.”號訪問的對象屬性，使用方括號記法。如果你不是一個經驗豐富的Javascript程序員，總是使用方括號是一個不錯的做法
對象的屬性由兩種固定的方法來訪問：”.”記法和”[ ]“方括號記法：
“.”號記法：
MyObject.property
“[ ]“方括號記法：
MyObject["property"]
使用”.”號，屬性名是硬代碼，不能在執行時改變。使用”[ ]“方括號，屬性名是一個通過計算屬性名而來的字符串。字符串要以是硬代碼，也可能是變量，甚至可以是一個調回一個字母串值的函數。 如果一個屬性名在執行產生，方括號是必須，如果你有 “value1″, “value2″, 和 “value3″這樣的屬性，並且想利用變量 i=2來訪問
這個可以運行：
MyObject["value"+i]
這個不可以：
MyObject.value+i
並且在某些服務器端環境（PHP、Struts等）下，Form 表單被附加了 [ ] 號來表示 Form 表單在服務器端必須被當作數組來對待。如此，用”.”號來引用一個包含 [ ] 號的字段將不會執行，因為 [ ] 是引用一個 Javascript 數組的語法。所以，[ ] 號記法是必須的：
這個可以運行：
formref.elements["name[]"]
這個不可以：
formref.elements.name[]
推薦使用”[ ]“方括號記法是說當其需要時（明顯地）總是使用它。當不是嚴格需要使用它的時候，它是一個私人的偏好和習慣。一個好的經驗原則是，使用”.”號記法訪問標准的對象屬性，使用”[ ]“方括號記法訪問由頁面定義的對象屬性。這樣，document["getElementById"]() 是一個完美可行的”[ ]“方括號記法用法，但 document.getElementById() 在語法上是首選，因為 getElementById 是一個 DOM 規范中定義的一個標准文檔對象屬性。混合使用這兩個記法使哪個是標准對象屬性，哪個屬性名是由上下文所定義的，在代碼中顯得清晰明了：
document.forms["myformname"].elements["myinput"].value
這裡，forms 是 document 的一個標准屬性，而表單名 myformname 則是由頁面所定義的。同時，elements 和 value 屬性都是由規范所定義的標准屬性。而 myinput 則是由頁面所定義的。這頁是句法讓人非常容易理解（代碼的內容），是一個推薦遵循的習慣用法，但不是嚴格原則。
4. 避免 ‘eval'
在Javascript中，eval()功能是一個在執行期中執行任意代碼的方法。在幾乎所有的情況下，eval 都不應該被使用。如果它出現在你的頁面中，則表明你所做的有更好的方法。舉一個例子，eval 通常被不知道要使用方括號記法的程序員所使用。
原則上，”Eval is evil（Eval是魔鬼）”。別使用它，除非你是一個經驗豐富的開發者並且知道你的情況是個例外。
5. 正確地引用表單和表單元素
所有的 html 表單都應該有一個 name 屬性。對於 XHTML 文檔來說，name 屬性是不被要求的，但 Form 標簽中應有相應有 id 屬性，並必須用 document.getElementById() 來引用。使用像 document.forms[0] 這樣的索引方法來引用表單，在幾乎所有情況下，是一個糟糕的做法。有些浏覽器把文檔中使用 form 來命名的元素當作一個可用的 form 屬性。這樣並不可靠，不應該使用。
下面這個例子用使用方括號和正確的對象引用方法來展示如何防止錯誤地引用一個表單的input：
正確引用表單 Input：
document.forms["formname"].elements["inputname"]
糟糕的做法:
document.formname.inputname
如果你要引用一個函數裡的兩個表單元素，較好的做法是先引用這個form對象，並將其儲存在變量中。這樣避免了重復查詢以解決表單的引用：
var formElements = document.forms["mainForm"].elements; formElements["input1"].value="a"; formElements["input2"].value="b";
當你使用 onChange 或者其他類似的事件處理方法，一個好的做法是總是通過一個引來把 input 元素本身引用到函數中來。所有 input 元素都帶有一個對包含其在內的Form表單有一個引用：
<input type="text" name="address" onChange="validate(this)">
function validate(input_obj) { // 引用包含這個元素的form
var theform = input_obj.form; // 現在你可以不需要使用硬代碼來引用表單自身
if (theform.elements["city"].value=="") {
alert("Error");
}
}
通過對表單元素的引用來訪問表單的屬性，你可以寫一個不包含硬代碼的函數來引用這個頁面中任何一個有特定名的表單。這是一個非常好的做法，因為函數變得可重用。
避免 ‘with'
Javascript 中的 with 聲明在一個作用域的前端插入一個對象，所以任何屬性/變量的引用將會倚著對象被首先解決。這通常被用作一個避免重復引用的快捷方法：
使用 with 的例子：
with (document.forms["mainForm"].elements) {
input1.value = "junk";
input2.value = "junk";
}
但問題在於程序員並沒有方法來驗證 input1 或 input2 實際上已經被當作 Form 元素數組的屬性來解決。它首先會以這些name值來檢測屬性，如果找不到，它將會繼續（向下）檢測這個作用域。最後，它在全局對象中嘗試把input1 和 input2 作為一個全局對象來對待，而這以一個錯誤作為結尾。
變通的方法是：創建一個引用來減少引用的對象，並使用它來解決這些引用。
使用一個引用：
var elements = document.forms["mainForm"].elements; elements.input1.value = "junk"; elements.input2.value = "junk";
7. 在錨點中使用 “onclick” 替代 “javascript: Pseudo-Protocol”
如果你想在 <a> 標簽中觸發Javascript 代碼，選擇 onclick 而非 JavaScript: pseudo-protocol；使用 onclick 來運行的 Javascript 代碼必須返回 ture 或者false（or an expression than evalues to true or false [這句要怎麼翻譯呢? 我是這樣理解的：一個優先性高於true 或 false 的表達式]）來返回標簽本身：如果返回 true，則錨點的 href 將被當作一個一般的鏈接；如果返回 false，則 href 會被忽略。這就是為什麼”return false;” 經常被包含在 onclick 所處理代碼的尾部。
正確句法：
復制代碼 代碼如下:<a href="http://www.jb51.net" onclick="doSomething(); return false;">go</a>
在這個實例中，”doSomething()” 函數(定義於頁面的某個角落)將在被點擊時調用。href 將永遠不會被啟用了Javascript 的浏覽器訪問。在你可以提醒Javascript 是必須的、而用戶未啟用之的浏覽器中，文檔 javascript_required.html 才會被加載。通常，當你確保用戶將會開啟 Javascript 支持，為盡量簡化，鏈接將只包含 href=”#”。 而這個做法是不被鼓勵的。通常有一個不錯的做法是：可以提供沒用啟用 javascript 一個返回本地的頁面。
有時，眾多想要分情況來訪問一個鏈接。例如，當一個用戶要離開你的一個表單頁面，而想先驗證來確保沒有東西被改變。在這個情況下，你的 onclick 將會訪問一個返回詢問鏈接是否應該被遵循的函數：
有條件的鏈接訪問:
<a href="/" onClick="return validate();">Home</a>
function validate() {
return prompt("Are you sure you want to exit this page?");
}
在這個實例中，validate() 函數必須只返回 ture 或 false。ture 的時候用戶將被允許問題 home 頁面，或 false 的時候鏈接不被訪問。這個例子提示確認（其行為），以訪問 ture 或 false，這完全由用戶點擊”確實”或者”取消”決定。
下面是一些”不應該”的例子。如果你在自己的頁面中看到下面這樣的代碼，這是不正確的，需要被修改：
什麼是不應該做的：
<a href="javascript:doSomething()">link</a> <a href="http://www.jb51.net/#" onClick="doSomething()">link</a> <a href="http://www.jb51.net/#" onClick="javascript:doSomething();">link</a> <a href="http://www.jb51.net/#" onClick="javascript:doSomething(); return false;">link</a>
8. 使用一元 ‘+' 號運算符使類型轉向Number
在Javascript中，”+”號運算符同時充當數學加號和連接符。這會在form表單的域值相加時出現問題，例如，因為Javascript是 一個弱類型語言，form 域的值將會被當作數組來處理，而你把它們”+”一起的時候，”+”將被當成連接符，而非數學加號。
有問題的例子:
<form name="myform" action="[url]"> <input type="text" name="val1" value="1"> <input type="text" name="val2" value="2"> </form>
function total() {
var theform = document.forms["myform"];
var total = theform.elements["val1"].value + theform.elements["val2"].value;
alert(total); // 這個將會彈出 "12", 但你想要的是 3!
}
解決這個問題，Javascript 需要一個提示來讓它把這些值當做數字來處理。你可以使用”+”號來把數組轉換成數字。給變量或者表達式前置一個”+”號將會強制其當作一個數字來處理，而這也將使得數學”+”得以成功應用。
修改好的代碼：
function total() {
var theform = document.forms["myform"];
var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
alert(total); // This will alert 3
}
9. 避免 document.all
document.all 是由Microsoft 的 IE 所引進的，並不是一個標准的 Javascript DOM 特性。盡管大多數新的浏覽器支持它以支持依賴於它的糟糕代碼，（而）還有很多浏覽器是不支持的。
並沒有理由其他方法都不適用，而一個老的IE浏覽器（<5.0）需要支持，而在Javascript中使用 document.all 作為一個折衷方法。 你並不需要使用 document.all 來檢測其是不是IE浏覽器，因為其他浏覽器現在一般都支持。
只把 document.all 當做最後的選擇：
if (document.getElementById) {
var obj = document.getElementById("myId");
} else if (document.all) {
var obj = document.all("myId");
}
一些使用 document.all 的原則：
同嘗試其他方法
當其作為最後的選擇
當需要支持 5.0 版本以下的 IE 浏覽器
總是使用 “if (document.all) { }” 來查看是否支持.
10. 不要在腳本代碼塊中使用HTML注釋
在 Javascript 的舊日子（1995）裡，諸如 Netscape 1.0 的一些浏覽器並不支持或認識 <script> 標簽。所以，當 Javascript 第一次被發布，需要有一個技術來讓實些代碼不被當做文本顯示於舊版浏覽器上。有一個”hack” 是在代碼中使用 HTML 注釋來隱藏這些代碼。
使 HTML 注釋並不好：
<script language="javascript"> <!-- // code here //--> </script>
在今天，沒有任何一個常用的浏覽器會忽略掉 <script> 標簽。因此，再沒必要隱藏 Javascript 源代碼。事實上，它還可以因為下面的理由，被認為是無益的：
在 XHTML 文檔中，源代碼將向所有浏覽器隱藏並被渲染成無用的（內容）；
– 在 HTML 注釋並不允許 ，這個會讓任何遞減操作將失效。
11. 避免亂用全局命名空間
一般很少需要全部變量和函數。全局使用將可能導致 Javascript 源文件文檔沖突，和代碼中止。因此，一個好的做法是在一個全局命名空間內采用函數性的封裝。有多個方法可以完成這個任務，有此相對比較復雜。最簡單的方法 是創建一個全局對象，並把屬性和方法指派給這個對象：
創建一個命名空間：
var MyLib = {}; // global Object cointainer
MyLib.value = 1;
MyLib.increment = function() {
MyLib.value++;
}
MyLib.show = function() {
alert(MyLib.value);
}
MyLib.value=6;
MyLib.increment();
MyLib.show(); // alerts 7
命名空間也可以使用 Closures（閉包?） 來創建，並且 Private Member Variables （私有變量?） 也可以偽裝於 Javascript中。
12. 避免同步的 ‘ajax' 調用
當使用”Ajax”請求時，你要麼選擇異步模式，要麼使用同步模式。當浏覽器行為可以繼續執行，異步模式將請求放在後台執行，同步模式則會等待請求完成後才繼續。
應該避免同步模式做出的請求。這些請求將會對用戶禁用浏覽器，直至請求返回。一旦服務器忙，並需要一段時間來完成請求，用戶的浏覽器（或者 OS）將不能做任何其他的事，直至請求超時。
如果你覺得自己的情況需要同步模式，最大的可能是你需要時間來重新想一下你的設計。很少（如果有的話）實際上需要同步模式的 Ajax 請求。
13. 使用 JSON
當需要將數據結構存儲成純文本，或者通過 Ajax 發送/取回數據結構，盡可能使用 JSON 代替 XML。JSON (JavaScript Object Notation) 是一個更簡潔有效的數據存儲格式，並且不依賴任何語言（and is a language-neutral）。
14. 使用正確的 <script> 標簽
不贊成在 <script> 中的使用LANGUAGE 屬性。一個合適的方式是創建如下的 Javascript 代碼塊：
<script type="text/javascript"> // code here </script>
PS：上述代碼沒有經過格式化處理，通常格式化處理後的代碼會比較容易閱讀理解，小編這裡就為大家推薦幾款在線格式化與壓縮工具，方便大家在今後的開發中使用：
在線JavaScript代碼美化、格式化工具：
http://tools.jb51.net/code/js
JavaScript代碼美化/壓縮/格式化/加密工具：
http://tools.jb51.net/code/jscompress
jsmin在線js壓縮工具：
http://tools.jb51.net/code/jsmincompress
json代碼在線格式化/美化/壓縮/編輯/轉換工具：
http://tools.jb51.net/code/jsoncodeformat
更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。