可想实现一个自己的简单jQuery库？（一）

Ilikewhite 发布于2019-08-21 10:47 / 2901人阅读

摘要：前言虽然说市面上有许多讲解源码或者是也有类似如何搭建一个属于自己的库的文章。但毕竟更多数人的水平并没有达到单纯看源码解析就能读懂如果你既不能通过书籍视频和他人文章的源码解析明白，也想自己实现一个的。

前言

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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 ...

X_AirDu 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