• jquery源码解析:jQuery静态属性对象support详解


    jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能。针对jQuery内部使用。

    我们先来看一些源码:

    jQuery.support = (function( support ) {

      ......

      return support;
    })( {} );

    jQuery.support其实就是一个json对象。在火狐浏览器下,打印出support对象:

    接下来,我们来看它的源码

    jQuery.support = (function( support ) {

      var input = document.createElement("input"),
        fragment = document.createDocumentFragment(),
          div = document.createElement("div"),
            select = document.createElement("select"),
              opt = select.appendChild( document.createElement("option") );

      if ( !input.type ) {    //如果创建的input元素没有type类型,就直接返回。现在的浏览器都支持type类型,所以不会进入if语句
        return support;
      }

      input.type = "checkbox";   //改变这个input的type类型

      support.checkOn = input.value !== "";   //复选框的value值默认是什么,老版本的webkit下,默认值是"",所以它的support.checkOn = false。其他浏览器默认值是on,所以support.checkOn = true。针对这种差异化,jQuery通过hooks来解决,使所有的浏览器返回的值是一样的,解决兼容性问题。

      support.optSelected = opt.selected;//创建了一个下拉菜单select,并且在select下创建了一个子项option。在火狐和谷歌浏览器,safari下,第一个子项会被默认选上。但是在所有IE下,不会被默认选中。

      support.reliableMarginRight = true;   //这三个检测要等DOM加载完才会进行判断,这里只是先定义一下。
      support.boxSizingReliable = true;
      support.pixelPosition = false;

      input.checked = true;   //让复选框选中
      support.noCloneChecked = input.cloneNode( true ).checked; //克隆出来的新的复选框是否也被选中。火狐下,safari下,chrome下,克隆出来的都是选中的,IE9-10下,克隆出来的并没有被选中。jQuery会用hooks解决这个兼容性问题,让IE9-10下,克隆出来的复选框选中

      select.disabled = true;    //禁止下拉菜单
      support.optDisabled = !opt.disabled;     //select下的option应该不受影响,老版本webkit的opt.disabled也会变成true,就是受select影响 

      input = document.createElement("input");    //创建一个新的input 
      input.value = "t";    //设置input的value值为"t"。
      input.type = "radio";   //再设置input的type类型
      support.radioValue = input.value === "t";   //判断input的value值是否等于"t",IE下会等于on,因此IE下返回false

      input.setAttribute( "checked", "t" );   //设置input的checked属性值为"t"
      input.setAttribute( "name", "t" );    //设置input的name属性值为"t"

      fragment.appendChild( input );   //把这个input添加到文档碎片对象中

      support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;//在老版本的webkit下,克隆文档碎片,不能返回checked的值,因此等于false。

      support.focusinBubbles = "onfocusin" in window; //只有IE下支持这个事件。focus事件不会冒泡,而focusin支持

      div.style.backgroundClip = "content-box";//背景剪切
      div.cloneNode( true ).style.backgroundClip = "";//克隆出来的div应该不影响原div
      support.clearCloneStyle = div.style.backgroundClip === "content-box";//IE下会被影响,变成"",等于false

      jQuery(function() {    //有些方法需要等到DOM加载完才能通过功能检测判断,意思就是等这些新创建的元素真正的添加到页面中才能进行检测

        var container, marginDiv,
          divReset = "padding:0;margin:0;border:0;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box", //content-box是标准模式,border-box是怪异模式。
              body = document.getElementsByTagName("body")[ 0 ];

        if ( !body ) {   //如果body不存在,直接return。
          return;
        }

        container = document.createElement("div");
        container.style.cssText = "border:0;0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";

        body.appendChild( container ).appendChild( div );
        div.innerHTML = "";
        div.style.cssText = "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:1px;border:1px;display:block;4px;margin-top:1%;position:absolute;top:1%";

        jQuery.swap( body, body.style.zoom != null ? { zoom: 1 } : {}, function() {//zoom是放大页面的属性,等于1的时候,不放大也不缩小
          support.boxSizing = div.offsetWidth === 4;//怪异模式下,等于4,支持boxSizing,所有浏览器都支持
        });

        if ( window.getComputedStyle ) {
          support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";//safari下返回1%,因此等于false。而其他浏览器会转换成像素值。
          support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { "4px" } ).width === "4px";//IE下,如果是怪异模式,width不等于4px,需要减去padding,border

          marginDiv = div.appendChild( document.createElement("div") );
          marginDiv.style.cssText = div.style.cssText = divReset;
          marginDiv.style.marginRight = marginDiv.style.width = "0";
          div.style.width = "1px";//老版本的webkit下,会让marginDiv的width变成1

          support.reliableMarginRight =!parseFloat( ( window.getComputedStyle( marginDiv, null ) || {} ).marginRight );//应该等于0,reliableMarginRight等于true。
        }

        body.removeChild( container );
      });

      return support;
    })( {} );

    在上面打印出来的support对象中还有两个属性没讲,一个是ajax,一个是cors。源码是:

    jQuery.support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );//首先判断ajax对象是否存在,并且是否支持跨域。xhrSupported 就是new XMLHttpRequest()对象,IE9以及以下版本不支持
    jQuery.support.ajax = xhrSupported = !!xhrSupported; //是否支持ajax请求。

    加油!

  • 相关阅读:
    zoj3430Detect the Virus(ac自动机)
    zoj3494BCD Code(ac自动机+数位dp)
    hdu3247Resource Archiver(ac自动机+spfa)
    hdu3341Lost's revenge(ac自动机+dp)
    hdu4511小明系列故事——女友的考验(ac自动机+最短路)
    hdu4758Walk Through Squares(ac自动机+dp)
    数论一
    母函数专题
    KMP专题
    3级算法题
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4172919.html
Copyright © 2020-2023  润新知