jquery源码解析:代码结构分析
本系列是针对jquery2.0.3版本进行的讲解。此版本不支持IE8及以下版本。
(function(){
(21, 94) 定义了一些变量和函数, jQuery = function(){};
(96,283) 给jQuery对象添加一些属性和方法(实例方法,通过$("div")这类的jQuery实例对象来调用)
(285,347) extend : jQuery的继承方法
(349,817) jQuery.extend():扩展一些工具方法(静态方法,直接通过$来调用的,比如:$.trim)
(877,2856) Sizzle:复杂选择器的实现。比如:$("ul li + p ");
(2880,3042) Callbacks:回调对象-》函数的统一管理。
(3043,3183) Deferred:延迟对象-》对异步的统一管理
(3184,3295) support:功能检测
(3308,3652) data(): 数据缓存
(3653,3797) queue():队列管理,dequeue.
(3803,4299) attr(),prop(),val(),addClass(),对元素属性的操作
(4300,5128) on(),trigger() 事件操作的相关方法
(5140,6057) DOM操作:添加,删除,获取(next),包装(wrap),Dom筛选
(6058,6620) css():样式的操作
(6621,7854) 提交的数据和ajax的操作:load,ajax
(7855,8584) animate():运动的操作。 show,hide,fadeIn。
(8585,8792) offset(),位置和尺寸的一些方法
(8804,8821) jQuery支持模块化的模式
(8826) window.jQuery = window.$ = jQuery;
})()
(function(window,undefined){
//window局部化,1.查找速度快。2.利于代码压缩,可以把window压缩成a。
//undefined,有些浏览器的undefined可以被修改,为了防止undefined被修改,所以传了一个undefined给了jQuery
core_strundefined = typeof undefined;
//为了防止ie9以及以下版本,判定一个xmlNode方法为undefined时出问题。
//比如:a.b== undefined(a为xmlNode,并且在IE9以下浏览器下,b不存在a中,出问题); typeof a.b== "undefined"(没问题)
class2type = {};
//类型判断,里面存的是{"[object String]":"string",....}。先去了解object.prototype.toString.call()
core_version = "2.0.3";
core_concat = [].concat; //缓存数组方法以及对象方法。利于压缩。可以对core_concat压缩。
......
var rootjQuery,
_jQuery = window.jQuery, //以防在引入jQuery库时,已经有其他库引用jQuery和$标示符了。
_$ = window.$, //因此先把他们保存起来。(prototype.js就引用了$标识)
jQuery = function(selector, context){
return new jQuery.fn.init(selector,context,rootjQuery);
}
......
window.jQuery = window.$ = jQuery;
})(window)
这里我要详细的讲下new jQuery.fn.init(selector,context,rootjQuery);我看了太多别人写的jQuery源码解析,大多写的不详细,导致刚开始看的时候,没看懂。
我们平常新建一个jQuery对象:$("div"),jQuery("div"),调用的就是new jQuery.fn.init(selector,context,rootjQuery);
很多人会有疑问,怎么new一个init,就是jQuery对象。除非init.prototype 就是jQuery.prototype。
大家可以在283行看到这样一句话:jQuery.fn.init.prototype = jQuery.fn;96行看到这样一句话:jQuery.fn = jQuery.prototype = {}
印证了上面的观点。jQuery.fn.init.prototype 就是jQuery.prototype。
当你们去看init方法的时候,会发现它返回的是this,this指的就是new出来的jQuery对象,而大家都知道,当访问一个实例对象的方法和属性时,如果实例对象没有,那么就去找原型对象,因此jQuery.prototype对象中的属性和方法,都可以通过new 出来的jQuery实例对象访问。也就是$("div")这种jQuery的实例对象可以调用各种在jQuery.prototype对象中的属性和方法。
而对于这种静态属性和方法,$.trim,jQuery.trim,是在构造函数的属性上定义的,跟实例对象没有什么关系。举个例子:function Person(){},Person.prototype={};
new Person()就是实例对象,它可以调用Person.prototype中的所有属性和方法。而Person.trim = function(){},就是静态方法,只能通过构造函数Person.trim才能进行调用。
有一个知识点,-webkit-margin-left ->js访问时,会转化成webkitMarginLeft,而-ms-margin-left会转换成MsMarginLeft。
加油!
jquery源码解析:代码结构分析的更多相关文章
- JQuery源码解析(一)
写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- jquery 源码解析
静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = ...
- 三.jQuery源码解析之jQuery的框架图
这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...
- jquery源码解析:addClass,toggleClass,hasClass详解
这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...
- jquery源码解析:jQuery数据缓存机制详解2
上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...
- jquery源码解析:jQuery数据缓存机制详解1
jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等 ...
- jquery源码解析:jQuery工具方法when详解
我们先来看when方法是如何使用的: var cb = $.when(); //when方法也是返回一个延迟对象,源码是return deferred.promise();返回的延迟对象不能修改状 ...
- jquery源码解析:jQuery工具方法Callbacks详解
我们首先来讲下Callbacks是如何使用的:第一个例子 function a(){} function b(){} var cb = $.Callbacks(); cb.add(a); cb.add ...
随机推荐
- 【jdbc】【c3p0】c3p0三种配置方式【整理】
c3p0三种配置方式 c3p0的配置方式分为三种,分别是1.setters一个个地设置各个配置项2.类路径下提供一个c3p0.properties文件3.类路径下提供一个c3p0-config.xml ...
- 排查MySQL事务没有提交导致 锁等待 Lock wait timeout exceeded
解决思路: select * from information_schema.innodb_trx 之后找到了一个一直没有提交的只读事务, kill 到了对应的线程后ok 了. 转载自:http:// ...
- 【LA3523 训练指南】圆桌骑士 【双连通分量】
题意 有n个骑士经常举行圆桌会议,商讨大事.每次圆桌会议至少应有3个骑士参加,且相互憎恨的骑士不能坐在圆桌旁的相邻位置.如果发生意见分歧,则需要举手表决,因此参加会议的骑士数目必须是奇数,以防赞同和反 ...
- Canny效果
- C#跨线程操作控件的最简单实现探究
随着程序复杂度的提高,程序不可避免会出现多个线程,此时就很可能存在跨线程操作控件的问题. 跨线程操作UI控件主要有三类方式: 1.禁止系统的线程间操作检查.(此法不建议使用) 2.使用Invoke(同 ...
- htaccess跨域
目的:为了加快访问速度,减轻主站压力,把静态资源放到独立的服务器上,使用独立的域名 问题:浏览器为安全考虑,实施同源策略:ip/域名和端口必须相同 解决办法: 1.httpd.conf中,开启apac ...
- TIMER_PWM_CAPTURE
- QT学习之常用类的总结
QApplication 应用程序类 管理图形用户界面应用程序的控制流和主要设置 QPalate QLabel 标签类 提供文本或者图像的显示 QPushButton 按钮类 提供 ...
- 【转载】Redis Sentinel服务配置
转载地址:http://blog.csdn.net/vtopqx/article/details/49247285 redis官网文档:http://www.redis.cn/topics/senti ...
- HDU 6148 Valley Numer (数位DP)
题意:... 析:好久没写数位DP了,几乎就是不会了.... dp[i][last][s] 表示前 i 位上一位是 last,当前的状态是 s,0表示非上升,1 表示非下降,然后就很简单了,只有 0 ...