实现一个简单的“类jQuery”封装

1.基本结构

jQuery是一个经典的JavaScript库，自出现一来就一直受到前端圈的喜爱。它封装了许多步骤，使用它能够在开发中极大地简化工作流程。尽管jQuery已经在慢慢淡出舞台，但jQuery的一些封装思想还是可以借鉴一下的。
我们知道，在jQuery中，常见的使用方法类似于这样

 $().function()

通过$()会返回一个jQuery对象，从而可以调用jQuery库中的方法。

window.$ = jQuery
var $div = $('div')
$div.__proto__ === jQuery.prototype  //true
$div[1] instanceof Node //true

可以看到，jQuery对象的原型是jquery.prototype，而返回jQuery对象是一个类数组，对象中各属性的值为普通的Node对象。

2.实现简化版的类jQuery

从上面了解到，大致上jQuery可以接受一个Node对象，实际上还可以接受string形式的选择器，然后通过输入的参数匹配到实际的DOM节点，然后返回一个jQuery对象，这样我们就可以通过该对象来进行各种操作了。返回的jQuery对象可以认为是普通Node对象的“升级版”，拥有更强大的方法，更灵活的操作空间。
分析完之后，实现起来就简单了：

window.jQueryLike = 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
      }
    }
    //批量写入class
    nodes.addClass = function (classes) {
      classes.forEach((value) => {
        for (let i = 0; i < nodes.length; i++) {
          nodes[i].classList.add(value)
        }
      })
    }
    
    //若参数为空则读取文本，若参数不为空则写入
    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
        }
      }
    }
    return nodes  //返回一个类jQuery对象
  }

使用过程(代码片段)：

<style>
    .red {
      color: red;
    }
  </style>
  <div class="div">1</div>
  <div class="div">2</div>
  <div class="div">3</div>
  <button id="toRed">red</button>
<script>
  window.$ = jQueryLike
  var $div = $('div')
  button = document.getElementById('toRed')
  button.onclick = function(){
  $div.addClass(['red'])
  }
</script>

效果：