《編寫可維護的 JavaScript》讀書筆記第12章:瀏覽器嗅探

1. User-Agent 檢測

網景瀏覽器的 user-agent 字符串以下:windows

Mozilla/2.0 (Win95; I)瀏覽器

Internet Explorer 瀏覽器的 user-agent 字符串以下:安全

Mozilla/2.0 (cmopatible; MSIE 3.0; windows 95)服務器

這使得新生瀏覽器部分複製現有瀏覽器用戶代理字符串成了一種趨勢。dom

服務器能夠獲取到瀏覽器的 user-agent 字符串,客戶端經過 JavaScript 的 navigator.userAgent 也能夠獲取。函數

// 很差的作法
if (navigator.userAgent.indexOf("MSIE") > -1) {
    // 是 IE
} else {
    // 不是 IE
}

解析 user-agent 字符串並不是易事,因爲瀏覽器爲了確保其兼容性,都會複製另外一個瀏覽器的用戶代理字符串,所以隨着每個新瀏覽器的出現,用於用戶代理檢測的代碼都須要更新。整個方法長期而言並不具有很好的可維護性。工具

選擇使用用戶代理檢測,最安全的方法是只檢測舊的瀏覽器測試

if (isInternetExplorer8OrEarlier) {
    // 處理 IE8 及更早版本
} else {
    // 處理其餘瀏覽器
}

幾乎全部的瀏覽器的 user-agent 均可以被工具修改,所以要儘量避免檢測 user-agent。spa

2. 特性檢測 代理

特性檢測的原理是爲特定瀏覽器的特性進行測試,並僅當特性存在時便可應用特性檢測。

// 很差的寫法
if (navigator.userAgent.indexOf("MSIE 7") > -1) {
    // 作些什麼
}

// 好的寫法
if (document.getElementById) {
    // 作些什麼
}
// 好的寫法
function getById(id) {
    var element = null;
    
    if (document.getElementById) { // DOM
        element = document.getElementById(id);
    } else if (document.all) { // IE
        element = document.all[id];
    } else if (document.layers) { // Netscape <= 4
        element = document.layers[id];
    }
    
    return element;
}

這麼使用特性檢測是正確和恰當的,由於代碼對特性作檢測,當特性存在時才使用。

正確檢測的順序:

  • 探測標準的方法

  • 探測不一樣瀏覽器的特定方法

  • 均不存在時提供一個合乎邏輯的備用方法

3. 避免特性推斷

特性推斷嘗試使用多個特性但僅驗證了其中之一。根據一個特性的存在推斷另外一個特性是否存在。問題是,推斷是假設並不是事實,並且可能會致使維護性的問題。

// 很差的寫法 - 特性推斷
function getById(id) {
    
    var element = null;
    
    if (document.getElementByTagName) { // DOM
        element = document.getElementById(id);
    } else if (window.ActiveXObject) { // IE
        element = document.all[id];
    } else { // Netscape <= 4
        element = document.layers[id];
    }
    
    return element;
}

該函數是最糟糕的特性推斷。

4. 避免瀏覽器推斷

// 很差的寫法
if (document.all) { // IE
    id = document.uniqueID;
} else {
    id = Math.random();
}

所作的全部探測僅僅說明 document.all 是否存在,而並不能用於判斷瀏覽器是不是 IE。document.all 的存在並不意味着 document.uniqueID 也是可用的。所以這是一個錯誤的隱式推斷,可能會致使代碼不能正常運行。

經過特性檢測而推斷出是某個瀏覽器一樣是很糟糕的作法,這叫作瀏覽器推斷,是一種錯誤的實踐。

5. 應當如何取捨

特性推斷和瀏覽器推斷都是糟糕的作法,應當不惜一切代價避免使用。純粹的特性檢測是一種很好的作法。不要試圖推斷特性間的關係,不然最終獲得的結果也是不可靠的。

若是想要使用用戶代理嗅探,記住這一點:這麼作惟一安全的方式是針對舊的或特定版本的瀏覽器。而毫不應當針對最新版本或者將來的瀏覽器。

相關文章
相關標籤/搜索