node jquery ajax不执行_jQuery 的简易实现思路

对jQuery一直都是很好奇，今天看到了一篇博客写的得很有趣，借鉴下他/她的想法，捋一捋哈。

jQuery是一个早期非常强大的js库，它小巧、快速、特性丰富，它在HTML的文档遍历、DOM操作，事件冒泡，动画以及AJAX使用方面提供了非常便捷易用的API。本文从学习的角度简要分析jQuery的封装机制。

实现思路

当给定需求如下：

在只知道常用DOM API的情况下，为了模拟一个简易jQuery的封装机制，首先能想到的是在Node的原型上添加方法addClass和setText，但这样就破坏了DOM本身的封装，并不是一个好方法。更好的思路是设计一个新的函数来对原node添加装饰功能并返回。具体如下：

（1）version 1.0：

（2）version 2.0：类型检测（传入字符串或节点对象）

（3）version 3.0： 支持操作多个元素

（4）version 4.0：优化代码

<script>
 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
         }
    } // 同时添加多个类(classes可以是一个字符串，也可以是一个数组集合了需要添加的类)
 nodes.addClass = function(classes) {
     if (typeof classes === "string") {
         for (let i = 0; i < nodes.length; i++) {
             nodes[i].classList.add(classes)
           }
    } else if (classes instanceof Array) {
            classes.forEach(value => {
                  for (let i = 0; i < nodes.length; i++) {
                           nodes[i].classList.add(value)
                        }
                    })
                }
            }

        nodes.setText = function(text) {
               for (let i = 0; i < nodes.length; i++) {
                   nodes[i].textContent = text
                }
            }
            return nodes
        }
 </script>

在4.0版里，我们能够得到

更纯净的node（原型链里不再有Node.prototype）

可同时添加多个类的addClass方法，接受的参数可以是一个字符串，即添加一个类，也可以是多个类组成的数组（因为错误处理我还没了解，所以其他类型抛出错误现在没有实现）同时给得到的所有节点添加文字内容的setText方法

以上的过程，旨在学习jQuery的封装机制。即jQuery是一个构造函数，它封装了原生js的属性和方法，以更于易用的api供我们使用。本文是对jQuery的一个简易版实现，理解了其中的原理，对于我们学习其他框架也是大有裨益的。