《JS高程（3）》客戶端檢測-第9章筆記(10)

使用能力檢測
用戶代理監測的歷史
選擇檢測方式

因各個瀏覽器之間不一致性，不得不採用各種客戶端檢測方法

能力檢測

檢測目的：識別瀏覽器的能力。

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

注

先檢測達成目的的最常用的性能,保證代碼的優化；
必須測試實際用到的特性。

更靠譜的能力檢測

通過typeof確定是否爲函數，進行能力檢測。

// 檢查sort是不是函數
function isSortable(object){
    return typeof object.sort == "function";
}

typeof 操作符用於確定sort的卻是函數，因此可以調用他對數據進行排序。
在可能的情況下，儘量使用typeof進行能力檢測。特別是宿主對象沒有義務讓typeof返回合理值。

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

檢測一個或幾個特性並不能確定瀏覽器；
根據瀏覽器的不同將能力組合起來，一次性檢測所有相關的特性，而不是分次檢測。

//確定瀏覽器是否支持Netspace風格的插件
var hasNSPlugins = !!(navigator.plugins && navigator.pligins.length);
//確定瀏覽器是否具有DOM1級別規定的能力
var hasDOM1 = !!(document.getElementById && document.createElement && document.getElementByTagName);

在得到布爾值後繼續使用，從而節省重新檢測能力的時間。

怪癖檢測

目標：識別瀏覽器的特殊行爲，知道瀏覽器存在什麼缺陷.
“怪癖”即爲bug。

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

通過一個匿名函數來測試該’怪癖’，函數中創建了衣蛾帶有toString()方法的對象。在正確的ECMAScript實現中，toString應該在for-in循環中作爲屬性返回。
‘怪癖’的檢測應在腳本開始時，儘早解決問題。

IE8及更早版本中存在一個bug，即如果某個實例屬性與[[Enumerable]]標記爲false的某個原型屬性同名，那麼該實例屬性將不會出現在for—in循環當中；

Safari 3以前版本會枚舉被隱藏的屬性；

cloneNode（）方法不會複製添加到DOM節點中的javascript屬性，例如事件處理程序等，IE在此存在一個bug，即它會複製事件處理程序;

IE8及更早版本與其他瀏覽器處理空白字符的方式不一樣，IE9之前的版本不會爲空白符創建節點；

IE8及較低版本不區分ID的大小寫，如果頁面中多個元素的的ID值相同，getElementById()只返回文檔中第一次出現的元素；

IE7及以下版本有一個有意思的怪癖：name特性與給定ID匹配的表單元素（<input>,<textarea>,<button>及<select>）也會被該方法返回

IE7以前，通過getAttribute()方法訪問style特性（返回一個對象）或者onclick這樣的事件處理特性時（返回一個函數），返回的值與屬性的值相同，同時setAttribute()存在一些異常行爲。通過這個方法設置的class和style特性，沒有任何效果，設置事件處理程序特性是也一樣。

用戶代理檢測

爭議最大的客戶端檢測技術。

通過檢測用戶代理字符串確定實際使用的瀏覽器。

編寫腳本的五大呈現引擎：IE , Gecko , Webkit , KHTML , Opera.

IE:	IE
Firefox:	Gecko
Safari :	Webkit (Webkit原來是KHTML呈現引擎原來的一個分支，後來獨立出來開源，專注呈現引擎開發)
Chrome:	Webkit
linux:	KHTML konqueror
Opera:	Opera（Presto）

var client = function(){
    var engine = {
        // 呈現引擎
        ie:0,
        gecko:0,
        webkit:0,
        khtml:0,
        opera:0,
        //具體的版本號
        ver:null
    };
    //在此檢驗呈現引擎、平臺和設備
    return {
        engine:engine
    };
}();

聲明一個名爲client的全局變量，保存相關信息。匿名函數內部定義了一個局部變量engine，包含默認設置的對象字面量，每個呈現引擎都對應一個屬性，屬性值默認爲0，如果檢測到了某個引擎的版本號，就以浮點數的形式將該引擎的版本號寫入相應的屬性。而呈現引擎的完整版本（是一個字符串），則被寫入ver屬性。

if(client.engine.ie){
//如果是IE,client.ie的值應該大於0
//針對IE代碼
}else if (client.engine.gecko > 1.5){
    if (client.engine.ver == "1.8.1"){
        //針對這個版本執行某些操作
    }
}

要正確的確認識別引擎，關鍵是檢查順序要正確。
第一步：識別Opera;

必須檢測 window.opera對象

if (window.opera){
    engine.ver = window.opera.verson();
    engine.opera = parseFloat(engine.ver);
}

第二步：識別webkit;

WebKit的用戶代理字符串中的“AppleWebkit”是獨一無二的。

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}

第三步：識別khtml;

KHTML中也包含Gecko，在排除KHTML之前無法準確檢測Gecko的瀏覽器。

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}

第四步：識別gecko ;

在排除webkit和khtml後就能確認gecko了

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}

第五步：識別IE;

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}else if (/MSIE ([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.ie = parseFloat(engine.ver);
}

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = browser.ver = window.opera.version();
    engine.opera = browser.opera = parseFloat(engine.ver);
}else if (/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);

    //確定是Chrome還是Safari
    if (/Chrome\/(\S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.chrome = parseInt(browser.ver);
    }else if(/Version\/(\S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.safari = parseInt(browser.ver);
    }else{

        //近似的確定版本號
        var safariVersion = 1;
        if (engine.webkit < 100){
            safariVersion = 1;
        }else if (engine.webkit < 312){
            safariVersion = 1.2;
        }else if (engine.webkit < 412){
            safariVersion = 1.3;
        }else {
            safariVersion = 2;
        }
        browser.safari = browser.ver = safariVersion;
    }

}else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.khtml = browser.konq = parseFloat(engine.ver);
}else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);

    //確定不是firefox
    if(/Firefox\/(\S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.firefox = parseFloat(browser.ver);
    }
}else if (/MSIE ([^;]+)/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.ie = browser.ie = parseFloat(engine.ver);
}

useragentstring.com列出了各種瀏覽器的版本以及用戶代理字符串。

《JS高程（3）》客戶端檢測-第9章筆記(10)

能力檢測

更靠譜的能力檢測

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

怪癖檢測

用戶代理檢測

《JS高程（3）》DOM節點層次Node類型-第10章筆記(11)

《JS高程（3）》BOM-04(screen)-第8章筆記(09)

《JS高程（3）》DOM節點層次Text類型-第10章筆記(14)

《JS高程（3）》DOM節點層次CDATASection類型-第10章筆記(15)

CSS3動畫圖片旋轉與3d硬件加速

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結