实现一个 jQuery 的 API的过程

今天要模仿jQuery来实现两个API，他们的功能是：

1. 为选中的标签添加某个 class
2. 将选中的标签的value替换为某个text

首先，顺着这个思路，写了以下代码：
html+css如下：

  
  
  



  
标签1
  
标签2
  
标签3
  
标签4
  
标签5

一. 想到哪写到哪
js代码如下：

    //给所有li添加类名red
    let liTags = document.querySelectorAll('ul > li')
    for(let i = 0;i

二. 封装为函数
上面的代码复用性很低，所以我们把他封装为函数，每次使用时调用就好

//给所有li添加类名red
    function addClass(selector,classes){
      let nodes = document.querySelectorAll(selector)
      for(let key in classes){
        let value = classes[key]
        if(value){
          for(let i = 0;ili',classes)
    setText.call(undefined,'ul>li','hello')

三. 添加命名空间
当我们自己添加的函数越来越多时，会不小心把很多全局变量都给覆盖了，所以需要命名空间

 window.myDom = {
      setClass: function(selector,classes){
        let nodes = document.querySelectorAll(selector)
        for(let key in classes){
          let value = classes[key]
          if(value){
            for(let i = 0;ili',classes)
    myDom.setText.call(undefined,'ul>li','hello')

四. 修改NodeList.prototype

NodeList.prototype.setClass = function(classes){
      for(let key in classes){
        let value = classes[key]
        if(value){
          for(let i = 0;ili')
    liTags.setClass.call(liTags,classes)
    liTags.setText.call(liTags,'hello')

五. 模仿jQuery

let jQuery = function(selector){
      let nodes = {}
      if(selector){
        nodes = document.querySelectorAll(selector)
      }
      nodes.setClass = function(classes){
        for(let key in classes){
          let value = classes[key]
          if(value){
            for(let i = 0;ili')
    $liTags.setClass.call($liTags,classes)
    $liTags.setText.call($liTags,'hello')