简易jQuery实现思路

简易jQuery

jQuery方式一般是$(selector).fn()

思路一

const hQuery=function(selector){

}
hQuery.prototype={
    constructor: hQuery,
    addclass:function(){
        console.log('add class')
    }
}
let $node =new hQuery()
$node.addclass()

功能上可以实现,但每次使用需要手动创建新的实例,跟我们日常使用方法不一致,需要重新改造

思路二

想要实现如下使用办法

window.$ = hQuery
$().addClass

$()运行之后必须返回一个对象才会有addClass方法

var hQuery = function(selector) {
  return new hQuery(selector)
}

hQuery.fn = hQuery.prototype = {

  addClass: function() {
    console.log('add Class')
  }
}

window.$ = hQuery

var $node = $('div')
$node.addClass('active')

但是这样书写会报错Uncaught RangeError: Maximum call stack size exceeded,原因就是new hQuery的时候执行了hQuery函数出现循环调用.所以不能直接new hQuery,得换个方式.

思路三

不直接new hQuery,那么我们再给原型添加一个方法

var hQuery = function(selector) {
  return new hQuery.fn.init(selector)
}

hQuery.fn = hQuery.prototype = {
  init: function() {
    console.log(this)
  },

  addClass: function() {
    console.log(this)
    console.log('add Class')
  }
}
window.$=hQuery
$('div').addClass

执行hQuery,返回new一个新函数得到的对象(这个对象是init函数的实例),这个新函数放hQuery的原型对象里面,但是运行之后会报如下错误VM121:16 Uncaught TypeError: $(...).addClass is not a function,原因是返回的新对象没有addClass属性;
ps:注意引擎会首先寻找init上面有没有addClass属性,没有的话会寻找init原型(init.prototype)上有没有addClass属性

思路四

var hQuery = function(selector) {
  return hQuery.fn.init(selector)
}

hQuery.fn = hQuery.prototype = {
  init: function() {
    console.log(this)
    return this
  },

  addClass: function() {
    console.log(this)
    console.log('add Class')
  }
}

window.$ = hQuery

$('div').addClass('active')

没创建新对象,共用hQuery.prototype

console.log( $('div') === $('span') )
换种写法，这时候不报错了，但也不符合我们的需求。$()得到的结果是同一个对象。为什么需要创建新的对象?因为js对象是引用类型,如果共用对象,那么我们修改其中其中的属性会影响到其他使用这个对象的变量

思路五

var hQuery = function(selector) {
  return new hQuery.fn.init(selector)
}

hQuery.fn = hQuery.prototype = {
  init: function() {
    console.log(this)
  },
  addClass: function() {
    console.log(this)
    console.log('add Class')
  }
}
hQuery.fn.init.prototype=hQuery.fn//核心代码
window.$=hQuery
$('div').addClass

基本雏形框架基本完成;

类数组对象

$(selector)返回一个类数组对象,类似于{0:node0,1:node1,length:2}
对init函数重构

  let nodes=document.querySelectorAll(selector);
      nodes.forEach((node,index)=>{
        this[index]=node;
      })
  this.length=nodes.length;

原型添加方法

我们后续会对原型添加方法,直接在原型上添加方法有一定隐患:例如修改了其他已经定义的方法,尤其是多人协作的过程中
我们为原型上添加一个方法,用于随时给原型添加,而不必回到一开始定义原型时的方法

 extend:function(obj){
     for (let key in obj){
       this[key]=obj;
     }

为原型添加方法示例

 hQuery.fn.extend({
    get:function(){
      console.log('get')
    } 
  })

addClass方法

一开始使用 Object.values()获取类数组对象dom节点,但是有一个问题,我们为类数组对象添加了length属性,这样便利的时候会获取到length属性,这个属性显然是没有classList属性的(就是个数字),我们当然可以使用判断把它过滤掉

  Object.values(this).forEach(node=>{ 
        if(typeof(node)!=='number'){
          node.classList.add(cls)  
        }     
      })

改用array.from实现

Array.from(this).forEach(node => node.classList.add(cls))

完整代码

const hQuery = function(selector) {
    return new hQuery.fn.init(selector)
  }
  
  hQuery.fn = hQuery.prototype = {
    init: function(selector) {
      let nodes=document.querySelectorAll(selector);
      nodes.forEach((node,index)=>{
        this[index]=node;//设置新对象属性

      })
      this.length=nodes.length;//设置新对象属性:length
      console.log('hahah')
      // return nodes
    },
    addClass: function(cls) {
      console.log('add Class')
      console.log(this)
      
      console.log(Array.from(this))
      Object.values(this).forEach(node=>{ 
        if(typeof(node)!=='number'){
          node.classList.add(cls)  
        }
             
      })
      // Array.from(this).forEach(node => node.classList.add(cls))
      // return this;
      

    },
    extend:function(obj){
     for (let key in obj){
       this[key]=obj;
     }
    }
  }

  hQuery.fn.init.prototype=hQuery.fn//核心代码
  window.$=hQuery;
  hQuery.fn.extend({
    get:function(){
      console.log('get')
    } 
  })

  $('.demo').addClass('red')
  $('.demo').addClass('yellow')