jQuery不过如此

getSibiings()

1. 定义一个伪数级，是一个对象，里面有length
2. 遍历parentNode.children，如果不是自己，那么加入到这个伪数级中，并length + 1

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

    return array
}

addClass()

1. 遍历classes
2. 每次访问key，如果对应的值是false，则移除，如果是true，则添加

let classes = {
    a: true,
    b: false,
    c: true
}

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

优化if-else

1. 根据isExist值去获取要调用的方法
2. 用变量存放方法的名字，再去调用对应的方法

function addClass(node, classes) {
    for (let key in classes) {
        let isExist = classes[key]

        let methodName = isExist ? 'add' : 'remove'

        node.classList[methodName](key)
    }
}

命名空间

使用

• 放在同一个对象中

window.xQuery = {}

xQuery.getSiblings = getSiblings
xQuery.addClass = addClass

yui

一个著名的库yui就是用上面的方法，但是有更好的方法来用，如

getSiblings(node)
=>
node.getSiblings()

prototype

• 在Node.prototype里去改getSiblings()
• 使用 this 来代表 node

Node.prototype.getSiblings = function() {
    let allChildren = this.parentNode.children
    let array = {length: 0}
    for (let i = 0; i < allChildren.length; i++) {
        if (allChildren[i] !== this) {
            array[array.length] = allChildren[i]
            array.length = array.length + 1
        }
    }

    return array
}

item3.getSiblings()
item3.addClasses({a: true})

创造一个新Node API

• 创造一个更好的Node
• 提前将node传入了，以后就不再需要传入了
• 不再需要 xQuery.getSiblings(node)，而是node.getSiblings()
• 这就是原jQuery的原理，接收一个旧的节点，返回一个新的节点，这个新的节点有新的API

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

            return array
        },
        addClass: function(classes) {
            for (let key in classes) {
                let isExist = classes[key]
                let methodName = isExist ? 'add' : 'remove'

                node.classList[methodName](key)
            }
        }
    }
}

// 封装
let node = xQuery(item3)

console.log(node.getSiblings())
node.addClass({a: true, b: false, c: true})

闭包

node在函数中用到了外面的node，只要用到 getSiblings()和addClass()node就不会消失

多个节点的操作

• 都是返回伪数组，如果只有一个元素，那么就是{0: node, length: 1}
• 要做类型判断

window.xQuery = function (nodeOrSelector) {
    let nodes = null
    if (typeof nodeOrSelector === 'string') {
          let temp = []
          temp = document.querySelectorAll(nodeOrSelector)
          temp.forEach((node, index) => {
              nodes[index] = node
          })
          nodes.length = temp.length
    }
    else if (nodeOrSelector instanceof Node) {
        nodes = {0: nodeOrSelector, length: 1}
    }

    nodes.getSiblings = function () { }

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

    return nodes
}

let node = xQuery('ul > li')
node.addClass(['blue'])

合并函数text()

nodes.text = function (text) {
    if (text) {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text
        }
    }
    else {
        let texts = []
        for (let i = 0; i < nodes.length; i++) {
            texts.push(nodes[i].textContent)
        }

        return texts
    }
}