客户端检测

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

每一种浏览器都有各自的长处，也都有各自的缺点。开发人员需要利用客户端检测方法，来突破或者规避局限性。 应该优先采用通用的方法来实现功能，先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案。 客户端检测分为三部分检测：能力检测、怪癖检测、用户代理检测。

能力检测

能力检测又称为特性检测，目标是识别浏览器能力。

能力检测的基本模式：

if (object.propertyInQuestion) {
    // 使用 object.propertyInQuestion
}

如检测 IE 浏览器是否支持 document.getElementById 方法：

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!");
    }
}

先检测达成目的的最常用的特性，保证代码最优化，避免测试多个条件。 必须测试实际要用到的特性。

• 更可靠的能力检测

  如检测对象是否支持排序，如果只检测某个属性是否存在并不能确定对象是否支持排序。

  function isSortable(object) { // 不可取
      return !object.sort;
  }
  
  var result = isSortable({ sort: true }); // 这样也会返回 true
  

  更好的方式是检测 sort 是不是一个函数：

  function isSortable(object) {
      return typeof object.sort == "function";
  }
  

一次性检测所有的相关特性，不要分别检测。节省重新检测能力的时间。

怪癖检测

怪癖检测的目标是识别浏览器的特殊行为，是想要知道浏览器存在什么缺陷。

如 Safari 3 以前版本会枚举被隐藏的属性。

var hasEnumShadowQuirk = function () {
    var o = { toString: function(){} };
    var count = 0;
    for (var prop in o) {
        if (prop == "toString") {
            count++;
        }
    }
    
    return (count > 1);
}();

如果浏览器存在这个 bug， 使用 for-in 循环枚举带有自定义的 toString() 方法的对象，会返回两个 toString 的实例。