前端API封装思路

1、根据需求编写满足对应功能的函数：

i、添加class类的函数

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

ii、 重写标签中的文本内容

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

2、给一个命名空间，将两个函数进行封装

window.jQuery=function (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
      }
    }
  }
}

这时两个函数的调用方法为：

window.jQuery.addClass(className)
window.jQuery.setText(text)

3、对输入的参数进行判定，可以判定input是node节点还是CSS选择器

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
     }
   }

这样设定可对input提供更多选择，可通过标签属性、CSS选择器进行查询获取对应的标签，获取的多个节点形成伪数组，对伪数组进行遍历即可对多个相同属性或相同标签进行操作。

4、由于函数名较长，定义一个更简单的写法

window.$ = jQuery

5、完整代码

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
    }
  }
  nodes.addClass = function(className) {
    for (let i=0;i<nodes.length;i++){
        nodes[i].classList.add(className)
      }
  }
  nodes.setText = function(text) {
    for(let i=0;i<nodes.length;i++){
      nodes[i].textContent = text
    }
  }
  return nodes
}