来自制一个简单的jQuery吧

学习过jQuery的原理后，自己手动封装两个实用函数，来更深刻的理解jQuery的实现过程

一. 定义一个命名空间

定义命名空间是为了防止对DOM的API造成污染

window.lhQuery = {}

二. 封装一些函数

把想要实现的效果，封装起来，在需要的时候调用它

window.lhQuery = {} 
lhQuery = function(){
  function addClass(){}//添加class名
  function setText(){}//修改节点文本
}

为了达到jQuery的——$('x').addClass('xxx')——这种效果，至少需要把这些函数放到一个对象中，通过‘.’来获取。于是做出如下改动：

window.lhQuery = {} 
lhQuery = function(){
  let functionObj = {}
  functionObj.addClass = function(){}
  functionObj.setText= function(){}
  return functionObj 
}

这样的话，我们就可以通过functionObj.addClass()、 functionObj.setText()的方式来调用这两个函数

三.获取必要参数

DOM操作的主要功能就是对文档流中的节点进行各种操作，所以需要想办法获得某个节点

window.lhQuery = {} 
lhQuery = function(param){ //添加参数param，以便在调用lhQuery(param)时能够或许想要找到的节点
  let functionObj = {}
  if(typeof param === 'string'){ //如果传递的参数是一个字符串的话↓
    let temp = document.querySelectorAll(param)//那么就获取全部与它相关的节点↓
    for(let i = 0; i < temp.length; i++){
      functionObj [i] = temp[i] //并存入functionObj中
    }
    functionObj .length = temp.length //添加长度key
   }else if(param instanceof Node) { //如果传递的参数本身就是一个节点
    functionObj  = {
      0: param, //那只需要记住这个节点就好了
      length: 1
    }
  }
  //如此一来，lhQuery这个伪数组就具有以下两个API
  functionObj.addClass = function(){}
  functionObj.setText= function(){}
  return functionObj 
}

打印一下此时functionObj，看看它现在是一个怎样的结构

图-1 ：以文档流中有三个div为例，通过lhQuery('div')调用它所得到的伪数组

可以看到，此时的lhQuery返回的伪数组有三个节点，分别是0:div; 1:div; 2:div;同时还有两个方法addClass()以及setText()

四. 通过DOM提供的API去实现addClass与setText方法

DOM提供的classList.add()的API又长又难用，所以将这个API封装到自己的方法中，调用起来会更加舒服。
具体的实现方法如下

window.lhQuery = {} 
lhQuery = function(param){
  let functionObj = {}
  if(typeof param === 'string'){
    let temp = document.querySelectorAll(param)
    for(let i = 0; i < temp.length; i++){
      functionObj [i] = temp[i]
    }
    functionObj .length = temp.length
   }else if(param instanceof Node) {
    functionObj  = {
      0: param,
      length: 1
    }
  }
  //通过lhQuery(div).addClass('className')传递className的参数
  functionObj.addClass = function(className){
    for(let i = 0; i < functionObj.length; i++){  //遍历图-1的伪数组，给他们添加className
      functionObj[i].classList.add(className) 
    }
  }
  //通过lhQuery(div).textContent ('text')传递text的参数
  functionObj.setText= function(text){
    for(let i = 0; i < functionObj.length; i++){  //遍历图-1的伪数组，为他们修改textContent
      functionObj[i].textContent = text
    }
  }
  return functionObj 
}

五. 小结

这只是jQuery的基本思路，实际上jQuery比这个强大的多的多的多的多，但是只要了解了这个思路，去看jQuery的文档，那应该是没有任何问题了~最后在做一个小优化，让lhQuery在使用起来的时候看起来更像jQuery

window.$ = lhQuery
var $div = $('div')
//接下来，就可以肆意妄为啦
$div.addClass('successful')
$div.setText('successful')