雙倍經(jīng)驗(yàn)助你升級(jí) JavaScript編程最佳法則
JavaScript是目前Web開(kāi)發(fā)中最為流行的語(yǔ)言之一,基本上Web開(kāi)發(fā)者每天都會(huì)處理它。本篇文章為您制定了一份詳細(xì)的Javascript***實(shí)踐,希望能夠幫助您成為更加出色的Web開(kāi)發(fā)者。(推薦閱讀:JavaScript初學(xué)者的10個(gè)迷你技巧)
1、使用正確的<script>標(biāo)簽
如果你需要在HTML文檔中使用一些JavaScript代碼,你應(yīng)當(dāng)通常會(huì)使用如下的<script>標(biāo)簽:
- <script type="text/javascript">
- //insert your code here
- </script>
但是在源代碼中,以下這種標(biāo)簽寫(xiě)法隨處可見(jiàn):
- <script type="text/javascript" language="javascript">
- //insert your code here
- </script>
在HTML中,language屬性已經(jīng)過(guò)時(shí),因?yàn)榫哂衪ype屬性后,language它是冗余的,不要再這樣寫(xiě)了。
事實(shí)上,客戶端默認(rèn)為將JavaScript代碼指定type=”text/javascript”屬性,除非需要type=”application/x-javascript” 這樣的類型,否則完全沒(méi)有必要寫(xiě)type屬性。
2、將代碼放置于外部文件
使用外部.js文檔比在HTML文檔里直接寫(xiě)JavaScript代碼要簡(jiǎn)潔一些,同時(shí)也使得JavaScript文件可以被緩存,保證網(wǎng)站資源的快速訪問(wèn)。將你的JavaScript代碼置于一個(gè).js文檔中,然后在HTML文檔中使用<script>標(biāo)簽來(lái)引入它:
- <script src="http://www.mangguo.org/myscript.js"></script>
3、避免使用HTML注釋包裹代碼
90年代一些非常古老的瀏覽器無(wú)法執(zhí)行JavaScript代碼。為了防止這些瀏覽器出現(xiàn)不必要的結(jié)果。在1994年至1997年間,在HTML中使用注釋包裹JavaScript代碼是良好的兼容方案,以保證不支持JavaScript的瀏覽器能夠忽略它。
這里是一個(gè)簡(jiǎn)單案例:
- <script language="JavaScript">
- <!--
- //insert your code here
- //-->
- </script>
然而在2010年,所有的瀏覽器(甚至是可愛(ài)的IE 6)都能解釋JavaScript代碼,因此絕對(duì)沒(méi)有使用注釋包裹JavaScript代碼的必要了。更糟的是,如果代碼被HTML注釋包裹,并且使用了 — 符號(hào),瀏覽器可能會(huì)誤以為HTML文檔已經(jīng)結(jié)束。
4、使用框架
除非你的JavaScript代碼很短或者很簡(jiǎn)單,你應(yīng)該通過(guò)框架來(lái)避免過(guò)多代碼上的重復(fù)勞動(dòng)。在我看來(lái),jQuery是***的,有一個(gè)很棒的社區(qū),所以值得嘗試。
其實(shí)YUI也很棒,系統(tǒng)、強(qiáng)大、完善、穩(wěn)妥、有Loader機(jī)制、更高效地提高Web應(yīng)用的性能。
5、使用var關(guān)鍵字聲明變量
你應(yīng)當(dāng)使用var語(yǔ)句來(lái)聲明變量,否則變量會(huì)存在于全局作用域內(nèi),并且使用var使得代碼可讀易懂。比如下面的案例:
- var name = "Jean";
- var size = data.length;
6、保持代碼的分離
幾年前,當(dāng)一個(gè)程序員想要為一個(gè)HTML元素添加事件時(shí)(比如說(shuō),你想要在用戶輸入時(shí)驗(yàn)證時(shí)間信息),他會(huì)使用特殊的屬性把JavaScript代碼放置于HTML中,比如onblur、onchange,onclick等等。比如:
- <input type="text" name="date" onchange="validateDate()" />
雖然照樣可行,但卻很不簡(jiǎn)潔。HTML 應(yīng)當(dāng)只包含文檔的結(jié)構(gòu)層面,就如同使用內(nèi)聯(lián)CSS是不好的做法一樣,內(nèi)聯(lián)JavaScript同樣不可取。
取而代之,下面的代碼如何?使用jQuery也很簡(jiǎn)單:
- $(document).ready(function(){
- $('input[name=date]').bind('change', validateDate);
- });
7、在文檔底部包含腳本文件
不久以前,在<head>和</head>標(biāo)簽之間插入腳本文件一度成為***實(shí)踐。但瀏覽器是順序解析文檔,并動(dòng)態(tài)加載外部文件的。這就意味著在頁(yè)面頭部插入腳本會(huì)在安排在頁(yè)面內(nèi)容之前加載。
為了在內(nèi)容就緒之后再加載腳本,JavaScript 文件應(yīng)該在文檔底部被包含。就像下面這樣:
- <script src="myscript.js?"></script>
- </body>
- </html>
8、使用JSLint
JSLint是一款用于JavaScript源代碼檢查的應(yīng)用程序。如果它發(fā)現(xiàn)JavaScript中存在某些問(wèn)題,就會(huì)返回相關(guān)的問(wèn)題描述信息和大概的解決方案。
JSLint能有效發(fā)現(xiàn)代碼中的缺陷,或者說(shuō)代碼風(fēng)格上值得改進(jìn)之處。
9、不要輕易使用document.write
陳舊的document.write方法已經(jīng)被不贊成使用了好些年,然而這仍然是一貫使用的方法。
- document.write("hello world");
應(yīng)當(dāng)使用DOM的innerHTML屬性在頁(yè)面中插入文本。
- document.getElementById('hello').innerHTML = 'hello world';
原文地址:http://www.catswhocode.com/blog/best-practices-for-modern-javascript-development
【編輯推薦】