這次帶給大家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中怎樣避免特性與瀏覽器推斷的詳細內容。更多資訊請關注PHP中文網其他相關文章!