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

這次帶給大家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中文網其他相關文章！