反应原生检测生产 - Javascript

在Web开发中，我们经常需要检测浏览器的原生反应能力来选择不同的代码路径。Javascript为我们提供了一些方法来帮助检测这些反应能力。

1. feature detection vs. user agent sniffing

在检测原生反应能力时，我们有两种方法：feature detection（检测浏览器是否支持某个特定的特性）和user agent sniffing（根据浏览器的标识符来判断它的反应能力）。因为user agent sniffing容易被欺骗，所以我们通常使用feature detection。

2. 检测对象

Javascript提供了一些对象来帮助我们检测反应能力：

2.1. document

document是代表当前HTML文档的对象，它有一些属性可以用于检测反应能力，例如：

if (document.addEventListener) {
  // 支持addEventListener方法的浏览器
} else {
  // 不支持addEventListener方法的浏览器
}

2.2. window

window是代表当前浏览器窗口的对象，它也有一些属性可以用于检测反应能力，例如：

if (window.XMLHttpRequest) {
  // 支持XMLHttpRequest对象的浏览器
} else {
  // 不支持XMLHttpRequest对象的浏览器
}

2.3. navigator

navigator代表浏览器本身的信息，它有一些属性可以用于检测反应能力，例如：

if (navigator.geolocation) {
  // 支持获取地理位置信息的浏览器
} else {
  // 不支持获取地理位置信息的浏览器
}

3. Modernizr

除了Javascript原生提供的检测对象外，还有一款非常流行的工具叫做Modernizr。它是一个开放源代码的Javascript库，可以帮助检测浏览器的反应能力，并提供一些额外的功能，例如自动生成属性前缀。

下面是使用Modernizr检测HTML5 Canvas支持的代码片段：

if (Modernizr.canvas) {
  // 支持HTML5 Canvas的浏览器
} else {
  // 不支持HTML5 Canvas的浏览器
}

4. 结论

在Web开发中，检测浏览器的反应能力是非常常见的任务，Javascript提供了一些对象来帮助我们完成这个任务。虽然user agent sniffing也可以完成此任务，但使用feature detection更为可靠。如果你需要更多的功能，可以考虑使用Modernizr。