jQuery源码分析

  • jQuery方法的调用方式:
//一般是这两种
$('div').html();
$.ajax();

从jQuery的使用方法来猜测它的编写方式。

  • jQuery插件方式如何编写?

  • 第一步:搭Query插件框架,找到我们的目的。



    思路:通过立即执行函数内生成Query的构造函数然后赋值给我们的全局对象内,然后在全局对象下使用$或yQuery绑定原生dom对象,这样我们通过yQuery绑定的原生dom对象都能使用yQuery.prototype下的方法。
    注:不直接在全局对象下创建yQuery对象是为了防止压缩代码时重命名window导致错误。



    现象:现在我们在浏览器下验证真有$这个函数,并且可以通过构造函数传递原生对象。但写法不是$('div')。
  • 第二步: 试试return,我们需要在全局下直接返回一个对象



    思路:我们需要直接返回一个对象,试着在yQuery里return一下看看结果。

    现象:真的在全局下返回了一个对象,还调用到了我们想要的方法,但是我们只是返回了yQuery.prototype。

    yQuery.prototype是一个公共区域,绑定任何元素dom对象返回的都是同样一个东西,离结果很远。

  • 第三步:这次我们不返回公共区域,返回公共区域下的对象



    思路:得到了个对象,但没返回值,试试this。

  • 第四步:加上this看看



    思路:试一下this看看返回了什么,this返回的是函数的调用者。



    现象:结果很眼熟,好像就是yQuery.prototype,和第二步的结果一样。。但我们好像更接近了目标。
  • 第五步:this返回的是函数的调用者,但this在构造函数里返回的是一个实例
    思路:我们想做的应该是后者,这样我们每次绑定原生dom的时候返回的都是一个实例,他们相互独立但又使用prototype下的公共区域。


    现象:这一步不仅加了new,还加了红框里的两句话,我们需要一张图来解释

    看上图前我们先了解下我们的目的有两个:1创建各不相同的实例对象(完成)2使用我们yQuery.prototype下的公共方法。
    解释:通过原型链和继承的知识我们知道我们新创建的这个实例对象的__prto__指向的是他的构造函数下的prototype,也就是yQuery.prototype.init.prototype,是一个null的空对象。而我们需要的方法在yQuery.prototype,那么我们通过yQuery.prototype.init.prototype = yQuery.prototype使我们新创建的实例对象可以拥有yQuery.prototype下的方法。并且为了内部正确我们constructor: yQuery让它指向正确。
    constructor: yQuery

    yQuery.prototype.init.prototype = yQuery.prototype;

  • jQuery插件的方法是如何实现的?
    通过上面的步骤我们完成了jQuery插件核心的构成,但jQuery有两种使用方法$('div').addClass()和$.ajax(),这两类方法分布的位置是不一样的


    $('div').addClass()类型方法处于的位置

    $.ajax()类型方法处于的位置

    实现: 在内部定义一个extend方法,作用是确定对象是否存在,如果不存在就存入extend方法的调用者。这样我们就只需要在yQuery.prototype里留下初始的构造函数,公共方法都放在yQuery.prototype.extend里面


    函数里的this表示调用者,不要想不通- -
  • jQuery如何与其他插件防止冲突?
    方法一:jQuery.noConflict();然后就不用$
    方法二:把jQuery传递到函数内使用$
    方法二

    noConflict()的原理:这里的_$是个临时变量并且为undefined,当执行时window下的$就被赋值为undefined了,window下就jQuery的$就失效了
    noConflict()源码
  • jQuery链式调用是什么?是如何实现的?
  • 链式调用:$('div').addClass().html(),原理很简单,就是在我们的方法的最后return this。这里的this是调用此方法的对象$('div').addClass(),addClass()里return this出了$('div')对象,然后继续调用html()方法。
    return this 返回了调用此方法的对象

    本博客版权归 本人和饥人谷所有,转载需说明来源
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,162评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,325评论 0 2
  • 一直在使用jQuery,也一直想更深层次的学习jQuery,下面就从jQuery的结构说起。并通过一个小例子,实现...
    webCoder阅读 2,405评论 2 14
  • 1.如果还记的分析一中的返回一个对象,我直接贴了一句代码 好多不清楚为什么jQuery.fn.init返回的是jQ...
    VisuperviReborn阅读 304评论 0 2
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,718评论 2 17