JQ编程原理

案例:给元素添加自定义方法
普通写法:

    // 1.封装自执行函数给上面元素添加颜色的方法
         (function(globel){
            function Libary(selector,color){
                let elements=document.getElementsByTagName(selector);
                for (let index = 0; index < elements.length; index++) {
                    elements[index].style['color']=color;
                }    
            }
            // HTMLCollection.prototype.css=function(color){//HTMLCollection是一个函数,直接在共用的原型里添加方法会造成全局污染,不推荐使用
            //     console.log(11);
            // }
            globel.$=globel.Libary=Libary;//后面直接可以通过$或者Libary调用
        })(window)
            
        $("div",'red') 

采用对象原型方式写法:只加到对象的原型中,避免了全局污染

        // 改进版:使用对象原型的方式,避免全局污染
        (function (global) {
                function Libary(selector) {//对象
                    return new Fn(selector)
                }
                function Fn(selector) {//构造函数
                    var elements = document.querySelectorAll(selector)
                    this.elements = elements //往调用的对象中添加了elements属性,赋值了它的数组集合    
                }
                Fn.prototype.css=function(name,color){//往原型中添加css方法
                    for (let index = 0; index < this.elements.length; index++) {
                        this.elements[index].style[name]=color;
                    }
                }
                 // 这里可以继续写方法
                Fn.prototype.marry=function(){
                    console.log("其它方法");
                }
                global.$ = global.Libary = Libary
            }

        )(window)
        $('div').css('color','red')

上面如果使用$(‘div’)[0]找第一个元素的话是undefined,原因(可以看下图)在于我们把所有元素对象添加到对象的element属性上去了

解决办法是将它绑定在最外层对象上即可,方法如下:

     // 改进版,效果不变
        (function (global) {
                function Libary(selector) {//对象
                    return new Fn(selector)
                }
                function Fn(selector) {//构造函数
                    var elements = document.querySelectorAll(selector)
                    for (let index = 0; index < elements.length; index++) {
                      this[index] = elements[index];
                    } 
                    this.length=elements.length//要加,不然下面循环找不到
                    // console.log(this);//元素对象,键是0,1,2
                }
                Fn.prototype.css=function(name,color){//往原型中添加css方法
                    // console.log(this.length);
                    for (let index = 0; index < this.length; index++) {
                        this[index].style[name]=color;
                    }
                }
                // 这里可以继续写方法
                Fn.prototype.marry=function(){
                    console.log("其它方法");
                }
                global.$ = global.Libary = Libary
            }

        )(window)
        $('div').css('color','red')

上面多个方法这样写会有点累,所以我们可以直接用原型对象的方式来写,方法如下:

        (function (global) {
                function Libary(selector) { //对象
                    return new Fn(selector)
                }

                function Fn(selector) { //构造函数
                    var elements = document.querySelectorAll(selector)
                    for (let index = 0; index < elements.length; index++) {
                        this[index] = elements[index];
                    }
                    this.length = elements.length //要加,不然下面循环找不到
                    // console.log(this);//元素对象,键是0,1,2
                }
                Fn.prototype = {
                    constructor: Fn, //最好指定一下它的构造函数是Fn不指定的话可能指向Object
                    css(name, color) { //往原型中添加css方法
                        // console.log(this.length);
                        for (let index = 0; index < this.length; index++) {
                            this[index].style[name] = color;
                        }
                    },
                    // 这里可以继续写方法
                    marry() {
                        console.log("其它方法");
                    }
                }
                global.$ = global.Libary = Libary
            }

        )(window)
        $('div').css('color', 'red')