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....

最后:能力检测不是浏览器检测!能力检测不是浏览器检测!!能力检测不是浏览器检测!!!

上一篇:c 语言笔记 数组1


下一篇:FPGA工程中用C语言对文件进行处理_生成mif文件