那些開源程序中讓人歎爲觀止的代碼 - 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