jQuery实战教程 可想实现一个自己的简单jQuery库?(一)
阿萨 2018-03-23 来源 :网络 阅读 1408 评论 0

摘要:本系列jQuery实战教程将给大家系统的讲解一些库的知识点 ,看完这系列文章会让你对实现一个自己的简单jQuery库有更加清晰的理解和运用。

本系列jQuery实战教程将给大家系统的讲解一些库的知识点   ,看完这系列文章会让你对实现一个自己的简单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")即可调用.

希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!


本文由 @阿萨 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved