寫任何編程代碼,不同的網頁設計開發者都會有不同的網頁設計見解。但參考一下總是好 台中網頁設計的網頁設計,下面是來自 Javascript Toolbox 發佈的網頁設計 14條最佳JS代碼編寫技巧 ,Sofish翻譯(1,2)。
1. 總是使用 var在JavaScript中,變量不是全局範圍的網頁設計就是函數範圍的網頁設計,使用」var」關鍵詞將是保持變量簡潔明瞭的網頁設計關鍵。當聲明一個或者是全局或者是函數級(function-level)的網頁設計變量,需總是前置」var」關鍵詞,下面的網頁設計例子將強調不這樣做潛在的網頁設計問題。
不使用 Var 造成的網頁設計問題 程序代碼var i=0; // This is good - creates a global variablefunction 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. 特性檢測而非瀏覽器檢測一些代碼是寫來發現瀏覽器版本並基於用戶正使用的網頁設計客戶端的網頁設計對其執行不同行為。這個,總的網頁設計來說,是一個非常糟的網頁設計實踐。更好 台中網頁設計的網頁設計方法是使用特性檢測,在使 用一個老瀏覽器可能不支持的網頁設計高級的網頁設計特性之前,首先檢測(瀏覽器的網頁設計)是否有這個功能或特性,然後使用它。這單獨檢測瀏覽器版本來得更好 台中網頁設計,即使你知道它的網頁設計性 能。你可以在 這裡 找到一個深入討論這個問題的網頁設計文章。例子: 程序代碼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表單有一個引用: 程序代碼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 元素數組的網頁設計屬性來解決。它首先以為這些名來檢測屬性,如果找不到,它將會繼續(向下)檢測這個作用域。最後,它在全局對像中嘗試把input1 和 input2 作為一個全局對像來對待,而這以一個錯誤作為結尾。變通的網頁設計方法是:創建一個引用來減少引用的網頁設計對象,並使用它來解決這些引用。使用一個引用: 程序代碼var elements = document.forms["mainForm"].elements;elements.input1.value = "junk";elements.input2.value = "junk";
7. 在錨點中使用"onclick"替代 "javascript: Pseudo-Protocol"如果你想在 標籤中觸發Javascript 代碼,選擇 onclick 而非 JavaScript: pseudo-protocol;使用 onclick 來運行的網頁設計 Javascript 代碼必須返回 ture 或者false(or an expression than evalues to true or false [這句要怎麼翻譯呢? SEO是這樣理解的網頁設計:一個優先性高於true 或 false 的網頁設計表達式])來返回標籤本身:如果返回 true,則錨點的網頁設計 href 將被當作一個一般的網頁設計鏈接;如果返回 false,則 href 會被忽略。這就是為什麼"return false;" 經常被包含在 onclick 所處理代碼的網頁設計尾部。正確句法: 程序代碼go在這個實例中,"doSomething()" 函數(定義於頁面的網頁設計某個角落)將在被點擊時調用。href 將永遠不會被啟用了Javascript 的網頁設計瀏覽器訪問。在你可以提醒Javascript 是必須的網頁設計、而用戶未啟用之的網頁設計瀏覽器中,文檔 javascript_required.html 才會被加載。通常,當你確保用戶將會開啟 Javascript 支持,為盡量簡化,鏈接將只包含 rel="nofollow" href="#"。 而這個做法是不被鼓勵的網頁設計。通常有一個不錯的網頁設計做法是:可以提供沒用啟用 javascript 一個返回本地的網頁設計頁面。有時,眾多想要分情況來訪問一個鏈接。例如,當一個用戶要離開你的網頁設計一個表單頁面,而想先驗證來確保沒有東西被改變。在這個情況下,你的網頁設計 onclick 將會訪問一個返回詢問鏈接是否應該被遵循的網頁設計函數:有條件的網頁設計鏈接訪問: 程序代碼Homefunction validate() { return prompt("Are you sure you want to exit this page?");}在這個實例中,validate() 函數必須只返回 ture 或 false。ture 的網頁設計時候用戶將被允許問題 home 頁面,或 false 的網頁設計時候鏈接不被訪問。這個例子提示確認(其行為),以訪問 ture 或 false,這完全由用戶點擊」確實」或者」取消」決定。下面是一些」不應該」的網頁設計例子。如果你在自己的網頁設計頁面中看到下面這樣的網頁設計代碼,這是不正確的網頁設計,需要被修改:
什麼是不應該做的網頁設計: 程序代碼linklinklinklink
8. 使用一元 『+』 號運算符使類型轉向Number在Javascript中,"+"號運算符同時充當數學加號和連接符。這會在form表單的網頁設計域值相加時出現問題,例如,因為Javascript是 一個弱類型語言,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.alldocument.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 的網頁設計一些瀏覽器並不支持或認識 標籤。所以,當 Javascript 第一次被發佈,需要有一個技術來讓實些代碼不被當做文本顯示於舊版瀏覽器上。有一個」hack」 是在代碼中使用 HTML 註釋來隱藏這些代碼。使 HTML 註釋並不好 台中網頁設計: 程序代碼<!-- // code here//-->在今天,沒有任何一個常用的網頁設計瀏覽器會忽略掉 標籤。因此,再沒必要隱藏 Javascript 源代碼。事實上,它還可以因為下面的網頁設計理由,被認為是無益的網頁設計:在 XHTML 文檔中,源代碼將向所有瀏覽器隱藏並被渲染成無用的網頁設計(內容); 在 HTML 註釋並不允許 ,這個會讓任何遞減操作將失效。
11. 避免亂用全局命名空間一般很少需要全部變量和函數。全局使用將可能導致 Javascript 源文件文檔衝突,和代碼中止。因此,一個好 台中網頁設計的網頁設計做法是在一個全局命名空間內採用函數性的網頁設計封裝。有多個方法可以完成這個任務,有此相對比較複雜。最簡單的網頁設計方法 是創建一個全局對象,並把屬性和方法指派給這個對象:創建一個命名空間: 程序代碼var MyLib = {}; // global Object cointainerMyLib.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. 使用正確的網頁設計 標籤不造成在 中的網頁設計使用LANGUAGE 屬性。一個合適的網頁設計方式是創建如下的網頁設計 Javascript 代碼塊: 程序代碼// code here