可想實現一個本身的簡單jQuery庫？（一）

前言

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