自己写一个类似于jquery的方法（）

前言：之前面试过很多大公司，他们的面试官大多都问了我这样一个问题：你有好好研究过jQuery的源码吗？很遗憾，我没有研究过，现在接触到了一点jQuery的设计理念，自己去写一个类似于jQuery可以调用的方法，以便更好地理解jQuery~~

关键词：jQuery，封装，命名空间，this，call()~~......

正文：
首先，让我们写两个函数来实现两个效果
  在HTML中有几个li,id分别为item1-5.这两个函数实现的两个效果分别是：
1、getSiblings：熟悉jQuery的朋友都应该知道jQuery有一个API是siblings，获取当前元素同级的，除了本身的其他元素。
2、addClass:给元素添加class。

function getSiblings(node){
    var allChildren = node.parentNode.children
    var array = {
        length:0
    }
    for(let i = 0;i<allChildren;i++){
        if(allChildren[i] !== item3){
              array[array.length] = allChildren[i];
              array.length += 1;
        }
    }
return array
}
function addClass(node,classes){
    classes.forEach((value) => node.classList.add(value))
}

  好，方法现在是写完了，可是这两个function之间也没什么关系呀，如果还有更多的这种方法，和别人介绍怎么介绍的过来。所以，接下来，我们的命名空间就要上场了~~强大的命名空间，超喜欢它。
命名空间
  接着上面的来,在上面的基础上，我们添加如下代码：

    window.ppdom = {}
    ppdom.getSiblings = getSiblings
    ppdom.addClass = addClass
    ppdom.getSiblings(item3)
    ppdom.addclass(['a','b','c'])

  上述就是命名空间。但是有一点别扭的是：下面两种写法哪种更已让人接受呢？

    ppdom.getSiblings(item3)
    ppdom.addclass(['a','b','c'])
    or
    item3.getSiblings();
    item3.addClass(['a','b','c']);

  当然是第二种啦，如果你的同事和你一样都喜欢用ppdom,岂不会被覆盖吗？那有什么方法让它变成第二种形式呢？
下面是第一种方法----prototype:先来看下这个小例子，会return回1吗？肯定会哒。

    Node.prototype.getSiblings = function(){
          return 1
    }
    item3.getSiblings();

Node.prototype.getSiblings = function(){
      var allChildren = this.parentNode.children
      var array = {
            length:0
      }
      for(let i = 0;i<allChildren;i++){
          if(allChildren[i] !== item3){
                array[array.length] = allChildren[i];
                array.length += 1;
          }
     }
     return array
 }
Node.prototype.getSiblings = function(classes){
       classes.forEach((value) => this.classList.add(value))
 }
item3.getSiblings();
item3.addClass(['a','b','c']);

注意到我们函数里有什么改变了吗？

image.png

这里的this，指向的就是当前的节点item3.
分辨this，只要记住一句话就行，

this是call()的第一个参数。

上述两个其实用call的话均可写成：
item3.getSiblings();
item3.addClass(['a','b','c']);
|
|
^
item3.getSiblings.call(item3);
item3.addClass(item3,['a','b','c']);
再磨叽一遍，大家要记牢：

this是call()的第一个参数。

这时候有人提出疑问了，那改成prototype也是非常容易被覆盖的，那怎么办呢？
方法二：

window.Node2 = function(node){
    return {
          getSiblings:function(){
               var allChildren = node.parentNode.children
               var array = {
                    length:0
                }
                for(let i = 0;i<allChildren;i++){
                    if(allChildren[i] !== item3){
                        array[array.length] = allChildren[i];
                        array.length += 1;
                    }
               }
               return array
          },
          addClass:function(){
               classes.forEach((value) => node.classList.add(value))
          }
    }
}
var node2 = Node2(item3);
node2.getSiblings();
node2.addClass(['a','b','c']);

现在，就是见证奇迹的时刻，让我们把window.Node2里面的Node2改一个名字吧，名字如下：

window.jquery = function(node){
    return {
          getSiblings:function(){
               var allChildren = node.parentNode.children
               var array = {
                    length:0
                }
                for(let i = 0;i<allChildren;i++){
                    if(allChildren[i] !== item3){
                        array[array.length] = allChildren[i];
                        array.length += 1;
                    }
               }
               return array
          },
          addClass:function(){
               classes.forEach((value) => node.classList.add(value))
          }
    }
}
var node2 = jquery (item3);
node2.getSiblings();
node2.addClass(['a','b','c']);

当当当~~完成！