手写实现JQ链式编程

349 阅读1分钟

链式编程的核心:

每次调用$()方法时会依据传入的选择器创建一个实例,该实例的属性包含利用选择器选择到的dom节点集合,该实例的构造函数原型上拥有各种方法,每次调用方法最后会返回自身这个实例。

代码

 (function(globle) {
        function selfJquery(selector) { //初始化函数,给这个库保留可扩展性
            let target = new testJq(selector);
            return target
        }

       function testJq(selector) { //构造器,每次调用selfJquery时会依据这个构造器创建实例
            if (selector.length <= 0) {
                throw Error('请传入选择器参数')
            }
            let eles = document.querySelectorAll(selector);
            this.eles = eles;
            this.ooo = 111;
        }
        testJq.prototype.css = function(styleName, styleValue) { //把css写在原型链而不是作为testJq的方法的原因是为了不让每个new 出来的testJq实例对象都包含一个重复的方法,节省内存
            for (let i = 0; i < this.eles.length; i++) {
                this.eles[i].style[styleName] = styleValue
            }
         return this
        }
        globle.$ = globle.selfJquery = selfJquery
    })(window)
    $('.box').css('color', 'red').css('color', 'blue')