首页 > web前端 > js教程 > 正文

JS中怎样避免特性与浏览器推断

php中世界最好的语言
发布: 2018-06-04 10:54:33
原创
1584 人浏览过

这次给大家带来JS中怎样避免特性与浏览器推断,JS避免特性与浏览器推断的注意事项有哪些,下面就是实战案例,一起来看一下。

一种不当的使用特性检测的情况是“特性推断”(Feature Inference)。特性推断尝试使用多个特性但仅验证了其中之一。根据一个特性的存在推断另一个特性是否存在。问题是,推断是假设并非事实,而且可能会导致维护性的问题。例如,如下是一些使用特性推断的旧代码:

// 不好的写法 - 使用特性推断function getById (id) {  var el = null;  if (
document
.
getElementsByTagName
) { // DOM
    el = document.getElementById(id);
  } else if (window.ActiveX
Object
) { // IE
    el = document.all[id];
  } else { // Netscape <= 4
    el = document.layers[id];
  }  return el;
}
登录后复制

该函数是最糟糕的特性推断,其中做出了如下几个推断:

如果document.getElementsByTagName()存在,则document.getElementById也存在。实际上,这个假设是从一个DOM方法的存在推断出所有方法都存在。

如果window.ActiveXObject存在,则document.all也存在。这个推断基本上断定window.ActiveXObject仅仅存在于IE,且document.all也仅存在于IE,所以如果你判断一个存在,其他的也必定存在。实际上,Opera的一些版本也支持document.all。

如果这些推断都不成立,则一定是Netscape Navigator 4或者更早的版本。这看似正确,但及其不严格。

你不能从一个特性的存在推断出另一个特性是否存在。最好的情况下两者有薄弱的联系,最坏的情况下两者根本没有直接关系。也就好比说是,“如果它看起来像一个鸭子,就必定像鸭子一样嘎嘎地叫。”

2.8.4 避免浏览器推断

在某些时候,用户代理检测和特性检测让许多Web开发人员很困惑。于是写出来的代码就变成了这样:

// 不好的写法if (document.all) {
  id = document.uniqueID;
} else {
  id = Math.random();
}
登录后复制

这段代码的问题是,通过检测document.all,间接地判断浏览器是否为IE。一旦确定了浏览器是IE,便假设可以安全地使用IE所特有的document.uniqueID。然而,你所做的所有探测仅仅说明document.all是否存在,而并不能用于判断浏览器是否是IE。正因为document.all的存在并不意味着document.uniqueID也是可用的,因此这是一个错误的隐式推断,可能会导致代码不能正常运行。

为了更清楚地表述该问题,代码被修改成这样:

var isIE = navigator.userAgent.indexOf("MSIE") > -1;
登录后复制

修改为如下这样:

// 不好的写法var isIE = !!document.all;
登录后复制

这种转变体现了一种对“不要使用用户代理检测”的误解。虽然不是直接检测特定的浏览器,但是通过特性检测从而推断出是某个浏览器同样是很糟糕的做法。这叫做浏览器推断,是一种错误的实践。

到了某个阶段,开发者意识到document.all实际上并不是判断浏览器是否为IE的最佳方法。之前的代码加上了更多的特性检测,如下所示:

var isIE = !!document.all && document.uniqueID;
登录后复制

这种方法属于“自作聪明”型的。尝试通过越来越多的已知特性推断某些事情太困难了。更糟糕的是,你没办法阻止其他浏览器实现相同的功能,最终导致这段代码返回不可靠的结果。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS中Polyfill注解与阻止修改的使用

JS门面模式使用案例详解

以上是JS中怎样避免特性与浏览器推断的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板