jQuery源码逐行分析学习02(第一部分：jQuery的一些变量和函数)

第一次尝试使用Office Word，方便程度大大超过网页在线编辑，不过初次使用，一些内容不甚熟悉，望各位大神见谅~

在上次的文章中，把整个jQuery的结构进行了梳理，得到了整个jQuery的简化结构，如下：

(function(){
(21 , 94) 定义了一些变量和函数 jQuery = function(){};
(96 , 283) 给JQ对象，添加一些方法和属性
(285 , 347) extend : JQ的继承方法
(349 , 817) jQuery.extend() : 扩展一些工具方法
(877 , 2856) Sizzle : 复杂选择器的实现
(2880 , 3042) Callbacks : 回调对象 : 对函数的统一管理
(3043 , 3183) Deferred : 延迟对象 : 对异步的统一管理
(3184 , 3295) support : 功能检测
(3308 , 3652) data() : 数据缓存
(3653 , 3797) queue() : 队列方法 : 执行顺序的管理
(3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作
(4300 , 5128) on() trigger() : 事件操作的相关方法
(5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选
(6058 , 6620) css() : 样式的操
(6621 , 7854) 提交的数据和ajax() : ajax() load() getJSON()
(7855 , 8584) animate() : 运动的方法
(8585 , 8792) offset() : 位置和尺寸的方法
(8804 , 8821) JQ支持模块化的模式
(8826) window.jQuery = window.$ = jQuery;
})();

这一次，我们将开始对jQuery源码进行逐行分解。

首先从一开始的注释开始

开始的注释包含了以下内容:jQuery版本,jQuery官网,sizzle官网,jQuery版权信息,软件许可以及更新时间

接下来便开始了匿名自执行函数

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

先看下传参的作用:

    window参数有两个作用：第一，在代码执行过程中，一些方法、属性都是通过树形结构联结的，传入window参数就相当于给程序指明了一个查找方向，这样提高了程序查找的效率；第二，传入window参数，这样便于后期对于代码压缩，在压缩过程中，window参数会变成一个压缩程序自动生成的变量代号，这样就便于压缩了。

    undefined参数有一个作用：因为在这样大体量的程序中，像undefined这样的值很容易被篡改，所以在自执行匿名函数的参数中传入undefined，防止在程序过程中被无意篡改。

 

接下来的注释中，有关于use strict的部分，在此做一下说明：在严格模式下,代码需要特别规范,稍有不规范就会报错,建议不要使用。举个例子：

我们正常在声明赋值变量时，以下写法是正确的：   

a=10;

但是在use strict模式下就会报错，必须要是

var a=10;

又比如关于八进制数，我们一般情况下，我们可以定义八进制数：     

 var a=010;

但是在use strict模式下，这个八进制数是不支持的，就会报错。

接下来从(23)行开始，定义了一些变量和一些函数

　　rootjQuery:该变量表示jQuery的根目录，在第(866)行

rootjQuery=jQuery(document);

定义该变量便于后期代码的可维护

readyList:该变量和DOM加载有关，和ready(fn)相关的一个变量

core_strundefined=typeof undefined,字符串形式的undefined

在a==undefined和typeof a=='undefined'中,新版本浏览器没有差别，但是老版本浏览器可能前者无法判别，所以在此处，采用这种虽然难写一点但是保全的方式。

　　location=window.location;将window下的location对象单独定义存储

　　document=window.document;将window下的document对象单独定义存储

　　docElem=document.documentElement;将document.element对象单独定义存储

接下来

　　_jQuery=window.jQuery,

　　_$=window.$,

这两个变量是用于防止和其他程序产生冲突的，很多程序在对外暴露接口的时候都会选择使用$符号，这样就难免发生冲突，此处就是解决了这样的冲突问题。

　　class2type={}

$.type(),这是用来判断类型的

　　core_deletedIds=[]

这个变量和缓存数据有关,一般在老版本中有用

　　core_version='2.0.3'

这个变量是该版本jQuery的版本号

　　(52,58)core_concat=...

一些核心方法的存储，这其中包括了concat，push，slice，indexOf，toString，hasOwn，trim方法

接下来定义了jQuery函数

　　jQuery=function(){}

　　$() = jQuery()

下面对这个结构分析一下

jQuery=function(selector,context){
        return new jQuery.fn.init(selector,context,rootjQuery);
}

但在第(283)行，出现了如下代码

(283)jQuery.fn.init.prototype=jQuery.fn;

jQuery.fn的初始化方法的原型就是jQuery.fn

在普通写面向对象时     

function Aaa(){}
Aaa.prototype.init=function(){};
Aaa.prototype.css=function(){};

调用的时候：

var a1=new Aaa();
a1.init();
a1.css();

我们需要手动调用初始化方法，然后再去调用其他方法；

在jQuery中，面向对象是这样的：

      

 function jQuery(){
     return new jQuery.prototype.init();
 }
 jQuery.prototype.init=function(){};
 jQuery.prototype.css=function(){};
 jQuery.prototype.init.prototype=jQuery.prototype;

调用的时候：    

 var a2=new jQuery();
 a2.css();

就不需要再去调用初始化方法了，初始化方法在new对象的时候就已经被调用过了。

接下来定义了一些匹配正则

　　(67)core_pnum=...这匹配数字的正则

　　core_rnotwhite=...这是匹配单词

　　rquickExpr=...匹配防止XSS注入,防止输入框输入病毒的正则，类似<p>aaa 或者#div    这样的形式

　　rsingleTag=...匹配独立空标签，例如<p></p>    <div></div>    这样的形式

　　rmsPrefix=...IE浏览器前缀

　　rdashAlpha=...转大小写    -l转成L这样的形式

接下来

fcamelCase=function(all,letter){
        return letter.toUpperCase();
}

转驼峰命名法的回调函数

completed=function(){
        document.removeEventListener('DOMContentLoaded',completed,false);
        window.removeEventListener('load',completed,false);
        jQuery.ready();
}

DOM加载成功之后触发的回调函数

 

感谢大家百忙之中来阅读我的博客~~

点击下载jQuery代码文件

上一篇传送门：jQuery源码逐行分析学习01(jQuery的框架结构简化)