作者：Grey

原文地址： http://www.cnblogs.com/greyzeng/p/5540469.html

舉個例子：用戶在點擊某個鏈接的時候彈出一個新窗口

彈出窗口的方法采用：window.open(url, name, features)

方法1. 采用"javascript:"偽協議

代碼清單：

jsbestpractise1.html

js/jsbestpractise1.js

這種方式在支持"javascript:"偽協議的瀏覽器中運行正常，但是禁用了JavaScript功能的瀏覽器會什么也不做。

所以，這種調用方式并不好。

方法2. 通過onclick方法來觸發彈出鏈接：

代碼清單：

jsbestpractise2.html

js/jsbestpractise2.js

這種方式對于禁用了JavaScript功能的瀏覽器同樣什么也不做。

所以，這種調用方式也不好。

優化1：

我們可以在鏈接的href屬性中設置為真實存在的URL地址，讓它成為一個有效的鏈接，

這樣，即便瀏覽器禁用了JavaScript，也可以通過鏈接直接到目標地址，好過什么都不做。

代碼清單：

jsbestpractise3.html

js/jsbestpractise3.js

我們還可以把鏈接簡化一些：

優化2：

分離JavaScript，類似style屬性，onclick方法也是一種既沒有效率又容易引發問題的做法，

如果我們用類似css機制中的class屬性來分離JavaScript代碼和HTML頁面，網頁就會健壯的多。

代碼清單：

jsbestpractise5.html

js/jsbestpractise5.js

這種方式的步驟如下：

1. 獲取所有鏈接：document.getElementsByTagName("a");
2. 遍歷鏈接，如果某個鏈接的class=popup，就表示這個鏈接在被點擊的時候應該調用popUp函數。

但是我們缺少了一步判斷：document.getElementsByTagName("a").length>0

所以js/jsbestpractise5.js代碼修改為：

優化3：

優化js代碼的性能，document.getElementsByTagName("a")方法在js中執行了兩次，浪費了一次搜索。

更好的辦法是把第一次搜索的結果保存在一個變量中:

var links = document.getElementsByTagName("a");

然后在循環中重用該變量。

代碼清單：

js/jsbestpractise6.js

優化4：

檢測瀏覽器是否支持某些JavaScript方法，如果不支持，則不執行相應的JS方法，比如：

這個例子中用到了getElementsByTagName這個方法，我們可以在執行這個方法之前，檢測一下

瀏覽器是否支持這樣的方法：

代碼清單：

js/jsbestpractise7.js

自此，我們就完成了對這個例子的一些代碼優化，當然，還有更進一步的優化，

比如：壓縮腳本，本文暫不作說明。

最后代碼清單：

jsbestpractise8.html

js/jsbestpractise8.js

參考:

JavaScript DOM編程藝術（第2版）