前端开发核心知识进阶 1.3 我们不背诵API,只实现API

有时候面试官不强求开发者准确无误地背诵API,相反面试官喜欢告诉面试者API的使用方法,让面试者实现API。

实现一个API,可以考察面试者对API的理解,更能体现开发者的编程思维和能力。对于积极上进的前端工程师,模仿并实现一些经典方法,应该是“家常便饭”,这是比较基本的要求

第三节,我们探讨一下JQuery的offset( )、数组的reduce、compose、bind、apply的各种实现方法

一、JQuery的offset( )

首先得了解下JQuery的offset( ).top,dom元素的offsetTop、scrollTop

offset( ).top 返回元素到文档的纵向距离,就是相对于文档的纵向偏移量

offsetTop 返回元素的定位为relative、absolute、fixed的最近的祖先元素的纵向距离,如果元素本身定位为fixed,则返回相对于文档。没有定位的祖先元素,那也相对于文档。元素的父元素可滚动时,无论滚动到哪,此值都不会变化。

scrollTop 返回该元素滚动条已滚动的距离

了解完就可以尝试用offsetTop和scrollTop实现offset( ).top,遍历元素的祖先元素,找到第一个有定位的祖先元素

function offset(node){
    var result = {
        top:0,
        left:0
    }
    var getOffset = function(node,init){

        if(node.nodeType != 1){
            return
        }

        position = window.getComputedStyle(node).position

        if(position === 'static' && typeof init === 'undefined'){
            getOffset(node.parentNode)
            return
        }

        result.top = result.top + node.offsetTop - node.scrollTop
        result.left = result.left + node.offsetLeft - node.s
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值