简单实现jQuery

一、实现addClass

第一步：封装

1. 封装addClass函数

• 如果输入的类是多个，通过DOMAPI中的数组的forEach方法或对象的for in方法来遍历classes数组/对象，然后通过DOM API 的classList.add来添加类，最后封装函数，由于需要输入class和node，所以括号内的参数为node和classes

window.jQuery = function(node){
  return{ 
addClass: function (classes) {
  let node//声明变量不给值
  classes.forEach((value)=>(node.classList.add(value)))
}
  }
}

2. 优化

function addClass(classes, node) {
  //let classes = {red:true,blue:false}
  for (key in classes) {
   var methodName = classes[key] ?  'add' : 'remove'  //methodName为输出的true或false值
    node.classList[methodName](key)
   /* if (classes[key]) {
      node.classList.add(key)
    } else {
      node.classList.remove(key)
    }*/ //此处是未优化版
  }

第二步：命名,将以上的方法放在这个对象中

window.jQuery = {}
jQuery.addClass = addClass
jQuery.addClass({red:true,blue:false},item2)

第三步：用nodes代替node，并实现同时操作多个node

1. 由于都在Node.prototype上修改会造成互相覆盖，创造新的对象，用nodes代替node,输入一个节点或选择器，返回一个新的节点，代表了输入的节点，比如输入div这个节点，获取的就是jQuery函数生成的对象，他的第一个值就是div

var nodes = jQuery("#item4")

2. 实现同时操作多个node，并判断输入的是选择器还是节点，如果类型检测是文本，即输入的是选择器，用document.querySelectorAll()方法获得一个伪数组，如果输入的是节点，为了实现输出统一，创造一个对象形式同上。

window.jQuery = function(nodeOrSelector) {
  let nodes = {} //初始化
  if (typeof nodeOrSelector === 'string') {
    let temp = document.querySelectorAll(nodeOrSelector)
    //利用temp函数将伪数组转化为纯净的伪数组，即原型直接指向Object.prototype
    for (i = 0; i < temp.length; i++) {
      nodes[i] = temp[i]
    }
    nodes.length = tmp.length
  } else if (nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
  nodes.addClass = function(classes) {
    classes.forEach((value) => {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.add(value)
      }
    })
   
  }
   return nodes
}

二、实现setText

1. 封装getText和setText方法

• 在getText方法中，初始化一个数组，遍历nodes，获取nodes[i].textContent后，就可以直接用push()方法，将内容一个一个放入数组，并返回数组
• 在setText方法中，遍历nodes，直接设置nodes[i].textContent为输入参数text的值

nodes.getText = function() {
    var texts = []
    for (let i = 0; i < nodes.length; i++) {
      texts.push(nodes[i].textContent) //注意这里用的push方法
    }
    return texts
  }//
  nodes.setText = function(text) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].textContent = text
    }
  }

2. 优化

• 合并getText和setText，判断是否输入text参数，输入了默认是setText，未输入默认是setText

 nodes.text = function(text) {
    if (text === undefined) {
      var texts = []
      for (let i = 0; i < nodes.length; i++) {
        texts.push(nodes[i].textContent)
      }
      return texts
    } else {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].textContent = text
      }
    }
  }

三、用$代替jQuery

window.$ = jQuery
var $div = $('div')//通过jQuery构造函数，返回对象$div

完整代码如下：

window.jQuery = function(nodeOrSelector) {
  let nodes = {}
  if (typeof nodeOrSelector === 'string') {
    let temp = document.querySelectorAll(nodeOrSelector)
    for (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(classes) {
    for (i = 0; i < nodes.length; i++) {
      nodes[i].classList.add(classes)
    }
  }
  nodes.setText = function(text) {
    if (text === undefined) {
      let texts = []
      for (i = 0; i < nodes.length; i++) {
        texts.push(nodes[i].textContent)
      }
      return texts
    } else {
      for (i = 0; i < nodes.length; i++) {
        nodes[i].textContent = text
      }
    }
  }
  return nodes
}

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