实现jQuery的API

1. jQuery函数结构

jQuery函数要方便与输入一个选择器参数或则节点正确返回一个伪数组，便于对其明确执行后续方法，jQuery函数结构即为自身的hash结构，所以实现一个新的jQuery结构函数可以由如下图标号1所指的选择器、标号2所指的函数方法、标号3所返回的最终转换好的jQuery对象组成，后续为介绍。

image

2. 实现jQuery的API之选择器

对于标号1部分，对于节点和选择器的参数都可返回所需要的伪数组对象的index-value以及length-value的hash。

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

3. 实现jQuery的API之函数对象的方法

对于标号2部分，添加所需的jQuery函数方法，如标号2.1的addClass()方法，以及标号2.2的setText()方法。

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

4. 返回jQuery对象

在标号3为最终返回的jQuery对象，该对象包含标号1和2的hash，该对象的引用地址将被赋值给window.jQuery。

5. jQuery的API使用

对于window.jQuery的调用，使用$的标识符命名jQuery对象。

window.$ = jQuery

var $div = $('div')//声明对应的jQuery对象
$div.addClass('red')
$div.setText('hi')