一个简单的手写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 $;
})()

 

posted @   Bin_x  阅读(84)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示