实现一个简单的JQuery API

不念不忘少年蓝@ 2022-02-24 11:46 250阅读 0赞

今天要模仿jQuery来实现两个API，他们的功能是：

1 为选中的标签添加某个 class
    2 将选中的标签的value替换为某个text

首先，顺着这个思路，写了以下代码：

一. 给所有li添加类名red

let liTags = document.querySelectorAll('ul > li')
    for(let i = 0;i<liTags.length;i++){
      liTags[i].classList.add('red')    
    }
    
    //把所有li的内容替换为hello
    for(let i = 0;i<liTags.length;i++){
      liTags[i].textContent = 'hello'   
    }

二. 封装为函数  
上面的代码复用性很低，所以我们把他封装为函数，每次使用时调用就好

//给所有li添加类名red
        function addClass(selector,classes){
          let nodes = document.querySelectorAll(selector)
          for(let key in classes){
            let value = classes[key]
            if(value){
              for(let i = 0;i<nodes.length;i++){
                nodes[i].classList.add(key)  
              }
            }else {
              for(let i = 0;i<nodes.length;i++){
                nodes[i].classList.remove(key)  
              }
            }
          }
        }
            
        //把所有li的内容替换为hello
        function setText(selector,text){
          let nodes = document.querySelectorAll(selector)
          for(let i = 0;i<nodes.length;i++){
            nodes[i].textContent = text    
          }
        }
        let classes = {'red':true,'green':true,'blue':false}
        addClass.call(undefined,'ul>li',classes)
        setText.call(undefined,'ul>li','hello')

三. 添加命名空间  
当我们自己添加的函数越来越多时，会不小心把很多全局变量都给覆盖了，所以需要命名空间

四. 修改NodeList.prototype

NodeList.prototype.setClass = function(classes){
          for(let key in classes){
            let value = classes[key]
            if(value){
              for(let i = 0;i<this.length;i++){
                this[i].classList.add(key)  
              }
            }else {
              for(let i = 0;i<this.length;i++){
                this[i].classList.remove(key)  
              }
            }
          }
        }
        NodeList.prototype.setText = function(text){
          for(let i = 0;i<this.length;i++){
            this[i].textContent = text    
          }
        }
       
        let classes = {'red':true,'green':true,'blue':false}
        let liTags = document.querySelectorAll('ul>li')
        liTags.setClass.call(liTags,classes)
        liTags.setText.call(liTags,'hello')

五. 模仿jQuery