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

ivan_qhz 發布于2019-08-19 17:05 / 1478人閱讀

摘要：新增事件部分講完了后我們最后實現個方法關于就常用的就種一個是取值一個是賦值我們通過判斷的個數是取值還是賦值賦值很容易我們就用最簡單的辦法直接設置如果是取值那我們就要做個判斷因為和的取法是不一樣的還有一種可能性是當元素的為的時候直接取是取不

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

云服務器 GPU云服務器完結篇 js實現的簡單特效怎么搭建一個自己的視頻網站如何搭建一個自己的服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78184.html

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

摘要：新增事件部分講完了后我們最后實現個方法關于就常用的就種一個是取值一個是賦值我們通過判斷的個數是取值還是賦值賦值很容易我們就用最簡單的辦法直接設置如果是取值那我們就要做個判斷因為和的取法是不一樣的還有一種可能性是當元素的為的時候直接取是取不 Lesson-11 新增width,height,extend 事件部分講完了后,我們最后實現3個方法. width : function(w) ...

joyqi 2019-08-01 14:57 評論0 收藏0
JavaScript專題系列20篇正式完結！

摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發布第一篇文章，到月日發布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發中一些功能點的實現，比如防抖、節流、去重、類型判斷、拷貝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 評論0 收藏0
可想實現一個自己的簡單jQuery庫？(三)

摘要：這個版本新增這個選擇元素的方法還是比較常用的首先我們需要一個來過濾我們需要的上面那段比較簡單就是普通的過濾下元素看下方法的源碼就知道我傳入數組對象的個對象然后取它的下一個同輩元素直接返回方法同理這段是取到第一個父元素由于返回的不是原生的對 Lesson-2 這個版本新增 next(),prev(),parent(),parents() 這4個選擇元素的方法還是比較常用的首先我們需要...

xiaoxiaozi 2019-08-21 10:48 評論0 收藏0