在JavaScript中，`offset`方法通常用于获取一个元素在页面上的绝对位置，包括距离文档顶部和左边的距离。本文将详细讲解两种原生JS实现`offset`的方法。
我们来看第一种实现方式，通过递归实现`offset`方法：
```javascript
function offset(element) {
var offest = { top: 0, left: 0 };
var _position;
getOffset(element, true);
return offest;
function getOffset(node, init) {
if (node.nodeType !== 1) {
return;
}
_position = window.getComputedStyle(node)['position'];
// position=static: 继续递归父节点
if (typeof(init) === 'undefined' && _position === 'static') {
getOffset(node.parentNode);
return;
}
offest.top = node.offsetTop + offest.top - node.scrollTop;
offest.left = node.offsetLeft + offest.left - node.scrollLeft;
// position = fixed: 获取值后退出递归
if (_position === 'fixed') {
return;
}
getOffset(node.parentNode);
}
}
```
这个实现方式首先初始化了一个`offest`对象，然后通过递归函数`getOffset`来获取元素的位置。在递归过程中，它会检查当前元素的`position`属性。如果`position`为`static`，则继续递归到父节点；如果`position`为`fixed`，则停止递归并计算出最终的位置。这种方法考虑了元素可能的相对定位和固定定位情况。
第二种实现方式是通过`getBoundingClientRect`方法：
```javascript
function offset2(node) {
var offest = { top: 0, left: 0 };
// 当前为IE11以下, 直接返回{top: 0, left: 0}
if (!node.getClientRects().length) {
return offest;
}
// 当前DOM节点的 display === 'node' 时, 直接返回{top: 0, left: 0}
if (window.getComputedStyle(node)['display'] === 'none') {
return offest;
}
offest = node.getBoundingClientRect();
var docElement = node.ownerDocument.documentElement;
return {
top: offest.top + window.pageYOffset - docElement.clientTop,
left: offest.left + window.pageXOffset - docElement.clientLeft
};
}
```
`getBoundingClientRect`方法返回元素的几何信息，包括`left`、`top`、`right`、`bottom`等属性，这些属性表示的是元素相对于视口的位置。在`offset2`函数中，如果元素在IE11以下或其`display`属性为`none`，则直接返回空对象。否则，获取元素的`getBoundingClientRect`信息，并根据浏览器的滚动位置和文档元素的`clientTop`和`clientLeft`进行调整，以得到相对于文档的准确位置。
两种方法各有优缺点。递归实现的方式对各种定位方式有较好的处理，但计算量较大，尤其是对于复杂的DOM结构。而`getBoundingClientRect`方法则更简洁，但可能不适用于所有情况，例如在某些旧版本的IE浏览器中可能不完全支持。
在实际应用中，根据项目需求和兼容性要求，可以选择适合的实现方式。同时，可以结合使用这两种方法，例如先尝试`getBoundingClientRect`，如果不可用再退化到递归实现，以优化性能。
