自己实现一个jQuery的API

关于对jQuery学习的帮助可以看方方老师的文章
jQuery都过时了，那我还学它干嘛
接下来我们自己来实现一个简版的jQuery对jQuery进行理解

一、封装两个函数

function getSiblings(node) {
    var allChildren = node.parentNode.children
    var siblings = {
        length: 0
    }
    for (let i = 0; i < allChildren.length; i++) {
        if (allChildren[i] !== node) {
            siblings[siblings.length] = allChildren[i]
            siblings.length += 1
        }
    }
    return siblings
} // 获得节点的兄弟元素

function addClass(node, classes) {
    for (let key in classes) {
        var value = calsses[key]
        var methodName = value ? 'add' : 'remove'
        node.classList[methodName](key)
        // if(value) {
        //     node.classList.add(key)
        // } else {
        //     node.classList.remove(key)
        // }
    }
}// 给某个节点添加class 

二 、命名空间

命名空间是一种设计模式，将不同的函数封装在函数库中并给函数库命名。有两个主要好处
1.是知道库的名字方便调用
2.避免覆盖全局变量，发生标识符冲突

//命名空间封装为函数库 1.知道库的名字 2.避免覆盖全局变量
window.dddom = {}
dddom.getSiblings = getSiblings
dddom.addClass = addClass
dddom.getSiblings(item3)
window.dddom = {}
dddom.getSiblings = function (node) {
    var allChildren = node.parentNode.children
    var siblings = {
        length: 0
    }
    for (let i = 0; i < allChildren.length; i++) {
        if (allChildren[i] !== node) {
            siblings[siblings.length] = allChildren[i]
            siblings.length += 1
        }
    }
    return siblings
}

三、能不能把node放在前面 Node+this

我们在调用函数时更喜欢这种方式node.getSiblings() node.addClass()而不是getSiblings(node) addClass(node, classes) 可以通过this实现，我们可以通过function.call()来查看具体实现过程，this为function.call()的第一个参数

1.方法一 ：扩展Node接口

直接在Node.prototype上加函数

/Node + this 
Node.prototype.getSiblings = function () {
    var allChildren = this.parentNode.children
    var siblings = {
        length: 0
    }
    for (let i = 0; i < allChildren.length; i++) {
        if (allChildren[i] !== this) {
            siblings[siblings.length] = allChildren[i]
            siblings.length += 1
        }
    }
    return siblings
}
item3.getSiblings()//隐式调用this
item3.getSiblings.call(item3) //显示指定this

Node.prototype.addClass = function (classes) {
    for (let key in classes) {
        var value = calsses[key]
        var methodName = value ? 'add' : 'remove'
        this.classList[methodName](key)
    }
}
item3.addClass({ a: true, b: false, c: true })
item3.addClass.call(item3,  { a: true, b: false, c: true }  )

虽然在Node.prototype上添加函数可以方便我们使用但是有很大的弊端，一是不同的人用相同的标识符，函数会相互覆盖，二说会对原有的 Node.prototype造成污染

2.方法二：在全局环境下创建新的接口BetterNode

这种为无侵入
比如改写为Node2

window.Node2 = function(nodeOrSelector) {
    let node //操纵一个节点
    if(typeof nodeOrSelector === 'string') {
        node = document.querySelector(nodeOrSelector)
    }else {
        node = nodeOrSelector
    } 
    return {
        getSiblings: function () {
            
            return siblings
        },
        addClass: function(classes) {
           
        }
    }
}
var node2 =Node2('#item3') //存的地址 node2为Node2构造的一个实例
node2.getSiblings()
node2.addClass({ a: true, b: false, c: true })

四、把Node2该个名字jQuery

window.jQuery = function(nodeOrSelector) {
    let node //操纵一个节点
    if(typeof nodeOrSelector === 'string') {
        node = document.querySelector(nodeOrSelector)
    }else {
        node = nodeOrSelector
    } 
    return {
        getSiblings: function () {
            var allChildren = node.parentNode.children
            var siblings = {
                length: 0
            }
            for (let i = 0; i < allChildren.length; i++) {
                if (allChildren[i] !== node) {
                    siblings[siblings.length] = allChildren[i]
                    siblings.length += 1
                }
            }
            return siblings
        },
        addClass: function(classes) {
            for (let key in classes) {
                var value = calsses[key]
                var methodName = value ? 'add' : 'remove';  
                node.classList[methodName](key)
            }
        }
    }
}

• jQuery就是一个升级的DOM，它接受一个元素，返回你一个新的对象，这个新的对象有新的API,
• 它们内部是怎么实现的呢？还是去调旧的DOMAPI,来打造jQuery对象的API比DOM的更好用。只不过一句话就相当于十句话，一个循环。
• 返回一个jQuery对象
• jQuery就是一个返回对象的函数
• 在实现jquery的过程中会用到闭包

五 、给个缩写alias 实现操作多个nodes

window.$ = jQuery
/
var node2 = jQuery('ul > li')
var $node2 = $('ul > li')

用$来表示jQuery,我们通常在变量名前加$表示这是由jQuery创建的对象。

实现操作多个nodes

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类型否则报错undefined
        }
        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) {
            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
            }
        }
    }// text() 不给参数为get 给参数为set
    return nodes
}
// 实例
var node2 = jQuery('ul > li')
var $node2 = $('ul > li')
$node2.addClass(['blue'])
var text = $node2.text()
$node2.text('hi')

jQuery将节点封伪数组 加几个API return出去一个jQuery对象。比如只给第一项添加class可以这样实现
node2[0].classList.add('blue') //封伪数组 加几个api return出去

一些常用的jQuery对象API

$nodes.toggleClass('red') //开关 切换 
$nodes.addClass
$nodes.addClass(function(index,currentClass){
    return 'c-' + index //return classes[index]
})

jQuery支持链式操作一大特点
$nodes.removeClass().addClass()//链式操作