jQuery选择器的简单实现

jQuery选择器的简单实现

  • jQuery是前几年前端开发中的老大哥了,而我们最喜欢的也是他提供的选择器跟链式调用的方法了,最近在看了原型与原型链之后也是有点简单的想法,想尝试着实现以下jquery的选择器
  • 首先需要构建一个函数A可以接受一个id名,返回一个新的对象,而且对象具有jquery提供的一系列方法,所以我们可以构造一个拥有这些方法的B对象并返回
  function A(selector){
   
    return B
  }
  let B = {
   
    length: 3,
    size: function(){
   
      return this.length
    }
  }
  • 但是单纯的B对象的没办法接收选择器名称,所以我们可以给B添加一个初始化函数init,接收一个选择器名称,并返回最后的对象,因为返回的对象需要拥有B上面的方法,所以我们还是选择将B对象返回,但是我们也需要获取到的dom元素,所以,参照jquery的方法,我们可以将B对象的0属性设置为获取到的dom元素,并且更新B对象的length属性。那如何在函数内返回B对象那?因为init方法是挂载在对象身上的,所以,我们需要返回B对象的时候只需要返回this就可以了
  function A(selector){
   
    return B.init(selector)
  }
  let B = {
   
    init: function(selector){
   
      let dom = document.getElementById(selector)
      this[0] = dom
      this.length = 1
      return this
    },
    length: 3,
    size: function(){
   
      return this.length
    }
  }
  • 这里的话我们需要手动实现一个B对象,过于繁琐,其实我们可以将A函数的fn属性设置为这个对象,这样就省去了显式的创建B对象
  function A(selector){
   
    return A.fn.init(selector)
  }
  A.fn = {
   
    init: function(selector){
   
      let dom = document.getElementById(selector)
      this[0] = dom
      this.length = 1
      return this
    },
    length: 3,
    size: function(){
   
      return this.length
    }
  }

  var a = A('demo') // Object {0: #demo, init: f, length: 1, size: f}
  var t = A('test') // Object {0: #test, init: f, length: 1, size: f}
  console.log(a)    // Object {0: #test, init: f, length: 1, size: f}
  • 上面我们能发现,如果直接返回A.fn这个对象的话则所有通过A函数获取到的对象会公用一个对象,包括属性,这样的话就会相互影响,取不到我们想要的dom,所以我们可以在返回前使用new进行修饰,但是new的特性导致返回的对象中的this将不再指向我们的A.fn,也就意味这我们不能使用size()方法,所以我们可以指定A.fn.init的prototype到A.fn从而获取size方法
  function A(selector){
   
    return new A.fn.init(selector)
  }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值