js封装函数来 解释jQuery的运行原理

实现代码大概逻辑流程就是：

1.首先提出问题：假设要给li元素添加class类演示和文本内容，该如何实现？

2.解决问题：

1.1首先得获取到所有的元素，知道有几个li元素需要进行调整，所以得使用循环遍历来找出所有的li元素。

2.2.获取到所有li元素后，要对每一个li元素都添加class类样式，同样的也需要循环遍历来给每个li元素添加样式。

3.3要给每一个li元素添加文本内容，同样的也需要循环遍历来给每个li元素添加内容。

4.4既然要做三件事，那就得用三个函数来实现。

逻辑对了，实现起来代码就会更加的快捷和准确。

window.jQuery = 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
                      }
                  }//循环遍历出所有的nodeOrSelector,例如：li
                  nodes.addClass = function (classes){
                      classes.forEach(value) => {
                          for(let i = 0;i<nodes.length;i++){
                            nodes[i].classList.add(value)
                          }
                      }
                  }//给所有的li添加class类，
                  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
                          }
                      }
                  }//给所有的li添加‘hi’
                  return nodes
              } 
    
    window.$ = jQuery          
    $li = $('ul>li')
    $li.addClass(['blue'])
    $li.text('hi')
复制代码

以上是一个利用原生js封装成函数后来说明jQuery内部运行的基本原理，我们可以模仿jQuery随意添加元素节点和类来进行页面内容的控制，可以让我们对jQuery有个更清楚的了解， 因为在理解过程中有一些代码让我困扰了一会，为了加深理解，特进行单独的说明，

易错细节：

1.nodeOrSelector instanceNode

这段代码我当时也是很不理解，因为一般instanceof是用来检测对象类型的，而这个Node看上去也不是我所了解的对象类型，instanceof一般使用方法如下：

alert(person instanceof Object);  // 变量 person 是 Object 吗？
alert(colors instanceof Array); // 变量 colors 是 Array 吗？
alert(pattern instanceof RegExp); // 变量 pattern 是 RegExp 吗？
复制代码

Node好像不在这些引用类型当中呀！《js高程设计》中也没有说，一般Node好像是作为节点来用，o(╥﹏╥)o 然后我翻了翻网上的文档，最后明白了，这个Node是作为Node对象，Node对象是属于DOM里面的对象，而Object，Array,Date,RegExp，Function等是属于ECMAscript里面的对象，因此他们都可以使用这个instanceof来检测对象类型，理解了这个，也就茅塞顿开了。

2.闭包函数，我们先来熟悉下闭包函数的意思：闭包是指能访问到其他函数内部中的变量的函数，这个函数就叫做闭包（函数不一定要return），

在上面的代码中，我们也是用了闭包:

nodes.addClass = function (classes){xxx} nodes.text = function(text){} 上面这俩函数都访问了他们外部的变量nodes,从而可以进行class类的添加和textcontent文本内容的添加，这里就是使用闭包函数的好处，

3.代码中多次使用了循环遍历，一定要注意，其中的伪数组是没有push方法的，所以不能使用push方法，我经常也是会不注意就错了， 还纠结半天哪里不对，结果白费半天功夫。

4.后面在遇到关于jQuery和DOM有关的问题将在后面继续补充，

转载于:https://juejin.im/post/5cab6a5a6fb9a068a2569f82