javascript 特性檢測并非瀏覽器檢測

2024-05-06 14:11:52

字體：大中小

來源：轉載

供稿：網友

我大致翻譯了部分文章，可能有理解錯誤的地方，敬請指正。值得一提的是，評論部分的爭論亦值得一看。

特性檢測
起初前端工程師們就極力反對瀏覽器檢測，他們認為類似user-agent嗅探的方法是很不好的，理由是它并不是一種面向未來的代碼，無法適應新版的瀏覽器。更好的做法是使用特性檢測，就像這樣：
代碼如下:
if (navigator.userAgent.indexOf("MSIE 7") > -1){
//do something
}

而更好的做法是這樣：
代碼如下:
if(document.all){
//do something
}

這兩種方式并不相同。前者是檢測瀏覽器的特殊名稱和版本；后者卻是檢測瀏覽器的特性。UA嗅探能夠精確得到瀏覽器的類型和版本（至少能得知瀏覽器類型），而特性檢測卻是去確定瀏覽器是否擁有某個對象或者支持某個方法。注意這兩者是完全不同的。
因為特性檢測依賴于哪些瀏覽器支持，當出現新版本瀏覽器的時候需要繁瑣的確認工作。例如DOM標準剛出現的時候，并不是所有瀏覽器都支持getElementById()方法，所以一開始代碼可能是這樣：
代碼如下:
if(document.getElementById){ //DOM
element = document.getElementById(id);
} else if (document.all) { //IE
element = document.all[id];
} else if (document.layers){ //Netscape < 6
element = document.layers[id];
}

這是特性檢測很好的一個例子，亮點在于當其它瀏覽器開始支持getElementById()方法時不必修改代碼。
混合方式
后來前端工程師們考慮改進的寫法，代碼變化成這樣：
代碼如下:
//AVOID!!!
if (document.all) { //IE
id = document.uniqueID;
} else {
id = Math.random();
}

這個代碼的問題是通過檢測document.all屬性來確定是否是IE。當確定是IE后，假定使用私有的document.uniqueID屬性也是安全的。然而，目前所作的只是確定是否支持document.all，并非是去辨識瀏覽器是否為IE。僅僅支持document.all的話也不意味著document.uniqueID是可用的。
后來人們開始這樣寫，用下面那行代替上面的：
var isIE = navigator.userAgent.indexOf("MSIE") > -1;
//下面這行代替上面那行
var isIE = !!document.all;這些變化說明大家對“不要使用UA嗅探”存在誤解——不再對瀏覽器的詳細信息進行檢測，取而代之的是通過特性的支持來推斷。這種基于瀏覽器特性檢測的方式非常不好。
后來前端們發現document.all并不可靠，更好的檢測IE變為：
var isIE = !!document.all && document.uniqueID;這種實現方式陷入歧途。不僅需要費時費事地去識別瀏覽器所增加的特性支持，另外也不能確定其它瀏覽器開始支持相同的特性。
如果你認為這樣的代碼并未被廣泛使用，那么看看來自于老版本的Mootools代碼片段吧：
代碼如下:

上一篇：Javascript 讀書筆記索引貼

下一篇：JavaScript關于select的相關操作說明