//源码剖析都基于jQuery-2.0.3版本,主要考虑到兼容IE

一、关于jQuery对象实例化的逻辑:

整个jQuery程序被包裹在一个匿名自执行行数内:

 (function(window,undefined){
//......
})(window);

外部程序不能直接调用jQuery对象的属性和方法,jQuery所有方法和属性被变成局部私有的。例如:

 (function(window,undefined){
var a = "我是a";
var b = function(a){
alert("我是b");
}
})(window);
console.log(a);
//报错:a is not defined(a未定义)
b();
//报错:b is not defined(b未定义)

既然所有方法和属性都是私有的,就存在一个问题,如何使用jQuery对象和对象的方法和属性呢?

这就产生了jQuery的接口$:(8825~8827行)

if ( typeof window === "object" && typeof window.document === "object" ) {
window.jQuery = window.$ = jQuery;
}

这个逻辑处理了jQuery的对外接口,将自身赋给window对象下的$属性,同时还赋给了window对象下的jQuery属性,这样在全局下(window对象)就有了两个属性可以调取jQuery,分别是$和jQuery;

然后jQuery又是通过一个构造方法实现的(61~64行)

 jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
}

通过上面的源码可以看到,jQuery是将两个参数selector,context传入一个init()方法(init()方法会返回一个对象);

init立即执行获后获得的就是一个jQuery对象初始化对象。   193行 //return jQuery.makeArray( selector, this );

//通常的jQuery对象初始化
$(fuction(){
//通过jQuery实现的具体业务逻辑
});

暂且不说写入自己的这个匿名方法参数的原理,$()就等于实现了jQuery(),也同等于init()执行并返回对象,这个对象就是jQuery对象的实例化。

还记得在jQuery通过window的自身扩展的$属性和jQuery属性来实现jQuery的接口,也就是说,jQuery实例化的方法还可以写成:

//通常的jQuery对象初始化
jQuery(fuction(){
//通过jQuery实现的具体业务逻辑
});

以上就是jQuery对象实初始化的全部过程和内容,接下来正式进入jQuery原型的构建原理和extend内部扩展方法说明的内容:

继续剖析jQuery原型的构建原理:

从上面对象实例化的jQuery的过程可以知道,jQuery的对象原型是通过init()方法构造的,然而下面一段代码一定会让很多人疑惑(96~279行)。

jQuery.fn = jQuery.prototype = {......}

前面的构造逻辑已经表明了,jQuery对象是通过init()方法构造的,

那么jQuery的原型应该就是基于init构造方法的,为什么还要在这里写jQuery的原型呢?

所以往后看,源码283行有如下代码:

jQuery.fn.init.prototype = jQuery.fn;

这行代码就是将前面写的jQuery原型赋给了init的原型,

所以,jQuery通过init()构造实例对象,最后还是基于自身的原型构造的。最终的原型链指向的还是jQuery.proptotype;

在源码96行可以看到,jQuery的原型是一个自定义的对象(前面有提到);

jQuery.fn = jQuery.prototype = {......}

所以在源码的100行有这样的代码,重新将构造方法指向了jQuery,实现了jQuery的构造逻辑。

constructor: jQuery,

二、jQuery构建模型分析图

三、jQuery构建逻辑的实现过程(仿写jQuery)

1.创建一个闭包环境

jQuery源码解析对象实例化与jQuery原型及整体构建模型分析(一)的更多相关文章

  1. JQuery源码解析-- 对象的创建

    使用 $("a") 返回的对象就不再是一个简单的DOM对象了,而是一个复杂的JQuery对象. 那么JQuery是怎么创建对象的. 为了便于分析,我将JQuery中复杂的代码简化了 ...

  2. jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

  3. jquery源码解析:代码结构分析

    本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94)     定义了一些变量和函数,   jQuery = function() ...

  4. JQuery源码解析(一)

    写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...

  5. jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理

    jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑 ...

  6. jquery源码学习笔记三:jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  7. JQuery源码之“对象的结构解析”

    吃完午饭,觉得有点发困,想起了以后我们的产品可能要做到各种浏览器的兼容于是乎不得不清醒起来!我们的web项目多数是依赖于Jquery的.据了解,在Jquery的2.0版本以后对IE的低端版本浏览器不再 ...

  8. 三.jQuery源码解析之jQuery的框架图

    这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...

  9. jquery源码解析:jQuery数据缓存机制详解1

    jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等 ...

随机推荐

  1. hiho1257 Snake Carpet

    题目链接:http://hihocoder.com/problemset/problem/1257 题目大意:有n条蛇 编号为1-n 每条蛇的长度跟编号相等 奇数编号的蛇必须拐奇数次(除了第一条)偶数 ...

  2. anaconda4.2.0

    上改完cv2那个文件夹后,发现在使用导入的cv2中的方法时没有代码提示,于是搞啊搞,终于让我搞坏了mmp,这也太脆弱了. 无奈组装了一个全新的方法 过程比较坎坷也就没怎么记录 我的版本是选择最后一个o ...

  3. 用c#查询各快递物流信息

    前面介绍过<用快递100接口查询各快递物流信息>,里面用的是API接口,但有些快递不支持这种方式,本文介绍的HtmlAPI支持所有快递公司. 支持包括EMS.邮政.顺丰和申通在内的所有公司 ...

  4. SES 之全局搜索小记

    @2018-12-17 [小记] SES 使用全局搜索时,变量所在的头文件没有被检索出来,选中检索属性中的 Dependencies 就可以了

  5. iis express添加虚拟目录

    在调试WEB时,还是使用IIS EXPRESS比较方便, 在IIS中,选择网站,右击,添加虚拟目录或者应用程序,就能添加虚拟目录了.. 在IIS EXPRESS中,添加虚拟目录如下 1.右击IIS E ...

  6. 洛谷P4243/bzoj1558 [JSOI2009]等差数列(线段树维护差分+爆炸恶心的合并)

    题面 首先感谢这篇题解,是思路来源 看到等差数列,就会想到差分,又有区间加,很容易想到线段树维护差分.再注意点细节,\(A\)操作完美解决 然后就是爆炸恶心的\(B\)操作,之前看一堆题解的解释都不怎 ...

  7. 一张图看懂JVM

    https://mp.weixin.qq.com/s?__biz=MzAxNjk4ODE4OQ==&mid=2247484432&idx=1&sn=381c98c49ffb81 ...

  8. 关于用户输入恶意js

    有些黑客经常闲得蛋疼的那别人的网站测试,利用一些输入的漏洞提交js代码,搞恶作剧. 对于freemarker视图的web应用,可以参考以下方法: http://yshjava.iteye.com/bl ...

  9. 踩过的坑—iphone手机H5样式兼容总结

    对一个前端开发者来说,最煎熬的莫过于"兼容"两个字了(说到这个词朋友们是不是身体一抖),哪怕对于工作多年的老油条来讲,也不是完全了解各种场景下的兼容性处理方法.在这里我就把我在工作 ...

  10. 论文总结(negFIN: An efficient algorithm for fast mining frequent itemsets)

    一.论文整体思路: 作者提出了一种基于前缀树的数据结构,NegNodeset,其实是对之前前缀树的一种改进,主要区别在于采用了位图编码,通过这种数据结构产生的算法称为negFIN. negFIN算法高 ...