吶，來(lái)研究一下jQuery的實(shí)現(xiàn)原理，自己擼一個(gè)簡(jiǎn)單版的來(lái)一試究竟吧！

選取元素

按照我們使用jQuery的使用步驟來(lái)一步步研究實(shí)現(xiàn)，所以，第一步當(dāng)然就是從選取元素開(kāi)始了。

window.jQuery = function(nodeOrSelector) {
    let nodes = {};
    if (typeof nodeOrSelector === 'string') {
       nodes = document.querySelectorAll(nodeOrSelector) //獲取偽數(shù)組
    } else if (nodeOrSelector instanceof Node) {
        // 為了保證都是偽數(shù)組統(tǒng)一操作方式
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }
    return nodes
}

不過(guò)我們?cè)谕ㄟ^(guò)nodelist = document.querySelectorAll(nodes)獲取元素的時(shí)候會(huì)發(fā)現(xiàn)一點(diǎn)小問(wèn)題，那就是獲取到的偽數(shù)組原型鏈可能會(huì)有點(diǎn)復(fù)雜，所以在這里我們可以做一個(gè)小小的優(yōu)化。

window.jQuery = function(nodeOrSelector) {
    let nodes = {};
    if (typeof nodeOrSelector === 'string') {
        let temp = document.querySelectorAll(nodeOrSelector) //獲取偽數(shù)組
        for (let i = 0; i < temp.length; i++) {
            nodes[i] = temp[i]
        }
        nodes.length = temp.length
    } else if (nodeOrSelector instanceof Node) {
        // 為了保證都是偽數(shù)組統(tǒng)一操作方式
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }
    return nodes
}

自定義API

實(shí)現(xiàn)addclass

window.jQuery = function(nodeOrSelector) {
    let nodes = {};
    if (typeof nodeOrSelector === 'string') {
        let temp = document.querySelectorAll(nodeOrSelector) //獲取偽數(shù)組
        for (let i = 0; i < temp.length; i++) {
            nodes[i] = temp[i]
        }
        nodes.length = temp.length
    } else if (nodeOrSelector instanceof Node) {
        // 為了保證都是偽數(shù)組統(tǒng)一操作方式
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }

    nodes.addClass = function(classes) {
        if (typeof classes === "string") {
            classes = classes.split(',')  //
        }
        Array.prototype.forEach.call(classes, (value) => {
            for (let i = 0; i < nodes.length; i++) {
                nodes[i].classList.add(value)
            }
        })
    }
    return nodes
}

實(shí)現(xiàn)setText

window.jQuery = function(nodeOrSelector) {
    let nodes = {};
    if (typeof nodeOrSelector === 'string') {
        let temp = document.querySelectorAll(nodeOrSelector) //獲取偽數(shù)組
        for (let i = 0; i < temp.length; i++) {
            nodes[i] = temp[i]
        }
        nodes.length = temp.length
    } else if (nodeOrSelector instanceof Node) {
        // 為了保證都是偽數(shù)組統(tǒng)一操作方式
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }

    nodes.addClass = function(classes) {
        if (typeof classes === "string") {
            classes = classes.split(',')  //
        }
        Array.prototype.forEach.call(classes, (value) => {
            for (let i = 0; i < nodes.length; i++) {
                nodes[i].classList.add(value)
            }
        })
    }

    nodes.setText = function(text) {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text
        }
    }
    return nodes
}

實(shí)現(xiàn)快捷使用自定義庫(kù)

window.$ = jQuery