实现一个 jQuery 的 API的过程

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

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .red {
      color: red;
    }
  </style>
</head>
<body>
<ul>
  <li>标签1</li>
  <li>标签2</li>
  <li>标签3</li>
  <li>标签4</li>
  <li>标签5</li>
</ul>
</body>
</html>

一. 想到哪写到哪
js代码如下：

    //给所有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')

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

 window.myDom = {
      setClass: function(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)  
            }
          }
        }
      },
      setText: function(selector,text){
        let nodes = document.querySelectorAll(selector)
        for(let i = 0;i<nodes.length;i++){
          nodes[i].textContent = text    
        }
      }
    }
    myDom = window.myDom
   
    let classes = {'red':true,'green':true,'blue':false}
    myDom.setClass.call(undefined,'ul>li',classes)
    myDom.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

let jQuery = function(selector){
      let nodes = {}
      if(selector){
        nodes = document.querySelectorAll(selector)
      }
      nodes.setClass = function(classes){
        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)  
            }
          }
        }
      }
      nodes.setText = function(text){
        for(let i = 0;i<nodes.length;i++){
          nodes[i].textContent = text    
        }
      }
      return nodes
    }
    window.jQuery = jQuery
    window.$ = jQuery

   
    let classes = {'red':true,'green':true,'blue':false}
    let $liTags = $('ul>li')
    $liTags.setClass.call($liTags,classes)
    $liTags.setText.call($liTags,'hello')

实现一个 jQuery 的 API的过程

推荐阅读更多精彩内容