实现一个 jQuery 的 API

本文通过使用原生DOM API实现类似于jQuery的元素添加类和获取元素文字的方法来理解jQuery的实现原理

html部分

<ul>
  <li id="item1">1</li>
  <li id="item2">2</li>
  <li id="item3">3</li>
  <li id="item4">4</li>
  <li id="item5">5</li>
</ul>

实现元素添加类

封装一个addClass()函数，设置两个参数，一个是操作的元素集合nodes，一个是添加的className

function addClass(nodes, className) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].classList.add(className)
    }
}

实现设置元素的文本

封装一个setText()函数，设置两个参数，一个是操作的元素集合nodes，一个是设置的文本text

function setText(nodes, text) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].textContent = text
    }
}

给addClass()和setText()一个公共的命名空间

function jquery(nodes) {
 return {
    addClass: function(className) {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.add(className)
      }
    },
    setText: function(text) {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].textContent = text
      }
    }
  }
}

var node2 = jquery(document.querySelectorAll('li'))
node2.addClass('red')

判断函数jquery传入的参数是元素还是字符串

通过typeof判断传入的参数是否为字符串，若不是，再次判断其是否为元素。然后对传入的参数进行处理，将需要操作的节点存入声明的nodes对象中

function jquery(nodeOrSelector) {
 let nodes = {}
  if (typeof nodeOrSelector === 'string') {
    let temp = document.querySelectorAll(nodeOrSelector)
    for (let i = 0; i < temp.length; i++) {
      nodes[i] = temp[i]
    }
    nodes.length = temp.length
  } else if (nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
 return {
    addClass: function(className) {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.add(className)
      }
    },
    setText: function(text) {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].textContent = text
      }
    }
  }
}

完整代码

window.jQuery = function(nodeOrSelector) {
  let nodes = {}
  if (typeof nodeOrSelector === 'string') {
    let temp = document.querySelectorAll(nodeOrSelector)
    for (let i = 0; i < temp.length; i++) {
      nodes[i] = temp[i]
    }
    nodes.length = temp.length
  } else if (nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
  return {
    addClass: function(className) {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.add(className)
      }
    },
    setText: function(text) {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].textContent = text
      }
    }
  }
}
window.$ = jQuery

$('li').addClass('red') // 可将所有 li 的 class 添加一个 red
$('li').setText('hi') // 可将所有 li 的 textContent 变为 hi