浅谈JavaScript中的能力检测

　引言

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

　　1、能力检测

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

//特性检测
if (object.propertyInQuestion) {
    //使用object.propertyInQuestion
}

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

function getElement(id) {
     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，这个也是需要进行特性检测的。

　　2、更可靠的能力检测

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

//不要这样做,这只是检测了是否存在相应的方法--这不是能力检测
function isSortable(object) {
     return !!object.sort;
}

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

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

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

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