jQuery1.6.2源码分析(二)JQ基础变量定义

  这一部分,我们主要来研究前100行的基础变量的意义以及JQ的入口函数。

 

  19-21行:           

var document = window.document,
navigator = window.navigator,
location = window.location;

  这部分的目的就在于,我们在使用document、navigator、location的时候,不用再从新通过window对象查找,而是直接利用本地化的变量去获取,从而提高库的性能。

 

 

  22行-950行:

var jQuery = (function( selector, context ) {… return jQuery})();

  这部分就是JQ的核心工具函数以及库的入口了。他采用的是一个闭包定义并立即执行的方式,其闭包的返回值就是闭包内的jQuery对象,这里注意是闭包内的jQuery对象。

 

 

  25-28行:

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

  这部分就是JQ的入口函数,当我们在使用$('div')去获取所以div节点的时候,就是利用了这个工场模式。他return的并不是jQuery实例化的对象,而是jQuery.fn.init实例化的对象。由后面的代码,我们可以知道,jQuery用了一个很绕的方式,把fn对象指向了init的原型,(具体代码以后我们会一并分析)从而可以调用那些工具类的方法。

  这里我们简单的分析一下init函数的三个形参。

  selector:顾名思义就是选择器,它可以是id字符串、class字符串、html标签字符串、甚至后代选择器等等,常用JQ的人一定很了解,这里就不多说了。

  context:上下文,也就是我们第一个参数查询的范围。比如$('div','#warp')就是在id为warp的元素内部获取div的结果集。

  rootjQuery:通过909行的代码,我们可以知道rootjQuery = jQuery(document);rootjQuery就是文档根节点。一般不限定范围的话,就是在这个节点之下查找dom元素了。

 

 

  31-34行:

_jQuery = window.jQuery,_$ = window.$,

  把全局的jQuery赋值给私有变量_jQuery,防止被覆盖。_$同理。

 

  37行:rootjQuery,初始化变量,等待第909行的赋值。

 

 

  从41行-69行主要就是正则表达式变量的定义。

  建议大家在分析这部分的时候,对照着正则表达式的基础表来看。


  41行:

quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

  首先看到该正则表达式没有用到i、g,因此它需要考虑大小写并且只匹配一次。

  我们看小括号外面的符号^,它代表匹配开头。什么意思呢,也就是说中间小括号内的正则匹配出来的结果的位置,必须是匹配字符串的开头。举个例子:

var reg = /^abc/;
alert(reg.exec('abc')) //abc
alert(reg.exec(ab)) //null
alert(reg.exec(babc)) //null



  OK,我们暂时把该正则表达式看成是这样的形式:/^(...)/,那么问题就简单了,我们现在关注的就是(...)这部分的内容。那么这部分内容,我们又可以把他看作是:(?:patten),这个结构什么意思呢,我们通过正则的基础知识知道,()相当于把其中的内容作为一个分组,这部分内容会被自动压入栈里,利用正则自带的\1\2的方式去重复调用,而(?:patten)的写法是进行这样的存储工作。所以,以后就没法通过\1之类的方式重复利用了,目前还不知道目的何在,不过肯定有他的道理。

  接下来我们再看patten部分:我们注意到中间有|线,它代表或的意思,所以这里可以拆分为[^<]*(<[\w\W]+>)[^>]*$和#([\w\-]*)$。后面一种很好理解,就是匹配#开头字符,后面的字符\w等价于a-z,A-Z,0-9,_,-这几种,而且结尾也必须是这几种。前面部分首先看[^<]*,它的意思是匹配0到多个非<的字符,接下来(<[\w\W]+>),他意思是第一个字符必须是<然后里面的内容是一个或者多个任意字符,最后[^>]*$就是匹配0到多个以非>结尾的字符,所以说,该正则表达式的目的是简单的匹配html字符串或者id字符串

  通过这个正则表达式的分析,我们其实已经掌握了一部分正则的基础知识了,这里总结一下该正则主要用到了\w \W (?:patten) ^ $ * [] 这几种语法。这里就不展开了。

 

 

  44行:

rnotwhite = /\S/,

  匹配非空格字符。

 

 

  47-48行:

 trimLeft = /^\s+/,
trimRight = /\s+$/,

  用于修剪字符串左右两边的空格。

 

 

  51行:

rdigit = /\d/,

  匹配一个数字字符。

 

 

  54行:

rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,

  匹配一个独立标签。例如<div></div>或者<input />中间还不能有内容,例如<div>11</div>就不行。

 



  57行:

rvalidchars = /^[\],:{}\s]*$/,

  匹配0到多个],:{}空白符  并且必须以这些字符开头和结尾。

 

 

  58行:

rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,

  这个表达式后半部分很清晰,就是匹配u1234之类的unicode字符,前半部分就是匹配任意一个字符,可以是"\/bfnrt

 



  59行:

rvalidtokens = /"[^"\\\n\r]*"|true|false|nulxl|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,

  看第一个竖线前面部分,"[^"\\\n\r]*",匹配的是一对双影号,其中的内容不能包括双影号、斜杠、换行符、回车符。中间3个不多解释,看最后一个竖线后面的部分

-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?,首先匹配0到1个-,然后是一个到多个的数字,然后是非存的组,其中匹配0到1个由和0到多个数字组成的集合,然后继续是一个非存组,其中匹配一个e或者E,然后是一个或多个+-最后是1个到多个的数字,该非存组同样是匹配0个或者1个。 暂时还不知道这个表达式干嘛用,等以后分析到了再具体看。

 


  60行:

rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,

  这段正则匹配的结果大概是一个 ' ['的字符串。

 


  63-66行:

rwebkit = /(webkit)[ \/]([\w.]+)/,
 ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
 rmsie = /(msie) ([\w.]+)/,
rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,

  基本上都是用于浏览器内核和版本检测而使用的正则表达式。

 

 

  69行:

rdashAlpha = /-([a-z])/ig,

  匹配-a,-b之类的字符串。

 

  接下来从72-97行就是一些基础变量的定义了:

  72-74行:

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

  这个方法是针对jQuery.camelCase()当中string.replace()方法里的回调函数准备的,就目前分析来看,all这个参数目前不知道做啥用,等以后分析到了再看。

 


  77行:

userAgent = navigator.userAgent,

  这个也是提高性能而用的。

 

 

  80-86行是用于匹配浏览器版本和内核、dom ready异步处理以及ready相关的事件句柄而准备的变量。

 

  89-94行:

 toString = Object.prototype.toString,
hasOwn = Object.prototype.hasOwnProperty,
push = Array.prototype.push,
slice = Array.prototype.slice,
trim = String.prototype.trim,
indexOf = Array.prototype.indexOf,

  将内置对象的核心方法存储到本地变量里,方便调用、提高性能。



  97行:也是为其他方法准备的一个空对象。

 

  差不多,这期内容就写那么多,当然了,分析源码的过程中肯定会有错误出现,还望各位在看的过程中也能帮我指出错误的地方,互相学习,共同进步。

  下一期的内容,我们主要从第99行开始分析JQ的方法是如何调用的,以及一些工具类方法的意义,敬请期待!

posted @ 2011-12-28 15:38  Krouky  阅读(1766)  评论(0编辑  收藏  举报