那些开源程序中让人叹为观止的代码 - 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