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

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

原创2018-06-04 10:54:330712
这次给大家带来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中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:javascript Firefox webkit
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类