能力检测

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

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

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

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

什么是能力检测呢?

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

然后进行对应的操作

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

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

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

这就是所谓的能力检测(特性检测)

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

比如下面的例子:

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

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

Javascript高级编程学习笔记(32)—— 客户端检测(1)能力检测的更多相关文章

  1. Javascript高级编程学习笔记(34)—— 客户端检测(3)用户代理检测

    用户代理检测 前面的文章介绍的是如何检测浏览器对某一功能的支持情况 但是在实践中我们有些时候免不了需要知道用户到底是用的什么浏览器对我们的站点进行访问 这也是统计用户行为的一部分 用户代理检测这种方式 ...

  2. Javascript高级编程学习笔记(33)—— 客户端检测(2)怪癖检测

    怪癖检测 和能力检测类似,但其目标不同 能力检测的目的是判断浏览器支不支持某种能力 而怪癖检测的目的是判断浏览器是否存在某些缺陷 这种时候需要我们执行一段代码来判断浏览器是否有这样的缺陷 或者说是怪癖 ...

  3. Javascript高级编程学习笔记(31)—— BOM(5)screen、history对象

    screen对象 screen对象应该是BOM对象中最不常用的对象了 其主要用于提供客户端的显示能力信息 包括浏览器外部显示的信息,和像素的宽高等 这个对象的主要用于检测客户端能力,一般不会影响功能 ...

  4. Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  5. Javascript高级编程学习笔记(36)—— DOM(2)Document

    Documet类型 了解了基础的Node类型过后,我们来聊聊Node中的Document类型 我们知道所有的节点都继承自Node类型 所以除了Node类型公有的方法和类型之外,Document类型还有 ...

  6. Javascript高级编程学习笔记(98)—— WebGL(4) WebGL上下文(2)

    错误 Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误 如果希望获取WebGL的错误信息,那么就需要手动调用  gl.getError() 方法 该方法会返回以 ...

  7. Javascript高级编程学习笔记(97)—— WebGL(3) WebGL上下文(1)

    WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...

  8. Javascript高级编程学习笔记(96)—— WebGL(2) 类型化视图

    类型化视图 类型化视图一般也被认为是一种类型化数组. 因为其元素必须是某种特定的数据类型,类型化视图都继承自 Dataview Int8Array: 表示8位二补整数(即二进制补数) Uint8Arr ...

  9. Javascript高级编程学习笔记(75)—— 表单(3)表单字段

    表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集 ...

随机推荐

  1. c# maiform父窗体改变动态的gridew 奇偶行变色的快捷方法

    无需在每个usercontrol里边单个指定控件内gridview  隔行换色.只需要在主窗体内改成统一就好了 做到这点要明白.gridcontrol 是usercontrol 的子控件 , grid ...

  2. 微信小程序云端解决方案探索之路 - GITC 主题演讲

    转自:https://github.com/tencentyun/blog/issues/1 在刚结束的全球互联网技术大会(GITC)里面,我在前端专场给大家分享了「微信小程序云端解决方案探索之路」, ...

  3. [精华][推荐]CAS SSO实现单点登录框架学习源码

    1.通过下载稳定版本的方式下载cas的相关源码包,如下: 直接选择4.2.1的稳定代码即可 2.我们项目中的版本版本使用maven apereo远程库去下载 通过远程maven库下载cas-serve ...

  4. .NET framework访问Oracle的几种方法

    首先介绍下开发环境:WIn10 64bit+Visual Studio 2015+Oracle10ClientWin32(只是客户端,如果安装整个数据库也是可以的) 目前了解C#中连接Oracle数据 ...

  5. 【机器学习】主成分分析法 PCA (I)

    主成分分析算法是最常见的降维算法,在PCA中,我们要做的是找到一个方向向量,然后我们把所有的数都投影到该向量上,使得投影的误差尽可能的小.投影误差就是特征向量到投影向量之间所需要移动的距离. PCA的 ...

  6. WindowsPE权威指南 第二章 小工具 PEInfo代码的C语言实现

    主程序代码 PEInfo.c #include <Windows.h> #include<Richedit.h> #include "resource.h" ...

  7. 第48章:MongoDB-备份和恢复

    ①文件系统快照(snapshot) 生成文件系统快照这个方法需要满足两个条件: 1:文件系统本身支持快照技术 2:运行mongod时必须开启日记系统 其恢复就是快照的恢复,当然,恢复的时候,确保mon ...

  8. Day09 (黑客成长日记) 爬虫入门

    爬虫的基本流程: 发起请求通过HTTP库向目标站点发起请求,也就是发送一个Request,请求可以包含额外的header等信息,等待服务器响应 获取响应内容如果服务器能正常响应,会得到一个Respon ...

  9. 初学者必看的文章:在VM12中安装 RedHat RHEL7.2  系统的详细步骤:看我如何操纵RHEL系统

    一.开始安装 1)新建虚拟机 RHEL7.2 2)成功引导系统--开机出现此画面 Install Red Hat EnterpriseLinux 7.2  安装RHLE7.2 操作系统 Test th ...

  10. 排序算法(sorting algorithm) 之 选择排序(selection sort)

    https://en.wikipedia.org/wiki/Selection_sort loop1: 4,6,1,3,7 -> 4,6,1,3,7 4,6,1,3,7 -> ,3,7 1 ...