浏览器功能检测/是否支持

今天推荐一个开源的库，它能够检测用户浏览器是否支持某些特性和功能，不是通过 UA 去检测，毕竟UA 在一定程度上是带有欺骗性的。

Modernizr 是一小段 JavaScript 代码，可自动检测用户浏览器中下一代 Web 技术的可用性。Modernizr 不是根据"UA 嗅探"将整个浏览器系列列入黑名单，而是使用功能检测，让您根据浏览器的实际功能轻松定制用户体验。

当用户浏览器/环境不支持某个较新的js 语法/css用法时，能使用备用方案

js 复制代码

if(用户浏览器支持的语法) {
    // 业务逻辑
} else {
    //不支持的时候，兜底
    
}

当然，这种大量的 if/else 判断，也会造成业务代码难以维护的情况存在，大家可能更倾向使用 babel, postcss等工具进行转义。

我们即使不使用这个开源包，其实可以从中学习到最简单的检测某个环境是否支持什么语法，而不是一股脑的使用垫片包，增加项目体积

有的公司可能收集了用户的浏览器版本号，那更好，配合这个工具，可以做技术辅助和判断，团队内部是否要使用交心语法写业务

看几个示例：

案例1：判断当前环境是否支持箭头函数

Modernizr/feature-detects/es6/arrow.js at master · Modernizr/Modernizr (github.com)

js 复制代码

/*!
{
  "name": "ES6 Arrow Functions",
  "property": "arrow",
  "authors": ["Vincent Riemer"],
  "tags": ["es6"]
}
!*/
/* DOC
Check if browser implements ECMAScript 6 Arrow Functions per specification.
*/
define(['Modernizr'], function(Modernizr) {
  Modernizr.addTest('arrow', function() {
    try {
      // eslint-disable-next-line
      eval('()=>{}');
    } catch (e) {
      return false;
    }
    return true;
  });
});

案例2：判断当前是否支持 ES6 中新增的关于数组的语法

Modernizr/feature-detects/es6/array.js at master · Modernizr/Modernizr (github.com)

js 复制代码

/*!
{
  "name": "ES6 Array",
  "property": "es6array",
  "notes": [{
    "name": "ECMAScript 6 specification",
    "href": "https://www.ecma-international.org/ecma-262/6.0/index.html"
  }, {
    "name": "Last ECMAScript specification",
    "href": "https://www.ecma-international.org/ecma-262/index.html"
  }],
  "polyfills": ["es6shim"],
  "authors": ["Ron Waldon (@jokeyrhyme)"],
  "tags": ["es6"]
}
!*/
/* DOC
Check if browser implements ECMAScript 6 Array per specification.
*/
define(['Modernizr'], function(Modernizr) {
  Modernizr.addTest('es6array', !!(Array.prototype &&
    Array.prototype.copyWithin &&
    Array.prototype.fill &&
    Array.prototype.find &&
    Array.prototype.findIndex &&
    Array.prototype.keys &&
    Array.prototype.entries &&
    Array.prototype.values &&
    Array.from &&
    Array.of));
});

示例3： ES8 对象新增语法判断

js 复制代码

/*!
{
  "name": "ES8 Object",
  "property": "es8object",
  "notes": [{
    "name": "ECMAScript specification: Object.entries",
    "href": "https://www.ecma-international.org/ecma-262/#sec-object.entries"
  }, {
    "name": "ECMAScript specification: Object.values",
    "href": "https://www.ecma-international.org/ecma-262/#sec-object.values"
  }],
  "caniuse": "object-entries,object-values",
  "authors": ["dabretin"],
  "tags": ["es8"]
}
!*/
/* DOC
Check if browser implements ECMAScript 8 Object.
*/
define(['Modernizr'], function(Modernizr) {
  Modernizr.addTest('es8object', !!(Object.entries &&
    Object.values));
});

从上述几个案例看，有的直接调用某个方法，如果不为 undefined，或者不报错，则支持。大致思路是这样的，当前库是参照了 ECMA的语法提案