jQuery offset()源码解析

jQuery.fn.offset = function( options ) {
    if ( arguments.length ) {//设置元素坐标
        return options === undefined ?//如果传入的参数是undefined，直接返回
            this :
            this.each(function( i ) {//遍历然后调用jQuery.offset.setOffset
                jQuery.offset.setOffset( this, options, i );
            });
    }

    var docElem, win,
        elem = this[ 0 ],
        box = { top: 0, left: 0 },
        doc = elem && elem.ownerDocument;//当前文档

    if ( !doc ) {
        return;
    }

    docElem = doc.documentElement;

    // Make sure it‘s not a disconnected DOM node
    if ( !jQuery.contains( docElem, elem ) ) {//如果元素没有被documentElement包含，就返回 0 0
        return box;
    }

    // If we don‘t have gBCR, just use 0,0 rather than error
    // BlackBerry 5, iOS 3 (original iPhone)
    if ( typeof elem.getBoundingClientRect !== core_strundefined ) {//如果元素有getBoundingClientRect方法
        box = elem.getBoundingClientRect();//调用该方法
    }

    win = getWindow( doc );//如果是window就返回window，如果是document，返回document.defaultView
    return {
        //元素相对于视窗的距离+滚动距离-边框宽度
        top: box.top + win.pageYOffset - docElem.clientTop,
        left: box.left + win.pageXOffset - docElem.clientLeft
    };
};

    return {
        //元素相对于视窗的距离+滚动距离-边框宽度
        top: box.top + win.pageYOffset - docElem.clientTop,
        left: box.left + win.pageXOffset - docElem.clientLeft
    };

function getWindow( elem ) {
return jQuery.isWindow( elem ) ? elem : elem.nodeType === 9 && elem.defaultView;
}

jQuery.offset = {

    setOffset: function( elem, options, i ) {
        var curPosition, curLeft, curCSSTop, curTop, curOffset, curCSSLeft, calculatePosition,
            position = jQuery.css( elem, "position" ),//获取当前元素的position属性
            curElem = jQuery( elem ),//缓存当前元素
            props = {};

        // Set position first, in-case top/left are set even on static elem
        if ( position === "static" ) {//如果原元素是静态定位的，改成相对定位
            elem.style.position = "relative";
        }

        curOffset = curElem.offset();//获取当前元素的offset
        curCSSTop = jQuery.css( elem, "top" );
        curCSSLeft = jQuery.css( elem, "left" );
        //如果元素的position为absolute或者fixed，而且其top和left属性中至少有一项的值是auto,calculatePosition为true
        calculatePosition = ( position === "absolute" || position === "fixed" ) && ( curCSSTop + curCSSLeft ).indexOf("auto") > -1;

        // Need to be able to calculate position if either top or left is auto and position is either absolute or fixed
        if ( calculatePosition ) {
            curPosition = curElem.position();//获取元素相对于父元素的偏移位置
            curTop = curPosition.top;
            curLeft = curPosition.left;

        } else {//如果calculatePosition为false，元素相对定位或者原本就有top、left值
            curTop = parseFloat( curCSSTop ) || 0;
            curLeft = parseFloat( curCSSLeft ) || 0;
        }

        if ( jQuery.isFunction( options ) ) {//如果options是函数，遍历调用
            options = options.call( elem, i, curOffset );
        }
        //计算props值，因为offset是相对文档定位，新的css的top/left值
        //需要根据原来的offset和css的top/left值计算
        if ( options.top != null ) {
            props.top = ( options.top - curOffset.top ) + curTop;
        }
        if ( options.left != null ) {
            props.left = ( options.left - curOffset.left ) + curLeft;
        }
        //如果有using这个参数，可以调用using方法
        if ( "using" in options ) {
            options.using.call( elem, props );

        } else {//如果没有，设置css偏移。
            curElem.css( props );
        }
    }
};

$(‘#page‘).offset({"top":1000,"left":100,"using":function(prop){console.log(prop)}});
//Object {top: -302, left: 100}