媒介

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