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')