Javascript高级编程学习笔记（32）—— 客户端检测（1）能力检测

能力检测

浏览器厂商虽然在实现公共接口方面投入了大量的精力

但是每种浏览器仍旧存在许多差异

为了让网页能跨浏览器的运行，对浏览器差异做的兼容处理自然无法避免

其中最常用的也就是我们现在所说的能力检测

什么是能力检测呢？

说白了，能力检测就是判断浏览器是否具备某个特定功能

然后进行对应的操作

这和浏览器检测有什么区别呢？？

在很多情况下，我们纠结的不是用户使用的是什么浏览器

而是用户使用的浏览器是否有我们将要使用的功能，我们没有必要去管用户用的是什么浏览器，只需要知道用户浏览器有没有这项功能，有，怎么操作；没有，又如何替代

这就是所谓的能力检测（特性检测）

这种客户端检测模式的目标不是识别特定浏览器，而是根据浏览器的能力进行相应的操作

比如下面的例子：

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

这个例子取自书中，由于书的版本较老，所以这里给出的是IE5以下对 getElementById 方法的兼容的处理

在进行类似上述的能力检测时

我们要注意一下几点：

1、先检测最通用的功能（保证代码的最优性能避免繁琐的多次判断）

2、不能根据能力来判断浏览器，因为有这一个功能的不一定只有一个浏览器，反之亦然

更可靠的能力检测

上方的例子存在一个问题，如果一个不支持document.all的浏览器，有开发人员给其设置了该属性，那么就会出现问题

所以更可靠的能力检测，就是不光要判断这个对象是否存在这个属性，我们还要判断这个属性值的类型

即在判断时不要直接 if 判断，而是使用typeof

typeof 除了避免开发人员导致的问题之外

还有一个作用，那就是针对IE中的 ActiveX 对象

这个对象如果不使用 typeof 检测其属性，那么将会报错

除此而外，浏览器也没有义务让 typeof 返回你认为正确的值，因为这和浏览器的内部实现有关

下面给出一个检测属性的函数，这个函数可能存在问题，但是至少在我的测试中没有发现，如果有错请大家留言告知

需要的小伙伴拿走就行

function isHostMethod(object, property){
    var t = typeof object[property];
    return t === "function" || (!!(t === 'object' && object[property])) || t === 'unknown';
}
// 参数 1、要检测的对象
// 2、要检测的属性名称
// 返回值 Boolean

PS. 就算这个方法现在没有问题，也不代表今后没有问题

因为有向下兼容，可是你见过向上兼容的嘛？毕竟浏览器厂商没有义务保证，一直维持实现方式不变

所以希望大家心里有个底，emm....

最后：能力检测不是浏览器检测！能力检测不是浏览器检测！！能力检测不是浏览器检测！！！