超级简易版jquery

手写一个jQuery,考虑插件和扩展性(原型和原型链)

//jquery做dom查询的
class jquery{
    
    
  constructor(selector){
    
    
    cons result = documnent.querySelectorAll(selector)
    const length = result.length;
    for(let i = 0;i < length;i++){
    
    
      this[i] = result[i]
    }
    this.length = length;
    this.selector = selector;
  }
  get(index){
    
    
     return this[index]
  }
  each(fn){
    
    
    for(let i =0;i<this.length;i++){
    
    
      const elem  = this[i];
      fn(elem)
    }
  }
  on(type,fn){
    
    
    return this.each(elem=>{
    
    
      elem.addEventListener(type,fn,false)
    })
  }
}

基于jauery做扩展

//1、插件机制
jQuery.prototype.dialog = function(info){
    
    
  alert(info)
}

//2、造轮子
class myJQuery extends jQuery{
    
    
  constructor(selector){
    
    
    super(selector)
  }
  //扩展自己的方法
  addClass(className){
    
    

  }
  style(data){
    
    

  }
}

猜你喜欢

转载自blog.csdn.net/Yun__shen/article/details/119878208