可想實現一個自己的簡單jQuery庫？（一）

Ilikewhite 發布于2019-08-21 10:47 / 3027人閱讀

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

前言

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

Lesson-0

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

首先我們需要創建一個閉包

(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調用
        console.log(this);
    }

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

我創建了一個閉包,傳入了window,document并且在內部將他們緩存起來.

接著

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

如果有看過jQuery源碼的童鞋對這個真是在了解不過了.每次用kodo調用的時候,將直接返回一個kodo的實例.達到無new調用的效果

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

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

接著重點就在于如何去構造Kodo的prototype的原型了.在這上面的屬性也就相當于是jQuery的實例方法和屬性.所以每次$()后都能鏈式調用.

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

同時我們在原型上具有splice屬性后,我們的對象就會變為了一個類數組對象,神奇吧!

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

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

window.f = Kodo;

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

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

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

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

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

可想實現一個自己的簡單jQuery庫？(三)

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

xiaoxiaozi 2019-08-21 10:48 評論0 收藏0
可想實現一個自己的簡單jQuery庫？(八)

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

cnsworder 2019-08-01 14:55 評論0 收藏0
可想實現一個自己的簡單jQuery庫？(八)

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

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