国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

可想實(shí)現(xiàn)一個(gè)自己的簡單jQuery庫？（一）

Ilikewhite / 3019人閱讀

摘要：前言雖然說市面上有許多講解源碼或者是也有類似如何搭建一個(gè)屬于自己的庫的文章。但畢竟更多數(shù)人的水平并沒有達(dá)到單純看源碼解析就能讀懂如果你既不能通過書籍視頻和他人文章的源碼解析明白，也想自己實(shí)現(xiàn)一個(gè)的。

前言 
1.雖然說市面上有許多講解jQuery源碼或者是也有類似如何搭建一個(gè)屬于自己的javascript庫的文章。
2.但畢竟更多數(shù)人的水平并沒有達(dá)到單純看源碼解析就能讀懂jQuery
3.如果你既不能通過書籍視頻和他人文章的源碼解析明白jQuery，也想自己實(shí)現(xiàn)一個(gè)jQuery的。
4.本系列就是以一些不同的方法手段，簡單的代碼，實(shí)現(xiàn)了一套與jQuery一樣的API
5.最后在每篇文章的最后會留下github源碼地址，希望能得到大家star的認(rèn)可與支持，謝謝。
Lesson-0

首先第一個(gè)版本,我們要先了解搭建一個(gè)庫或者是一個(gè)給別人使用的小插件應(yīng)該用一種什么樣的格式.

首先我們需要創(chuàng)建一個(gè)閉包

(function()){
    //code..
}();

然后將我們所需要的代碼和邏輯都寫在里面避免全局變量的泛濫.

接著我們來看看我們第一版里的代碼.

(function(window,document) {
    var w = window,
        doc = document;
    var Kodo = function(selector) {
        return new Kodo.prototype.init(selector);
    }
    Kodo.prototype = {
        constructor : Kodo,
        length : 0,
        splice: [].splice,
        selector : "",
        init : function(selector) {//dom選擇的一些判斷

        }
    }
    Kodo.prototype.init.prototype = Kodo.prototype;

    Kodo.ajax = function() { //直接掛載方法  可k.ajax調(diào)用
        console.log(this);
    }

    window.f = Kodo;
})(window,document);

我創(chuàng)建了一個(gè)閉包,傳入了window,document并且在內(nèi)部將他們緩存起來.

接著

var kodo = function(selector) {
    return new Kodo.prototype.init(selector);
}

如果有看過jQuery源碼的童鞋對這個(gè)真是在了解不過了.每次用kodo調(diào)用的時(shí)候,將直接 返回一個(gè)kodo的實(shí)例.達(dá)到無new調(diào)用的效果

Kodo.prototype = {
    constructor : Kodo,
    length : 0,
    splice: [].splice,
    selector : "",
    init : function(selector) {//dom選擇的一些判斷

    }
}
Kodo.prototype.init.prototype = Kodo.prototype;

接著重點(diǎn)就在于如何去構(gòu)造Kodo的prototype的原型了.在這上面的屬性也就相當(dāng)于是jQuery的實(shí)例方法和屬性.所以每次$()后都能鏈?zhǔn)秸{(diào)用.

由于我們是return new Kodo.prototype.init,那自然,我們需要手動的把init的prototype指向Kodo的prototype

同時(shí)我們在原型上具有splice屬性后,我們的對象就會變?yōu)榱艘粋€(gè)類數(shù)組對象,神奇吧!

Kodo.ajax = function() { //直接掛載方法  可f.ajax調(diào)用
    console.log(this);
}

由于javascript中一切皆對象,所以我們能在我們的Kodo上直接用.XXX來賦予新的屬性和方法,這樣的方法也被稱之為靜態(tài)方法.

window.f = Kodo;

最后我們在window上對外暴露一個(gè)接口,我們就可以愉快的用 f.ajax 或者是 f("#id")即可調(diào)用.

github：https://github.com/MeCKodo/forchange/tree/master/lesson-0

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86194.html

相關(guān)文章

  • 可想實(shí)現(xiàn)一個(gè)自己的簡單jQuery庫？(三)

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

    xiaoxiaozi 評論0 收藏0

  • 可想實(shí)現(xiàn)一個(gè)自己的簡單jQuery庫？(八)

    摘要：兼容性簡直神器有木有所以我們寫一個(gè)這樣的方法吧實(shí)現(xiàn)操作然后只需要傳對應(yīng)參數(shù)就好了如此簡單接著是方法在這我只做刪除自身節(jié)點(diǎn)就沒繼續(xù)拓展了大家可以自行完善只能刪除自身您給予的就是給代碼賦予靈魂地址可想實(shí)現(xiàn)一個(gè)自己的簡單庫七 Lesson-7 新增 html,append,before,after,remove html: function (value) { if (value ...

    X_AirDu 評論0 收藏0

  • 可想實(shí)現(xiàn)一個(gè)自己的簡單jQuery庫？(八)

    摘要：兼容性簡直神器有木有所以我們寫一個(gè)這樣的方法吧實(shí)現(xiàn)操作然后只需要傳對應(yīng)參數(shù)就好了如此簡單接著是方法在這我只做刪除自身節(jié)點(diǎn)就沒繼續(xù)拓展了大家可以自行完善只能刪除自身您給予的就是給代碼賦予靈魂地址可想實(shí)現(xiàn)一個(gè)自己的簡單庫七 Lesson-7 新增 html,append,before,after,remove html: function (value) { if (value ...

    cnsworder 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<