首頁 > web前端 > js教程 > JS中怎樣避免特性與瀏覽器推斷

JS中怎樣避免特性與瀏覽器推斷

php中世界最好的语言
發布: 2018-06-04 10:54:33
原創
1597 人瀏覽過

這次帶給大家JS中怎樣避免特性與瀏覽器推斷,JS避免特性與瀏覽器推斷的注意事項有哪些,下面就是實戰案例,一起來看一下。

一種不當的使用特性檢測的情況是「特性推斷」(Feature Inference)。特性推斷嘗試使用多個特性但僅驗證了其中之一。根據一個特性的存在推論另一個特性是否存在。問題是,推論是假設並非事實,而且可能會導致維護性的問題。例如,如下是一些使用特性推斷的舊程式碼:

// 不好的写法 - 使用特性推断function getById (id) {  var el = null;  if (
document
.
getElementsByTagName
) { // DOM
    el = document.getElementById(id);
  } else if (window.ActiveX
Object
) { // IE
    el = document.all[id];
  } else { // Netscape <= 4
    el = document.layers[id];
  }  return el;
}
登入後複製

該函數是最糟糕的特性推斷,其中做出瞭如下幾個推斷:

如果document.getElementsByTagName()存在,則document.getElementById也存在。實際上,這個假設是從一個DOM方法的存在推斷出所有方法都存在。

如果window.ActiveXObject存在,則document.all也存在。這個推論基本上斷定window.ActiveXObject只存在於IE,且document.all也只存在於IE,所以如果你判斷一個存在,其他的也必定存在。實際上,Opera的一些版本也支援document.all。

如果這些推論都不成立,則一定是Netscape Navigator 4或更早的版本。這看似正確,但及其不嚴格。

你不能從一個特性的存在推論出另一個特性是否存在。最好的情況下兩者有薄弱的聯繫,最壞的情況下兩者根本沒有直接關係。也就好比說是,「如果它看起來像鴨子,就必定像鴨子一樣嘎嘎地叫。」

2.8.4 避免瀏覽器推斷

在某些時候,用戶代理檢測和特性檢測讓許多Web開發人員很困惑。於是寫出來的程式碼就變成這樣了:

// 不好的写法if (document.all) {
  id = document.uniqueID;
} else {
  id = Math.random();
}
登入後複製

這段程式碼的問題是,透過偵測document.all,間接地判斷瀏覽器是否為IE。一旦確定了瀏覽器是IE,便假設可以安全性地使用IE所特有的document.uniqueID。然而,你所做的所有探測都只是說明document.all是否存在,並不能用來判斷瀏覽器是否為IE。正因為document.all的存在並不意味著document.uniqueID也是可用的,因此這是一個錯誤的隱式推斷,可能會導致程式碼無法正常運作。

為了更清楚地表述該問題,程式碼被修改成這樣:

var isIE = navigator.userAgent.indexOf("MSIE") > -1;
登入後複製

修改為如下這樣:

// 不好的写法var isIE = !!document.all;
登入後複製

這種轉變體現了一種對「不要使用用戶代理檢測”的誤解。雖然不是直接檢測特定的瀏覽器,但是透過特性檢測從而推斷出是某個瀏覽器同樣是很糟糕的做法。這叫做瀏覽器推斷,是一種錯誤的實踐。

到了某個階段,開發者意識到document.all其實並不是判斷瀏覽器是否為IE的最佳方法。先前的程式碼加上了更多的特性檢測,如下所示:

var isIE = !!document.all && document.uniqueID;
登入後複製

這種方法屬於「自作聰明」型的。嘗試透過越來越多的已知特性推斷某些事情太困難了。更糟的是,你沒辦法阻止其他瀏覽器實現相同的功能,最終導致這段程式碼回傳不可靠的結果。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

JS中Polyfill註解與阻止修改的使用

JS門面模式使用案例詳解

以上是JS中怎樣避免特性與瀏覽器推斷的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板