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)
  }