关于JQuery的基本实现思路

jQuery是一个功能很强大，操作很方便的javascript库，那么他是怎么实现的呢？带着这个问题我们来看一下他的实现思路。（本人才疏学浅，如有不妥之处请指正）

第一步，让我们向往常一样构造出两个函数：

//一个得到一个节点的所有兄弟姐妹函数
let one = document.getElementById("one");

function getSiblings(node){
  let allchildren=node.parentNode.children;
  let arr={length:0};
  for(let i=0;i<allchildren.length;i++){
    if(allchildren[i] !==node){
      arr[arr.length]=allchildren[i];
      arr.length+=1;
    }
  }
  return arr;
}

//添加多个class函数
function addClass(node,classes){ //classes.forEach((value)=>node.classList.add(value));
  for(let key in classes){
    var value=classes[key];
    /*
    if(value){
      node.classList.add(value);
    }else{
      node.classList.remove(value);
    }
    */
   /*
let methodName = (value === true) ? 'add' : 'remove'
node.classList[methodName](key);
  }
}

如果我们直接把函数定义在全局环境中是很危险的，可能会覆盖掉同名的方法和变量，因此我们可以先创造出一个空间，然后在里面定义这些函数。

第二步，创造一个命名空间

//创建一个命名空间
var wangDom = {};
wangDom.getSiblings = function(node){
  let allchildren=node.parentNode.children;
  let arr={length:0};
  for(let i=0;i<allchildren.length;i++){
    if(allchildren[i] !==node){
      arr[arr.length]=allchildren[i];
      arr.length+=1;
    }
  }
  return arr;
}
wangDom.addClass = function(node,classes){  
    let methodName = (value === true) ? 'add':'remove' 
    node.classList[methodName](key);
  }
//调用方法

wangDom.addClass(one,{a:true,b:false,c:true,d:true})
console.log(one);

好了，这些再也不用担心，覆盖掉别人变量了。可是新的问题又出现了，我们如果要操作很多的节点呢？每操作一个新的节点，就要创造出新的命名空间，这就造成了内存资源的浪费，因此我们的代码还可以进一步优化，将这些方法添加在共有属性上（原型对象）就可以解决这个问题。

第三步，将我们的方法，添加到原型对象上

//将该方法添加到node原型上面
Node.prototype.getSiblings = function () {
    let allchildren = this.parentNode.children;
    console.log(allchildren);
    let arr = { length: 0 };
    for (let i = 0; i < allchildren.length; i++) {
        if (allchildren[i] !== this) {
            arr[arr.length] = allchildren[i];
            arr.length += 1;
        }
    }
    return arr;
}
Node.prototype.addClass = function(node,classes){  
    let methodName = (value === true) ? 'add':'remove' 
    node.classList[methodName](key);
  }
//访问方法
let one = document.getElementById("one");
one.getSiblings()

如果我们不想把我们的方法加在本就有的原型上面怎么办，没关系我们可以创造属于我们自己的原型对象（构造函数）

//创建一个构造函数
/*
window.Node2 = function (node) {
    return {
        getSiblings: function () {
            let allchildren = node.parentNode.children;
            //console.log(allchildren);
            let arr = { length: 0 };
            for (let i = 0; i < allchildren.length; i++) {
                if (allchildren[i] !== node) {
                    arr[arr.length] = allchildren[i];
                    arr.length += 1;
                }
            }
            return arr;
        },
        addClass: function (classes) {
            for (let key in classes) {
                var value = classes[key];

                let methodName = (value === true) ? 'add' : 'remove'
                node.classList[methodName](key);
            }
        }
    }
}
//用法
let div =Node2('div');
div.getSiblings();

哈哈哈，我们创造自己的方法，其实上面的过程就是JQuery大概的实现思路，我们把上面的全局变领Node2改成jquery就可以了。

第四步，变成jquery

//升级成jquery版
window.JQurey = function (nodeOrSelector) {
    if (typeof nodeOrSelector==="string"){
        node = document.querySelector(nodeOrSelector);
    }else{
        node = nodeOrSelector;
    }
    return {
        getSiblings: function () {
            let allchildren = node.parentNode.children;
            //console.log(allchildren);
            let arr = {
                length: 0
            };
            for (let i = 0; i < allchildren.length; i++) {
                if (allchildren[i] !== node) {
                    arr[arr.length] = allchildren[i];
                    arr.length += 1;
                }
            }
            return arr;
        },
        addClass: function (classes) {
            for (let key in classes) {
                var value = classes[key];

                let methodName = (value === true) ? 'add' : 'remove'
                node.classList[methodName](key);
            }
        }
    }
}
window.$ = JQurey;
*/

//二次升级

window.JQurey = 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 {
        nodes = {
            0: nodeOrSelector,
            length:1
        };
    }

    nodes.addClass= function (classes) {
       for(let i=0;i<nodes.length;i++){
           classes.forEach((value) => nodes[i].classList.add(value));
       }
    }

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

let li=JQurey("ul>li");
li.addClass(["red"]);
li.setText("我很帅");

以上就是我对jquery实现过程的了解，如有错误请指出。
完……….