最佳實踐
平穩(wěn)退化
在javascript被禁用的時候,依然可以瀏覽網(wǎng)站。
漸進(jìn)增強(qiáng)
將樣式和js分離出來睬愤,外部的文件link到html里。
分離JavaScript
之前的JavaScript代碼和html文檔已經(jīng)分離的很開了统锤。負(fù)責(zé)完成實際任務(wù)的js函數(shù)都已經(jīng)存入外部的文件了毛俏,問題出現(xiàn)在內(nèi)嵌的事件處理函數(shù)中。
類似于style屬性饲窿,在文檔里使用onclick屬性也是一種既沒有效率又容易引發(fā)問題的做法拧抖。**如果我們使用一個“掛鉤”,就像CSS里class或id屬性那樣免绿,把JavaScript代碼調(diào)用行為和HTML文檔分離開,網(wǎng)頁會簡單的多擦盾。
<a class="popup">Example</a>
如果上述語句來表明當(dāng)這個鏈接被點擊嘲驾,調(diào)用popup()函數(shù):
window.onload = prepareLinks;
function prepareLinks(){
var links = doucument.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
if (links[i].getAttribute("class") == "popup"){
links[i].onclick = function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
}
把popUp也保存到外部的js里:
function popUp(URL){
window.open(URL,"popup","width=320,height=480");
}
性能考慮
- 盡量少訪問DOM和盡量減少標(biāo)記。
- 合并腳本迹卢,使用外部文件辽故。
- 壓縮腳本
壓縮腳本:刪除不必要的字節(jié),空格注釋腐碱,可以使用工具誊垢。應(yīng)該有兩個版本,一個是工作副本症见,可以修改代碼添加注釋喂走;另一個是精簡副本,放在站點上谋作。**通常區(qū)分精簡副本在名稱上加min字樣:
<script src="script/scriptName.min.js"></script>