自己撸一个jQuery

呐，来研究一下jQuery的实现原理，自己撸一个简单版的来一试究竟吧！

选取元素

按照我们使用jQuery的使用步骤来一步步研究实现，所以，第一步当然就是从选取元素开始了。

window.jQuery = function(nodeOrSelector) {
    let nodes = {};
    if (typeof nodeOrSelector === 'string') {
       nodes = document.querySelectorAll(nodeOrSelector) //获取伪数组
    } else if (nodeOrSelector instanceof Node) {
        // 为了保证都是伪数组统一操作方式
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }
    return nodes
}

不过我们在通过nodelist = document.querySelectorAll(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.length = temp.length
    } else if (nodeOrSelector instanceof Node) {
        // 为了保证都是伪数组统一操作方式
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }
    return nodes
}

自定义API

实现addclass

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.length = temp.length
    } else if (nodeOrSelector instanceof Node) {
        // 为了保证都是伪数组统一操作方式
        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
}

实现setText

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.length = temp.length
    } else if (nodeOrSelector instanceof Node) {
        // 为了保证都是伪数组统一操作方式
        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
}

实现快捷使用自定义库

window.$ = jQuery