JavaScript 客戶端檢測——“能力檢測”的注意要點

Pluser 發布于2019-08-19 17:09 / 1114人閱讀

摘要：能力檢測性能檢測基本模式語法目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。更可靠的能力檢測能力檢測對于想知道某個特性是否會按照適當方式行事非常有用。所以在可能的情況下，要盡量使用進行能力檢測。

客戶端檢測

不到萬不得已，就不要使用客戶端檢測。只要能夠找到更通用的方法，就應該優先采用更通用的方法。先設計最通用的方案，然后再使用特定于瀏覽器的技術增強該方案。

能力檢測（性能檢測） 基本模式語法

目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。基本模式如下：

if (object.propertyInQuestion){
    //使用object.propertyInQuestion
}

舉個例子，比如 IE5.0 之前的版本不支持 document.getElementById() 這個 DOM 方法。但可以使用 document.all[] 方法。于是可以寫下如下代碼：

function getElement(id){
    if (document.getElementById){
        return document.getElementById(id);
    }else if (document.getAll){
        return document.getAll[id];
    }else{
        throw new Erroor("No way to retrieve element !");
    }
}

能力檢測使用的要點

先檢測達成目的的最常用的特性，可以保證代碼最優化，并避免檢測多個條件；

必須測試實際要是用到的特性；

對于第二點：

function getWindowWidth(){
    if (document.all){ //假設是 IE 瀏覽器
        return document.documentElement.clientWidth; //錯誤！不一定是 IE 瀏覽器
    } else {
        return window.innerWidth;
    }
}

如Opera 支持document.all，也支持window.innerWidth；所以上述代碼用法上有問題。

更可靠的能力檢測

能力檢測對于想知道某個特性是否會按照適當方式行事非常有用。如檢測對象是否支持排序：

function isSortable(obj){
    return typeof obj.sort == "function";
}

var obj1 = [321,43215,1];
var obj2 = {
    name: "Oliver",
    age: 18
};

console.log(isSortable(obj1)); //true
console.log(isSortable(obj2)); /false

這里需要注意的是，能力檢測不是只檢測相應的方法是否存在！！！

function isSortable(obj){
    return !!obj.sort;
}

var obj1 = [321,43215,1];
var obj2 = {
    name: "Oliver",
    age: 18,
    sort: true
};

console.log(isSortable(obj1)); //true
console.log(isSortable(obj2)); //true

這里就可以看出問題了，能力檢測不是檢測相應的方法是否存在，obj2 中定義了 sort 屬性，仍然可以通過所謂的能力檢測檢測為 true。

所以在可能的情況下，要盡量使用 typeof 進行能力檢測。

而在 IE 中，情況又不同了：

function hasCreateElement(){
    return typeof document.createElement == "function";
}

在 IE8 之前，這個函數返回 false，因為 typeof document.createElement 返回的是"object"，而不是“function”。因為 IE 及更早版本中的宿主對象是通過 COM 而非 JScript 實現的。但 IE9 中糾正了這個問題，對所有 DOM 方法都返回“function”。

能力檢測，不是瀏覽器檢測

在實際開發中，應該將能力檢測作為確定下一步解決方案的依據，而不是用他來判斷用戶使用的是什么瀏覽器。如：

var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
var hasDOM1 = !!(document.getElementById && document.getElementsByTagName && document.createElement);

上述代碼一個是用來確定瀏覽器是否支持 Netscapte 風格的插件；另一個是用來確定瀏覽器是否具備 DOM1 級所規定的能力。

怪癖檢測

目標是識別瀏覽器的特殊行為。怪癖檢測是想要知道瀏覽器存在什么缺陷。如，IE8 及更早版本中存在一個 bug，即如果某個實例屬性與[[Enumerable]]標記為 false 的某個原型屬性同名，那么該實例就不會出現在 for-in 循環當中。可以使用以下代碼來檢測這種“怪癖”：

var hasDontEnumQuirk = function(){
    var o = { toString : function(){} };
    for (var prop in o){
        if (prop == "toString"){
            return false;
        }
    }
    return true;
}();

另外，在 Safari 3 以前的版本中會枚舉被隱藏的屬性。可以用下面的函數來檢測：

var hasEnumShadowsQuirk = function(){
    var o = { toString : function(){} }
    var count = 0;
    for (var prop in o){
        if (prop == "toString"){
            count++;
        }
    }
    return (count > 1);
}();

如果瀏覽器存在這個 bug，那么使用 for-in 循環枚舉帶有自定義的 toString() 方法的對象，就會返回兩個 toString 的實例。

GPU云服務器云服務器云主機的要點深度學習的要點檢測客戶端類型 javascript代碼檢測

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78240.html

《JavaScript高級程序設計》筆記：客戶端檢測（九）

摘要：由于怪癖檢測無法精確地檢測特定的瀏覽器和版本。用戶代理檢測需要特殊的技巧，特別是要注意會隱瞞其用戶代理字符串的情況。而在客戶端，用戶代理檢測一般被當作一種萬不得已的做法，其優先級排在能力檢測和怪癖檢測之后。能力檢測在編寫代碼之前先檢測特定瀏覽器的能力。例如,腳本在調用某個函數之前，可能要先檢測該函數首付存在。這種檢測方法將開發人員從考慮具體的瀏覽器類型和版本中解放出來，讓他們把注意...

aaron 2019-08-21 10:22 評論0 收藏0
JavaScript DOM2和DOM3——“DOM的變化”的注意要點

摘要：和級分為許多模塊，分別描述了的某個非常具體的子集。這些模塊主要有核心視圖事件樣式遍歷和范圍以及。另外還有方法和方法框架的變化框架和內嵌框架分別用和表示，它們在級中都有一個新屬性這個屬性包含一個指針，指向表示框架內容的文檔對象。 DOM2和DOM3級分為許多模塊，分別描述了DOM的某個非常具體的子集。這些模塊主要有核心（Core）、視圖（Views）、事件（Events）、樣式（Styl...

騫諱護 2019-08-19 17:14 評論0 收藏0
前端兼容性探討

摘要：個人認為兼容性的問題也是對這三個方面進行處理。能力檢測需要注意兩點先檢測達成目的的最常用的特性，可以保證代碼最優化，并避免檢測多個條件必須測試實際要是用到的特性這些就是小可對兼容性的理解，有不對的希望各位朋友指正探討，嘻嘻這里和朋友們簡單探討一下個人對于前端兼容性的一些理解：在項目中，前端主要處理html，css,javaScript代碼，當然還有可能接觸到razor等渲染引擎方面...

MobService 2019-08-01 17:19 評論0 收藏0
前端兼容性探討

摘要：個人認為兼容性的問題也是對這三個方面進行處理。能力檢測需要注意兩點先檢測達成目的的最常用的特性，可以保證代碼最優化，并避免檢測多個條件必須測試實際要是用到的特性這些就是小可對兼容性的理解，有不對的希望各位朋友指正探討，嘻嘻這里和朋友們簡單探討一下個人對于前端兼容性的一些理解：在項目中，前端主要處理html，css,javaScript代碼，當然還有可能接觸到razor等渲染引擎方面...

Andrman 2019-08-20 18:27 評論0 收藏0
前端兼容性探討

摘要：個人認為兼容性的問題也是對這三個方面進行處理。能力檢測需要注意兩點先檢測達成目的的最常用的特性，可以保證代碼最優化，并避免檢測多個條件必須測試實際要是用到的特性這些就是小可對兼容性的理解，有不對的希望各位朋友指正探討，嘻嘻這里和朋友們簡單探討一下個人對于前端兼容性的一些理解：在項目中，前端主要處理html，css,javaScript代碼，當然還有可能接觸到razor等渲染引擎方面...

developerworks 2019-08-29 13:03 評論0 收藏0