那些开源程序中让人叹为观止的代码 - 1 浏览器特性判断

浏览器特性判断

解决问题：判断某事件/方法在当前浏览器中是否支持

开源程序：Modernizr

众所周知，各个不同的浏览器对于代码渲染的实现也各自为政百花齐放，虽然有W3C在维护着标准，但是由于市面上存在很多浏览器，每个浏览器又有数不尽的历史版本，因此对于浏览器兼容性问题的判断成了在写JS应用中必不可少的技能。

以前大家都倾向于做浏览器类型和版本的检测，现在倾向于做浏览器的特性检测，这样更有实际用处。今天要提到的是通过判断事件是否存在来探测浏览器兼容性支持。比如onmousewheel事件，并不是所有的浏览器都会支持，我们可以这样：

if(document.onmousewheel){
    //这里是处理代码
}

这种方式会有一个明显的弊端，如果某恶意用户注入了一段代码，重新定义了document.onmousewheel事件的实现，那么就会偏离我们的预期，执行到了不该执行的代码。

看看Modernizr中是如何来做的。

function is( obj, type ) {
    return typeof obj === type;
}

var isEventSupported = (function() {

  var TAGNAMES = {
    'select': 'input', 'change': 'input',
    'submit': 'form', 'reset': 'form',
    'error': 'img', 'load': 'img', 'abort': 'img'
  };

  function isEventSupported( eventName, element ) {

    element = element || document.createElement(TAGNAMES[eventName] || 'div');
    eventName = 'on' + eventName;

    var isSupported = eventName in element;

    if ( !isSupported ) {
      if ( !element.setAttribute ) {
        element = document.createElement('div');
      }
      if ( element.setAttribute && element.removeAttribute ) {
        element.setAttribute(eventName, '');
        isSupported = is(element[eventName], 'function');

        if ( !is(element[eventName], 'undefined') ) {
          element[eventName] = undefined;
        }
        element.removeAttribute(eventName);
      }
    }

    element = null;
    return isSupported;
  }
  return isEventSupported;
})();

使用方式也很简单：

isEventSupported("mousewheel")// Chrome
-> true 
isEventSupported("mousewheel")// Firefox
-> false