如何写一个jQuery的API

如何实现以下代码

window.jQuery = ???
window.$ = jQuery

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

1、此函数接受一个参数，这个参数可能是node节点或者是选择器

window.jQuery = function (nodeOrSelector){}

2、判断参数nodeOrSelector是字符串还是一个节点，如果是字符串，找到对应的所有元素，放到伪数组nodes里面；如果是节点，把节点放到伪数组nodes里面，return nodes，封装成一个伪数组nodes

window.jQuery = function (nodeOrSelector){
  let nodes
  if(typeof nodeOrSelector === 'string'){
    nodes = document.querySelectorAll(nodeOrSelector)
  }else if(nodeOrSelector instanceof Node){
    nodes = {0: nodeOrSelector, length: 1}
  } 
  return nodes
}

3、在nodes上加上API

nodes.addClass = function(){}
nodes.setText = function(){}

4、因nodes不是一个元素，故需要遍历nodes

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

5、完整代码如下

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

如何写一个jQuery的API

推荐阅读更多精彩内容