07-jQuery初试封装函数

一、封装两个函数

---

相关内容：

<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. 需求：获取到一个节点的兄弟姐妹，并放到一个伪数组里。

document.body.nextElementSibling
//获取节点的弟弟
document.body.previousElementSibling
//获取节点的哥哥

初步思路：

var allChildren = item3.parentNode.chiledren //获取节点的所有兄弟姐妹
var array = {length:0} //创建一个空对象
for(let i = 0; i < alllChildren.length; i++){ //遍历
  if(allChildren[i] !== item3){
    array[array.length] = allChildren[i]
    array.length += 1
  }
}
console.log(array) //{0:li#itme1, 1:li#itme2, 2:li#itme4, 3:li#itme5, length: 4}

• 为什么array[array.length]中用array.length不用i，因为它中间有可能跳过一个，跳过之后序号就不一致
• 为什么不用push？因为这是一个伪数组（伪数组就是哈希）。

封装函数：function 起个好用又好听的名字(){}

function getSiblings(node){ //外部输入一个节点 API
  var allChildren = node.parentNode.chiledren //获取节点的所有兄弟姐妹
  var array = {length:0} //创建一个空对象
  for(let i = 0; i < alllChildren.length; i++){ //遍历
    if(allChildren[i] !== node){
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
retuen array
}
console.log(getSiblings(item3))  //{0:li#itme1, 1:li#itme2, 2:li#itme4, 3:li#itme5, length: 4}

2. 需求：给节点添加class，既能add也能remove。

初步思路：

item3.classList.add('a')
item3.classList.add('b')
item3.classList.add('c')

var classes = ['a', 'b', 'c']
classes.forEach((value) => item3.classList.add(value))

var classes = {'a':ture, 'b':false, 'c':ture}
var value = classes[key]
for(let key in classes){
  if(value){
    item3.classList.add(key)
  }else{
    item3.classList.remove(key)
}

封装函数：

function addClass(node,classes){ //classes有使用者提供
  var value = classes[key]
  for(let key in classes){
    if(value){
      node.classList.add(key)
    }else{
      node.classList.remove(key)
  }
}
用法： addClass（item3, {'a':ture, 'b':false, 'c':ture}）

优化代码：

function addClass(node,classes){
  var value = classes[key]
  for(let key in classes){
    var methodName = value ? 'add':'remove'
    node.Classlist[methodName](key)
  } 
}

优化守则：

• 如果出现类似的代码，就存在优化的可能。

3. 需求：有什么办法让别人知道这两个API有关联性，因为这两个API都是在操作节点

命名空间：

window.ffdom = {}
ffdom.getSibilings = getSiblings
ffdom.addClass = addClass

ffdom.getSibilings(item3)
ffdom.addClass（item3, {'a':ture, 'b':false, 'c':ture}）

不命名空间的缺点：

• 别人不知道你的库叫什么
• 不知不觉把全局变量覆盖

4. 需求：我想写成item.getSibilings

Node.prototype.getSibilings = function(){
  var allChildren = this.parentNode.chiledren 
  var array = {length:0} 
  for(let i = 0; i < alllChildren.length; i++){
    if(allChildren[i] !== this){
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  retuen array
}
Node.prototype.addClass = function(classes){
  var value = classes[key]
  for(let key in classes){
    var methodName = value ? 'add':'remove'
    this.Classlist[methodName](key)
  } 
}
console.log(item3.getSiblings（）) //{0:li#itme1, 1:li#itme2, 2:li#itme4, 3:li#itme5, length: 4}

• 因为我们篡改了所有Node的公有属性，添加了一个getSiblings的方法。
• this就是.前面的东西（这里就是item3）
• 调用call

item3.getSiblings.call（item3）

• 我自己写一个更好的Node2版本，用新的版本去调用第一个版本