成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript 客戶端檢測(cè)——“能力檢測(cè)”的注意要點(diǎn)

Pluser / 1116人閱讀

摘要：能力檢測(cè)性能檢測(cè)基本模式語(yǔ)法目標(biāo)不是識(shí)別特定的瀏覽器，而是識(shí)別瀏覽器的能力。更可靠的能力檢測(cè)能力檢測(cè)對(duì)于想知道某個(gè)特性是否會(huì)按照適當(dāng)方式行事非常有用。所以在可能的情況下，要盡量使用進(jìn)行能力檢測(cè)。

客戶端檢測(cè)

不到萬(wàn)不得已，就不要使用客戶端檢測(cè)。只要能夠找到更通用的方法，就應(yīng)該優(yōu)先采用更通用的方法。先設(shè)計(jì)最通用的方案，然后再使用特定于瀏覽器的技術(shù)增強(qiáng)該方案。

能力檢測(cè)（性能檢測(cè)） 基本模式語(yǔ)法

目標(biāo)不是識(shí)別特定的瀏覽器，而是識(shí)別瀏覽器的能力。基本模式如下：

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

舉個(gè)例子，比如 IE5.0 之前的版本不支持 document.getElementById() 這個(gè) 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 !");
    }
}
能力檢測(cè)使用的要點(diǎn)

先檢測(cè)達(dá)成目的的最常用的特性，可以保證代碼最優(yōu)化，并避免檢測(cè)多個(gè)條件；

必須測(cè)試實(shí)際要是用到的特性；

對(duì)于第二點(diǎn)：

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

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

更可靠的能力檢測(cè)

能力檢測(cè)對(duì)于想知道某個(gè)特性是否會(huì)按照適當(dāng)方式行事非常有用。如檢測(cè)對(duì)象是否支持排序：

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

這里需要注意的是，能力檢測(cè)不是只檢測(cè)相應(yīng)的方法是否存在?。?！

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

這里就可以看出問(wèn)題了，能力檢測(cè)不是檢測(cè)相應(yīng)的方法是否存在，obj2 中定義了 sort 屬性，仍然可以通過(guò)所謂的能力檢測(cè)檢測(cè)為 true。

所以在可能的情況下，要盡量使用 typeof 進(jìn)行能力檢測(cè)。

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

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

在 IE8 之前，這個(gè)函數(shù)返回 false，因?yàn)?typeof document.createElement 返回的是"object"，而不是“function”。因?yàn)?IE 及更早版本中的宿主對(duì)象是通過(guò) COM 而非 JScript 實(shí)現(xiàn)的。但 IE9 中糾正了這個(gè)問(wèn)題，對(duì)所有 DOM 方法都返回“function”。

能力檢測(cè)，不是瀏覽器檢測(cè)

在實(shí)際開(kāi)發(fā)中，應(yīng)該將能力檢測(cè)作為確定下一步解決方案的依據(jù)，而不是用他來(lái)判斷用戶使用的是什么瀏覽器。如：

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

上述代碼一個(gè)是用來(lái)確定瀏覽器是否支持 Netscapte 風(fēng)格的插件；另一個(gè)是用來(lái)確定瀏覽器是否具備 DOM1 級(jí)所規(guī)定的能力。

怪癖檢測(cè)

目標(biāo)是識(shí)別瀏覽器的特殊行為。怪癖檢測(cè)是想要知道瀏覽器存在什么缺陷。如，IE8 及更早版本中存在一個(gè) bug，即如果某個(gè)實(shí)例屬性與[[Enumerable]]標(biāo)記為 false 的某個(gè)原型屬性同名，那么該實(shí)例就不會(huì)出現(xiàn)在 for-in 循環(huán)當(dāng)中?？梢允褂靡韵麓a來(lái)檢測(cè)這種“怪癖”：

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

另外，在 Safari 3 以前的版本中會(huì)枚舉被隱藏的屬性?？梢杂孟旅娴暮瘮?shù)來(lái)檢測(cè)：

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78240.html

相關(guān)文章

  • 《JavaScript高級(jí)程序設(shè)計(jì)》筆記：客戶端檢測(cè)（九）

    摘要：由于怪癖檢測(cè)無(wú)法精確地檢測(cè)特定的瀏覽器和版本。用戶代理檢測(cè)需要特殊的技巧，特別是要注意會(huì)隱瞞其用戶代理字符串的情況。而在客戶端，用戶代理檢測(cè)一般被當(dāng)作一種萬(wàn)不得已的做法，其優(yōu)先級(jí)排在能力檢測(cè)和怪癖檢測(cè)之后。 能力檢測(cè) 在編寫代碼之前先檢測(cè)特定瀏覽器的能力。例如,腳本在調(diào)用某個(gè)函數(shù)之前，可能要先檢測(cè)該函數(shù)首付存在。這種檢測(cè)方法將開(kāi)發(fā)人員從考慮具體的瀏覽器類型和版本中解放出來(lái)，讓他們把注意...

    aaron 評(píng)論0 收藏0

  • JavaScript DOM2和DOM3——“DOM的變化”的注意要點(diǎn)

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

    騫諱護(hù) 評(píng)論0 收藏0

  • 前端兼容性探討

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

    MobService 評(píng)論0 收藏0

  • 前端兼容性探討

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

    Andrman 評(píng)論0 收藏0

  • 前端兼容性探討

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

    developerworks 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<