【經(jīng)驗總結(jié)】編寫JavaScript代碼時應(yīng)遵循的14條規(guī)律_javascript技巧

1、【經(jīng)驗總結(jié)】編寫javascript代碼時應(yīng) 遵循的14條規(guī)律本文講述了編寫javascript代碼時應(yīng)遵循的14條規(guī)律。分享給大家供大家參考, 具體如下：javascript中，變量不是全局范圍的就是函數(shù)范圍的，使用” var”關(guān)鍵詞將 是保持變量簡潔明了的關(guān)鍵。當聲明一個或者是全局或者是函數(shù)級(function-level)的變量，需總是詢置” var”關(guān)鍵詞，下面的例子將強調(diào)不 這樣做潛在的問題。不使用var造成的問題var i二0; / this is good - creates a global variablefunction test () for (i=0; i<10;

2、 i+) alert ("hello world!，z);test ();alert(i); / the global variable i is now 10!因為變量函數(shù)中變量i并沒有使用v肚使其成為函數(shù)級的變量，在這個例子中 它引用了全局變量?？偸鞘褂胿ar來聲明全局變量是一個很多的做法，但至關(guān) 重要的一點是使用var定義一個函數(shù)范圍的變量。下面這兩個方法在功能上是 相同的：止確的函數(shù)function test () var i二0;for (i=0;i<10; i+) alert ("hello world!，z); 止確的函數(shù) function test (

3、) for (var i二0; i<10; i+) alert ("hello world!");2. 特性檢測而非瀏覽器檢測一些代碼是寫來發(fā)現(xiàn)瀏覽器版木并基于用戶正使用的客戶端的對其執(zhí)行不同行 為。這個，總的來說，是一個非常糟的實踐。更好的方法是使用特性檢測，在使 用一個老瀏覽器可能不支持的高級的特性z前，首先檢測(瀏覽器的)是否有這 個功能或特性，然后使用它。這單獨檢測瀏覽器版本來得更好，即使你知道它的 性能。你可以在http:/www. jibbering. com/faq/faq_notes/not browser detect. html 找至一 個深入討論

4、這個問題的文章。-例了：if (document. getelementbyld) var eleme nl 二 document. geteleme nl by id ('my id'); else alcrt('your browser lacks the capabilitics required to run this script!');3. 使用方括號記法當訪問由執(zhí)行時決定或者包括要不能用”號訪問的對象屈性，使用方括號記 法。如果你不是一個經(jīng)驗豐富的javascript程序員，總是使用方括號是一個不 錯的做法對象的屬性由兩種固定的方法來訪問：” ”記

5、法和”“方括號記法：號記法:myobject property“方括號記法:myobject"property"使用”號，屬性名是碩代碼，不能在執(zhí)行時改變。使用”“方括號，屬性 名是一個通過計算屬性名而來的字符申。字符申要以是皺代碼，也可能是變量, 甚至可以是一個調(diào)回一個字母串值的函數(shù)。如果一個屈性名在執(zhí)行產(chǎn)生，方括 號是必須，如果你有“valuel", “value2",和“valued這樣的屬性，并 且想利用變量i二2來訪問 這個可以運行:myobject"value"+i這個不可以：myobject. value+i并月在某些服

6、務(wù)器端環(huán)境(php、struts等)下，form表單被附加了 號來 表示form表單在服務(wù)器端必須被當作數(shù)組來對待。如此，用” ”號來引用一 個包含號的字段將不會執(zhí)行，因為是引用一個javascript數(shù)組的語 法。所以，號記法是必須的：這個可以運行：formref. elements"name"這個不可以:formref elements. name推薦使用”“方括號記法是說當其需要時(明顯地)總是使用它。當不是嚴 格需要使用它的時候，它是一個私人的偏好和習慣。一個好的經(jīng)驗原則是，使 用”號記法訪問標準的對象屬性，使用” “方括號記法訪問由頁面定義的 對象屬性。這樣,do

7、cument"getelementbyld"()是一個完美可行的” “方 扌舌號記法用法，但document. getelementbyld()在語法上是首選，因為 getelementbyld是一個dom規(guī)范屮定義的一個標準文檔對象屬性?；旌鲜褂眠@ 兩個記法使哪個是標準對象屈性，哪個屈性名是由上下文所定義的，在代碼屮顯 得清晰明了：document formsmyformname" elementsmyinput" value這里,forms是document的一個標準屬性,而表單名myformname則是由頁而 所定義的。同時,elements和va

8、lue屬性都是由規(guī)范所定義的標準屬性。而 myinput則是由頁面所定義的。這頁是句法讓人非常容易理解(代碼的內(nèi)容)， 是-個推薦遵循的習慣用法，但不是嚴格原則。4. 避免匕veil'在javascript h1, eval ()功能是一個在執(zhí)彳亍期小執(zhí)彳亍任意代碼的方法。在幾乎 所有的情況下，eval都不應(yīng)該被使用。如果它岀現(xiàn)在你的頁面屮，則表明你所 做的有更好的方法。舉一個例了，eval通常被不知道要使用方扌舌號記法的程序 員所使用。原則上，” eval is evil (eval是魔鬼)"。別使用它，除非你是一個經(jīng)驗豐 富的開發(fā)者并且知道你的情況是個例外。5. 正確地引

9、用表單和表單元素所有的html表單都應(yīng)該有一個name屬性。對于xhtml文檔來說，name屬性 是不被耍求的，但form標簽中應(yīng)有相應(yīng)有id屬性，并必須用document. getelementbyld()來引用。使用像 document, forms0這樣的索引 方法來引用表單，在幾乎所有情況下，是一個糟糕的做法。有些瀏覽器把文檔屮 使用form來命名的元索當作一個可用的form屬性。這樣并不可靠，不應(yīng)該使 用。下面這個例子用使用方括號和正確的對象引用方法來展示如何防止錯誤地引用 個表單的input：止確引用表單input：doc urn ent. forms "formnani

10、e “. elem en ts ，/inputname/，糟糕的做法:document formname inputname 如果你要引用一個函數(shù)里的兩個表單元素，較好的做法是先引用這個form對彖, 并將其儲存在變量中。這樣避免了重復(fù)查詢以解決表單的引用：var formeleme nts = docume nt. f onnsinei in form" eleme nts; forme 1 ements “input 1" value=，a，z;formelcmcnts"input2" value二;當你使用onchange或者其他類似的事件處理方法

11、，一個好的做法是總是通過一 個引來把input元素本身引用到函數(shù)中來。所有input元素都帶有一個對包含 其在內(nèi)的form表單有一個引用：<input type二"text" name二"address" onchange二validate (this)">function validate(input obj) / 引用包含這個元素的 formvar theform = input_obj. form; /現(xiàn)在你口j以不需要使用硬代碼來引用表單 自身if (theform elements"city". val

12、ue二二"“)alert (，zerror，z);通過對表單元索的引用來訪問表單的屬性，你可以寫一個不包含硬代碼的函數(shù)來 引用這個頁面中任何一個有特定名的表單。這是一個非常好的做法，因為函數(shù)變 得可重用。避免'with'javascript中的with聲明在一個作用域的帀j端插入一個對象，所以任何屬性/ 變量的引用將會倚著對象被首先解決。這通常被用作一個避免重復(fù)引用的快捷方 法：使用with的例子：with (docum ent. forms niei in form" clcm cn ts) inputl .value = "juninput2.

13、 value = junk；但問題在于程序員并沒冇方法來驗證inputl或input2實際上已經(jīng)被當作 form元素數(shù)組的屬性來解決。它首先會以這些name值來檢測屬性，如果找不到, 它將會繼續(xù)（向下）檢測這個作用域。最后，它在全局對象屮嘗試把inputl和 input2作為一個全局對象來對待，而這以一個錯誤作為結(jié)尾。變通的方法是：創(chuàng)建一個引用來減少引用的對象，并使用它來解決這些引用。使用一個引用：var elements = document, formsz'mainform，. elements;elements. inputl.value 二 junk； elements. in

14、put2. value 二"junk"7. 在錨點中使用 "onclick” 替代 javascript: pseudo-protocol”如果你想在<a>標簽中觸發(fā)javascript代碼，選擇one lick而非 javascript: pseudo-protocol；使用 onclick 來運行的 javascript 代碼必須 返回 ture 或者 false （or an expression them evalues to true or false 這 句要怎么翻譯呢？我是這樣理解的：一個優(yōu)先性高于true或false的表達 式）來返凹標

15、簽本身：如果返回true,則錨點的href將被當作一個一般的鏈 接；如果返冋false,則href會被忽略。這就是為什么” return false; ”經(jīng) 常被包含在onclick所處理代碼的尾部。正確句法：復(fù)制代碼代碼如下：<a hrcf=hhttp:/wwwjb5 l.ncth onclick=hdosomcthing（）; return falsc;n>go</a>在這個實例屮，” dosomethingo "函數(shù)（定義于頁面的某個角落）將在被點擊吋 調(diào)用。href將永遠不會被啟用了 javascript的瀏覽器訪問。在你可以提醒 javascript

16、是必須的、而用戶未啟用之的瀏覽器中，文檔 javascript_rcquircd. html才會被加載。通常，當你確保用戶將會開啟 javascript支持，為盡量簡化，鏈接將只包含href二” #”。而這個做法是不 被鼓勵的。通常有一個不錯的做法是：可以提供沒用啟用javascript 個返冋 木地的頁面。有時，眾多想要分情況來訪問一個鏈接。例如，當一個用戶要離開你的一個表單 頁面，而想先驗證來確保沒有東西被改變。在這個情況卜，你的onclick將會 訪問一個返回詢問鏈接是否應(yīng)該被遵循的函數(shù)： 有條件的鏈接訪問:<a href二onclick二return validate。 ；&qu

17、ot;home/a>function val idate () rcturn prompt(，zarc you sure you want to exit this page?");在這個實例中，validate()函數(shù)必須只返回ture或false。ture的吋候用戶 將被允許問題home頁面，或false的時候鏈接不被訪問。這個例子提示確認 (其行為),以訪問ture或false,這完全由用戶點擊”確實”或者”取消” 決定。下面是一些”不應(yīng)該”的例子。如果你在自己的頁面中看到下面這樣的代碼，這 是不正確的，需要被修改：什么是不應(yīng)該做的：<a href=z'ja

18、vascript:dosomething()，z>link</a><a href 二 ht tp:/www. jb51 .net/# onclick 二 dosome thin g()，>link</a><a href二htlp:/www. jb51. nel/#on cl ick=z，javascrip t: dosometh ing () ; >1 in k</a><a href=，/http:/www jb51 .net/# onclick=，/javascript:dosomcthing(); ret urn fa

19、lse; z/>link</a>8. 使用一元'+'號運算符使類型轉(zhuǎn)向number在javascript中，” 號運算符同時充當數(shù)學(xué)加號和連接符。這會在form表 單的域值相加時出現(xiàn)問題，例如，因為javascript是一個弱類型語言，form域 的值將會被當作數(shù)組來處理，而你把它們” +” 一起的時候，” +”將被當成連接 符，而非數(shù)學(xué)加號。有問題的例了：<form neime二myform action二 url> input type二text" namc=，/vair/ value二 1> input type=text n

20、ame二val2 value二2> </form> function total() var theform = document. formsmyfornt; var total = theformelementsvall".value + theform. elementsvalue;alert (total) ; /這個將會彈出12，但你想要的是3! 解決這個問題，javascript需要一個提示來讓它把這些值當做數(shù)字來處理。你 可以使用” +”號來把數(shù)組轉(zhuǎn)換成數(shù)字。給變量或者表達式前置一個” +”號將會 強制其當作一個數(shù)字來處理，而這也將使得數(shù)學(xué)” +”得以

21、成功應(yīng)用。修改好的代碼：function total () var theform = document, forms /zmyforin，;var total 二(+theform. elementsval1. value) +(+theform. elements，zval2，z. value);alert (total); / this will alert 39. 避免 document, alldocument, al 1是由microsoft的te所引進的，并不是一個標準的 javascript dom特性。盡管大多數(shù)新的瀏覽器支持它以支持依賴于它的糟糕代 碼，( iflj)還冇很

22、多瀏覽器是不支持的。并沒有理由其他方法都不適用，而一個老的ie瀏覽器(<5.0)需要支持，而在 javascript 使用document, all作為一個折衷方法。你并不需要使用 document, all來檢測其是不是te瀏覽器，因為其他瀏覽器現(xiàn)在一般都支持。只把document, all當做最后的選擇：if (documentgetelementbyld) var obj = document. getelementbyld (，zmyld，z); else if (document .all) var obj 二 document, al 1(myld)；一些使用document

23、, all的原則：同嘗試其他方法當其作為最后的選擇當需要支持5.0版本以下的1e瀏覽器總是使用“if (document, all) 來查看是否支持.10. 不要在腳本代碼塊中使用html注釋在javascript的舊fl子(1995)里，諸如netscape 1. 0的一些瀏覽器并不支 持或認識script標簽。所以，當javascript第一次被發(fā)布，需耍有一個技 術(shù)來讓實些代碼不被當做文本顯示于舊版瀏覽器上。冇一個” hack"是在代碼 中使用html注釋來隱藏這些代碼。使html注釋并不好：<script language二"javascript"&

24、lt;!-/ code here /-></script>在今天，沒有任何一個常用的瀏覽器會忽略掉<script>標簽。因此，再沒必耍 隱藏jqvbscdpt源代碼。事實上，它還可以因為卜面的理由，被認為是無益的:在xhtml文檔屮，源代碼將向所冇瀏覽器隱藏并被渲染成無用的(內(nèi)容)；-在html注釋并不允許，這個會讓任何遞減操作將失效。11避免亂用全局命名空間一般很少需要全部變量和函數(shù)。全局使用將口j能導(dǎo)致javascript源文件文檔沖 突，和代碼中止。因此，一個好的做法是在一個全局命名空間內(nèi)采用函數(shù)性的封 裝。冇多個方法可以完成這個任務(wù)，冇此相對比較復(fù)雜。最簡

25、單的方法是創(chuàng)建 一個全局對彖，并把屬性和方法指派給這個對彖：創(chuàng)建一個命名空間：var mylib =;/ global object cointainermylib. value = 1;mylib increment = function() mylib. value+;mylib. show 二 function() alert (mylib. value);mylib. value=6;mylib. in creme nt();mylib. show() ; / alerts 7命名空間也可以使用closures （閉包？）來創(chuàng)建，并且private member variables （私有變量？）也叮以偽裝于javascript中。12.避免同步的'ajax'調(diào)用當使用” ajax”請求時，你耍么選擇異步模式，要么使用同步模式。當瀏覽器行 為可以繼續(xù)執(zhí)行，異步模式將請求放在后臺執(zhí)行，同步模式則會等待請求完成后 才繼續(xù)。應(yīng)該避免同步模式做出的請求。這些請求將會對用戶禁用瀏覽器，直至請求返冋。 一旦服務(wù)器忙，并需要一段時間來完成請求，用戶的瀏覽器（或者os）將不能 做任何其他的事，直至請求超時。如果你覺得口己的情況需要同步模式，最大的可能是你需要時間