一个简单的手写jquery
let $ = jQuery = (function () {
    // 伪构造函数,用于jquery对象
    function construct(dom, selector) {
        let i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++)
            this[i] = dom[i]
        this.length = len
        this.selector = selector
        return this;
    }
    // jQuery函数返回的对象类型
    function X(elements, selector) {
        return construct.call(this, elements, selector)
    }
    // 添加一些原型方法
    X.prototype = {
        // 用于遍历对象中的dom树
        each(callback) {
            Array.prototype.forEach.call(this, function (el, index) {
                callback.call(this, index, el)
            })
        },
        find(selector) {
            let doms = [];
            this.each(function (index, el) {
                let childs = el.querySelectorAll(selector);
                doms.push(...childs);
            })
            return new X(doms, selector)
        },
        eq(i) {
            let doms = [];
            this.each(function (index, el) {
                if (i === index) {
                    doms.push(this);
                }
            })
            return new X(doms, this.selector)
        },
        remove() {
            this.each(function (index, el) {
                this.remove();
            })
        }
    }
    function $(selector) {
        let doms = document.querySelectorAll(selector)
        return new X(doms, selector)
    }
    // 静态方法
    function isFunction(value) { return typeof value === 'function' }
    $.isFunction = isFunction;
    return $;
})()
本文来自博客园,作者:Bin_x,转载请注明原文链接:https://www.cnblogs.com/Bin-x/p/16028694.html
                    
                
                
            
        
浙公网安备 33010602011771号