Javascript-能力检测

我们知道，各个版本的浏览器有着许多不一致性。理想状态下，应该是所有的浏览器都提供一套标准的API接口。但是现实中，各个版本的浏览器存在的怪癖非常多，我们通常都是使用客户端检测来作为补救措施。但是我们应该知道，不到万不得已，不要使用客户端检测。只要能找到更通用的方法，就应该优先采用更通用的方法。总之。先设计最通用的方案，在使用特定于浏览器的技术增强该方案。

• 能力检测
  最常用的也是最广泛使用的客户端检测技术是能力检测（特性检测）。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。其基本默认如下：

if (object.property) {
    //使用obj.property
}

举例来说，IE5不支持document.getElementById这个DOM方法。尽管可以使用非标准的document.all属性实现相同的功能。但是早期的IE的确不支持document.getElementById。所以通过下面的特性检测来保证浏览器的兼容性。请看下面的例子：

if (document.getElementById) {
    return document.getElementById[id];
} else if (document.all) {
    return document.all[id];
} else {
    throw new Error("不存在搜索DOM接口");
}

我们看到方法是想返回指定Id的DOM元素。document.getElementById()是实现这一功能的标准方式，所以首先检测它。如果浏览器不支持这个方法，那么久退而求其次使用document.all属性来实现类似的功能。如果这两个特性都无法使用，那么说明这个方法无法使用了。

第二个重要的概念在于：必须检测实际要用到的特性。一个特性存在，并不意味着另一个特性也存在。请看下面的例子：

function getWindowWidth() {
    //假设是IE浏览器
    if (document.all) {
        //错误的用法
        return document.documentElement.clientWidth;
    }
    else {
        return window.innerWidth;
    }
}

这是一个错误使用能力检测的例子。在这个例子中，首先检测document.all这个特性。然后使用document.documentElement.clientWidth返回窗体的宽度。IE8之前的浏览器确实不支持window.innerWidth属性。但是document.all属性成立的浏览器并不是只有IE。Opera也支持这个属性，也支持window.innerWidth。我们使用到了document.documentElement.clientWidth，这个也是需要进行特性检测的。

更可靠的能力检测

能力检测对于想知道某个特性是否会按适当的方式行事非常有效。我们在上面介绍的利用类型转换来确定某个对象成员是否存在，但这样是还是不知道该成员是不是你想要的。下面我们来看一个例子：

//这只是检测了是否存在相应的方法或属性--这不是能力检测
function isSortable(obj) {
    return !!obj.sort;
}

这个函数通过检测对象是否有sort方法来确定对象是否支持排序。但是如果一个对象包含了sort属性，那么也会返回true。这会导致一些问题。所以更好的方法是检测sort是否是一个函数。例如：

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

这里的typeof操作符用于确定sort的确是一个函数。所以后期可以使用sort进行排序。

在可能的情况下，应该尽量使用typeof操作符进行能力检测。