JS之框架封装篇仿jQuery——$(selector).css(name,value)

最新推荐文章于 2022-05-04 08:30:07 发布

原创最新推荐文章于 2022-05-04 08:30:07 发布 · 717 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何一步一步地仿照jQuery框架，实现$(selector).css(name,value)的功能。从模块化开始，逐步完善选择器功能，优化css方法，支持多个方法调用，并将init方法整合进jQuery，最终形成一个完整的jQuery风格的函数库。" 132052508,8753399,JavaScript实现打格点算法,"['JavaScript', '算法', '开发语言']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步先搭个架子( 模块化，外部只能访问到$、jQuery)

(function(global){
    function jQuery(){
    }
    //即window.jQuery = window.$ = jQuery;
    global.jQuery = global.$ = jQuery;
})(window)

第二步传入选择器

(function(global){
    function jQuery(selector){
        let elements = document.querySelectorAll(selector);
        elements.css =function(){};
        //这样的写法导致每次调用$()，都会产生css方法，造成内存的浪费。
        return elements;
    }
    global.jQuery = global.$ = jQuery;
})(window)

第三步整理css方法，并对第二种方式进行优化

(function(global){
    function jQuery(selector){
        return new init(selector);
    }
    function init(selector){
        let elements = document.querySelectorAll(selector);
        this.eles = elements;
    }
    init.prototype.css = function(name,value){
        for(let i=0; i<this.eles.length; i++){
            let ele = this.eles[i];
            ele.style[name] = value;
        }
    }
    global.jQuery = global.$ = jQuery;
})(window)

这样看上去就好多了，但是还是有问题的。因为我们在使用jQuery时，不仅css一个方法的。

第四步优化，使其可以访问多个方法。

(function(global){
    function jQuery(selector){
        return new init(selector);
    }
    function init(selector){
        let elements = document.querySelectorAll(selector);
        for(let i=0; i<elements.length;i++){
            this[i] = elements[i];
        }
        //将获取的DOM元素都添加到对象本身
        this.length = elements.length;
    }
    init.prototype = {
        constructor: init,
        css (name,value){
            for(let i=0; i<this.length; i++){
                let ele = this[i];
                ele.style[name] = value;
            }
        }
    }
    global.jQuery = global.$ = jQuery;
})(window)

第五步把init方法放入jQuery中

(function(global){
    function jQuery(selector){
        return jQuery.prototype.init(selector);
    }
    jQuery.prototype = {
        constructor: jQuery,
        init:function(selector){
            let elements = document.querySelectorAll(selector);
            for(let i=0; i<elements.length;i++){
                this[i] = elements[i];
            }
            this.length = elements.length;
        },
        css (name,value){
            for(let i=0; i<this.length; i++){
                let ele = this[i];
                ele.style[name] = value;
            }
        }
    }
    //让init的原型等于jQuery的原型，这样init就可以访问到jQuery.prototype下的css方法。
    jQuery.prototype.init.prototype = jQuery.prototype;
    global.jQuery = global.$ = jQuery;
})(window)

第六步最终形式（给jQuery添加一个fn属性）

(function(global){
    function jQuery(selector){
        return jQuery.fn.init(selector);
    }
    jQuery.fn = jQuery.prototype = {
        constructor: jQuery,
        init:function(selector){
            let elements = document.querySelectorAll(selector);
            for(let i=0; i<elements.length;i++){
                this[i] = elements[i];
            }
            this.length = elements.length;
        },
        css (name,value){
            for(let i=0; i<this.length; i++){
                let ele = this[i];
                ele.style[name] = value;
            }
        }
    }
    jQuery.fn.init.prototype = jQuery.fn;
    global.jQuery = global.$ = jQuery;
})(window)