主要記錄通過js封裝一個jquery的addClass方法的過程
https://www.cnblogs.com/baiyunke/p/7821299.html
html代碼：

<ul>
    <li id="item1">選項1</li>
    <li id="item2">選項2</li>
    <li id="item3">選項3</li>
    <li id="item4">選項4</li>
    <li id="item5">選項5</li>
</ul>

1、傳統(tǒng)封裝函數(shù)

js封裝一個獲取除自己外的兄弟元素

代碼片段：

function getSibling(node){
  var allChildren= node.parentNode.children;
  var array={length:0}
  for(var i= 0;i<allChildren.length;i++){
    if(allChildren[i] !== node){
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
return array
}
console.log( getSibling(item3)) //傳入item3

注意：只用！== 或 ===， 不要用 ==或！=

具體看文章https://zhuanlan.zhihu.com/p/22745278
結論是：
① NaN ！== NaN
② 所有聲明的對象都不相等，因為地址不相同

打印結果為：

除自己外的兄弟元素.png

js封裝一個添加Class的函數(shù)

 function addClass(node,classes) {
      for(var key in classes){
        var value = classes[key];
//        if(value){
//          node.classList.add(key);
//        }else{
//          node.classList.remove(key);
//        }
//        可替換為：
        var methodName= value?'add':'remove'
        node.classList[methodName](key);
      }
    }
    addClass(item3,{'red':true,'blue':false});

添加class.png

2、命名空間

var dom = {}
dom.getSiblings(node)
dom.addClass(node, {a: true, b: false})

    window.wh = {}//一個名叫wh的庫
    wh.getSibling = getSiblings
    wh.addClass = addClass

    wh.getSibling(item3)//調用getSibling方法
    wh.addClass(item3,{'red':true,'blue':false})//調用addClass方法

命名空間的好處：1、有一個庫的名字 2、避免全局變量覆蓋

上述代碼可變?yōu)椋?/p>

    window.wh = {}
    wh.getSibling = function (a) {
      var allitem = a.parentNode.children;
      var array = {length:0};
      for(var i=0;i<allitem.length;i++){
        if(allitem[i] !== a ){
          array[array.length] = allitem[i]
          array.length += 1;
        }
      }
      return array;
    }
    wh.addClass = function (node,classes){
      classes.forEach((value) => node.classList.add(value));
//      classes.forEach(function (item) {
//        node.classList.add(item)
//      })
    }
    wh.addClass(item2,['red','blue']);

命名空間的缺點：每次都要調一次庫

3、變形

換一種調用方式：

node.getSiblings()
node.addClass()

• 方法一：擴展 Node 接口

直接在 Node.prototype 上加函數(shù)
小例子：

Node.prototype.getSiblings = function(){
  return 1
}
console.log(item3.getSibling());//1
console.dir(item3)//原型中有getSiblings()方法
即可以用
item3.getSibling()直接獲取函數(shù)

上述例子可變形為：

    Node.prototype.getSibling = function () {
      var allChildren = this.parentNode.children; //this即調用函數(shù)的item3
      var array = {length:0}
      for(var i = 0;i<allChildren.length;i++){
        if(allChildren[i] !== this){
          array[array.length] = allChildren[i];
          array.length += 1;
        }
      }
      return array
    }
    console.log(item3.getSibling());//除item3的所有item
    //等價：console.log(item3.getSibling.call(item3));//call的第一個參數(shù)即this

    Node.prototype.addClass = function (classes) {
      classes.forEach( (item) => this.classList.add(item) )
    }
    item3.addClass(['red']);//id為item3的li標簽字體顏色變紅
   //等價： item3.addClass.call(item3,['red']);

強調：this是call的第一個參數(shù)

• 方法二：新的接口 BetterNode

上述例子可變形為：

    window.Node2 = function (node) {
      return{
        getSibling:function () {
          var allChildren = node.parentNode.children;
          var array = {length:0}
          for(var i = 0;i<allChildren.length;i++){
            if(allChildren[i] !== node){
              array[array.length] = allChildren[i];
              array.length += 1
            }
          }
          return array
        },
        addClass:function (classes) {
          classes.forEach((className) => {node.classList.add(className)})
        }
      }
    }
    var node2 = Node2(item3);
    console.log(node2.getSibling());//除item3的所有l(wèi)i
    node2.addClass(['red']);//item3字體變紅

改進：
接收多個node

 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){
        node = {0:nodeOrSelector,length:0}
      }
      nodes.getSiblings = function () {}
      nodes.addClass = function (classes) {
        classes.forEach((value) => {
            for(let i= 0;i<nodes.length;i++){
              nodes[i].classList.add(value)
            }
        })
      }
      //獲取文本
      nodes.getText = function () {
        var texts = [];
        for(let i=0;i<nodes.length;i++){
          texts.push(nodes[i].textContent);
        }
        return texts;
      }
      //設置文本
      nodes.setText = function (text) {
        for(var i = 0;i<nodes.length;i++){
          nodes[i].textContent = text
        }
      }
      //合并方法 獲取或者設置文本
      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(var i = 0;i<nodes.length;i++){
            nodes[i].textContent = text
          }
        }
      }
      return nodes;
    }
    var node2 = jQuery('ul>li');
    node2.addClass(['red']);//調用DOM api
    console.log(node2.getText());// [ "選項1", "選項2", "選項3", "選項4", "選項5" ]
    node2.setText('hello');
    node2.text('hi');
    console.log( node2);//0:li 1:li ... addClass:f ...
    console.log(node2[0]);//第一個li
    //nodes;//閉包 操作一個訪問不到的變量
    //jQuery是一個函數(shù)
    //node2是函數(shù)的返回值

完成了一個簡單的js封裝方法