来，模仿个jQuery

想要看看：jQuery到底是什么

尝试封装个函数

<ul>
  <li id="items1">选项1</li>
  <li id="items2">选项2</li>
  <li id="items3">选项3</li>
  <li id="items4">选项4</li>
  <li id="items5">选项5</li>
</ul>

function getSibling(node){
  var child = node.parentNode.children

  var array = {length:0}
  for(var i=0;i<child.length;i++){
    if(child[i] !== node){
    array[array.length] = child[i]
    array.length +=1
  }
 }
  return array
}
console.log(getSibling.call(undefined,items1))

封装一个可以加类的函数：

function addClass(node,classes){
  for(var key in classes){
  if(classes[key]){
    node.classList.add(key)
  }else{
    node.classList.remove(key)
  }
 }
}

addClass(items2,{'a':true,'b':false,'c':true})

//代码优化
function addClass(node,classes){
  for(var key in classes){
    var value = classes[key]
    var method = value ? 'add' : 'remove'
    node.classList[method](key)
 }
}

来搞一个命名空间（就是起个名字，方便用）

window.hhDom = {}
hhDom.getSibling = function(node){
  var child = node.parentNode.children

  var array = {length:0}
  for(var i=0;i<child.length;i++){
    if(child[i] !== node){
    array[array.length] = child[i]
    array.length +=1
  }
 }
  return array
}

hhDom.addClass = function(node,classes){
  for(var key in classes){
    var value = classes[key]
    var method = value ? 'add' : 'remove'
    node.classList[method](key)
 }
}

测试：

hhDom.getSibling(items3)
hhDom.addClass(items3,{'a':true,'b':false,'c':true})

但是像上边这种，用起来不方便。能不能这样来用：

items3.getSibling()
items3.addClass({'a':true,'b':false,'c':true})

实现一：利用node原型链来实现：

注意其中this的用法

Node.prototype.getSibling = function(){
  var child = this.parentNode.children
  
  var array = {length:0}
  for(var i=0;i<child.length;i++){
    if(child[i] !== this){
    array[array.length] = child[i]
    array.length +=1
  }
 }
  return array
}

Node.prototype.addClass = function(classes){
  for(var key in classes){
    var value = classes[key]
    var method = value ? 'add' : 'remove'
    this.classList[method](key)
 }
}
//隐式指定this，this就是.getSibing前边的东西
items3.getSibling()
items3.addClass({'a':true,'b':false,'c':true})

//显式指定this,直接用call了
items3.getSibling.call(items3)
items3.addClass.call(items3,{'a':true,'b':false,'c':true})

实现二：

window.Node2 = function(node) {
  return {
    getSibling: function() {
      var child = node.parentNode.children

      var array = {
        length: 0
      }
      for (var i = 0; i < child.length; i++) {
        if (child[i] !== node) {
          array[array.length] = child[i]
          array.length += 1
        }
      }
      return array
    },
      addClass: function(classes){
      for (var key in classes) {
        var value = classes[key]
        var method = value ? 'add' : 'remove'
        node.classList[method](key)
      }
    }
  }
}

var node2 = Node2(items3)
node2.getSibling()
node2.addClass({'a':true,'b':false})

那么在这里，我们改下：

window.jQuery = function(nodeOrSelector) {
  var node
  if(typeof nodeOrSelector === 'string'){
    node = document.querySelector(nodeOrSelector)
  }else{
    node = nodeOrSelector
  }
  return {
    getSibling: function() {
      var child = node.parentNode.children

      var array = {
        length: 0
      }
      for (var i = 0; i < child.length; i++) {
        if (child[i] !== node) {
          array[array.length] = child[i]
          array.length += 1
        }
      }
      return array
    },
      addClass: function(classes){
      for (var key in classes) {
        var value = classes[key]
        var method = value ? 'add' : 'remove'
        node.classList[method](key)  //请问，这里node。其实就是一个闭包＝。＝
      }
    }
  }
}

var $ = jQuery('#items3')
$.getSibling()
$.addClass({'red':true})

这样就很眼熟了，像jquery，实际上，它也是给一个旧的api，返回一个新的api。

再来看一个例子，实现，批量的选择操作（将五个li都操作）

window.jQuery = function(nodeOrSelector) {
  var nodes = {}
  if (typeof nodeOrSelector === 'string') {
    var 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
    }
  }

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

  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
      }
    }
  }

  return nodes
}
var node2 = jQuery('ul>li')
node2.addClass(['blue'])
console.log(node2.text())
node2.text('hi')

使用建议：使用===或者!==，不要使用==或!=
优化建议：如果存在类似的代码，就可以试着优化
debug：....删除看。。。。
饥人谷上课笔记