/**
 * @description 如何获取文档中任意一个元素距离文档document顶部的距离
 * jquery中的 offset 方法 返回的对象包含两个整型属性：top 和 left
 * 手动实现一下：
 *  1. 通过递归实现
 *  2. 通过 getBoundingClientRect API 实现
 *  3. offsetTop 访问一个DOM节点上边框相对距离其本身最近，且 position 值
 *      为非 static 的祖先元素的垂直偏移量
 */

// 通过递归实现方案 遍历目标袁术的父节点，父节点的父节点。。。

const offset = ele => {
    let result = {
        top: 0,
        left: 0
    }

    const getOffset = (node, init) => {
        if (node.nodeType !== 1) {
            return
        }
        position = window.getComputedStyle(node)['position']
        if (typeof(init) === 'undefined' && position === 'static') {
            // 不计入计算 进入下一个节点
            getOffset(node.parentNode)
            return
        }
        result.top = node.offsetTop + result.top - node.scrollTop
        result.left = node.offsetLeft + result.left - node.scrollLeft
        if (position === 'fixed') {
            return
        }
        getOffset(node.parentNode)
    }

    if (window.getComputedStyle(ele)['display'] === 'none') {
        return result
    }

    let position

    getOffset(ele, true)

    return result
}

// getBoundingClientRect() 返回元素的大小及其相对于视口的位置
const offset = ele => {
    let result = {
        top: 0,
        left: 0
    }
    // 当前 IE11 一下 ， 直接返回top:0,left:0
    if (!ele.getClientRects().length) {
        return result
    }

    // 当前DOM节点display === 'none' 直接返回top:0,left:0
    result = ele.getBoundingClient()
    var docElement = ele.owerDocument.documentElement
    return {
        // window.pageYOffset 鼠标滚动的距离
        // clientTop 一个元素顶部边框的宽度
        top: result.top + window.pageYOffset - document.clientTop,
        left: result.left + window.pageXOffset - docElement.clientLeft
    }

}