可想實現一個自己的簡單jQuery庫？(十二，完結篇)

二哲發表於2015-11-24
jQuery

Lesson-11

新增width,height,extend

事件部分講完了後,我們最後實現3個方法.

width : function(w) {
    if(arguments.length == 1) {
        for (var i = 0; i < this.length; i++) {
            this[i].style.width = w + `px`;
        }
    } else {
        if (this[0].document === doc ) {
            return this[0].innerWidth;
        } else if (this[0].nodeType === 9 ){
            return document.documentElement.clientWidth;
        } else {
            return parseInt(getComputedStyle(this[0],null)[`width`]);
        }
    }
},

關於width(),height()就常用的就2種,一個是取值,一個是賦值.

我們通過判斷arguments的個數,是取值還是賦值.

賦值很容易,我們就用最簡單的辦法,直接設定.

如果是取值,那我們就要做個判斷,因為window,和document的取法是不一樣的.

還有一種可能性是,當dom元素的display為none的時候,直接取是取不到的.在這我就不做處理了.大家思考一下可以自己嘗試.

思路是把dom設定為position:absolute;visible:hidden;然後取,在設定回去.

同理height方法也是如此.我就直接給出程式碼了

height : function(h) {
    if(arguments.length == 1) {
        for (var i = 0; i < this.length; i++) {
            this[i].style.height = h + `px`;
        }
    } else {
        if(this[0].document === doc ) {
            return this[0].innerHeight;
        } else if (this[0].nodeType === 9 ){
            return document.documentElement.clientHeight;
        } else {
            return parseInt(getComputedStyle(this[0],null)[`height`]);
        }
    }
}

兩者幾乎相同只是改了API,其實完全可以封裝為一個方法複用.

jQuery之所以那麼廣受大眾所愛,還一個非常重要的就是他的extend方法.如果沒有了他,將不會有現在那麼多jQuery外掛的誕生

在此,我們就實現一個非常簡單的淺拷貝.(然而jQuery的extend非常強大)

Kodo.prototype.extend = Kodo.extend = function() {
    var options = arguments[0];
    for( var i in options) {
        this[i] = options[i];
    }
};

這個方法我們不僅要能擴充靜態方法,也要能擴充例項方法.

所以 Kodo.prototype.extend = Kodo.extend = 直接這樣寫了.

裡面內容過於簡陋就不過多講解了 ?

然後我們就能這樣擴充我們的外掛了

f.prototype.extend({  //例項方法
    alert : function(msg) {
        alert(msg)
    }
});
f.extend({ //靜態方法
    alert : function(msg) {
        alert(msg)
    }
});

f.alert(`123`);//呼叫
f("div").alert(`123`);//呼叫

其實jQuery還有很多別的部分,比如佇列,動畫,非同步.都是一些非常值得自己去實踐嘗試的.

但至此,我們的小輪子基本也就完結了

另外的手勢番外篇,本想直接整合在這裡面.如果有大眾所需,我就繼續更下去

您連11節的課程都有耐心看完,何必不順手點下右上角的star呢? >.<

github地址: https://github.com/MeCKodo/forchange/tree/master/lessonn-11
可想實現一個自己的簡單jQuery庫？(十)：http://segmentfault.com/a/1190000004028806

相關文章