第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~
在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结构,如下:
1 (function(){ 2 (21 , 94) 定义了一些变量和函数 jQuery = function(){}; 3 (96 , 283) 给JQ对象,添加一些方法和属性 4 (285 , 347) extend : JQ的继承方法 5 (349 , 817) jQuery.extend() : 扩展一些工具方法 6 (877 , 2856) Sizzle : 复杂选择器的实现 7 (2880 , 3042) Callbacks : 回调对象 : 对函数的统一管理 8 (3043 , 3183) Deferred : 延迟对象 : 对异步的统一管理 9 (3184 , 3295) support : 功能检测 10 (3308 , 3652) data() : 数据缓存 11 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理 12 (3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作 13 (4300 , 5128) on() trigger() : 事件操作的相关方法 14 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选 15 (6058 , 6620) css() : 样式的操 16 (6621 , 7854) 提交的数据和ajax() : ajax() load() getJSON() 17 (7855 , 8584) animate() : 运动的方法 18 (8585 , 8792) offset() : 位置和尺寸的方法 19 (8804 , 8821) JQ支持模块化的模式 20 (8826) window.jQuery = window.$ = jQuery; 21 })();
这一次,我们将开始对jQuery源码进行逐行分解。
首先从一开始的注释开始
开始的注释包含了以下内容:jQuery版本,jQuery官网,sizzle官网,jQuery版权信息,软件许可以及更新时间
接下来便开始了匿名自执行函数
1 (function(window,undefined){})(window);
先看下传参的作用:
window参数有两个作用:第一,在代码执行过程中,一些方法、属性都是通过树形结构联结的,传入window参数就相当于给程序指明了一个查找方向,这样提高了程序查找的效率;第二,传入window参数,这样便于后期对于代码压缩,在压缩过程中,window参数会变成一个压缩程序自动生成的变量代号,这样就便于压缩了。
undefined参数有一个作用:因为在这样大体量的程序中,像undefined这样的值很容易被篡改,所以在自执行匿名函数的参数中传入undefined,防止在程序过程中被无意篡改。
接下来的注释中,有关于use strict的部分,在此做一下说明:在严格模式下,代码需要特别规范,稍有不规范就会报错,建议不要使用。举个例子:
我们正常在声明赋值变量时,以下写法是正确的:
1 a=10;
但是在use strict模式下就会报错,必须要是
1 var a=10;
又比如关于八进制数,我们一般情况下,我们可以定义八进制数:
1 var a=010;
但是在use strict模式下,这个八进制数是不支持的,就会报错。
接下来从(23)行开始,定义了一些变量和一些函数
rootjQuery:该变量表示jQuery的根目录,在第(866)行
1 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()
下面对这个结构分析一下
1 jQuery=function(selector,context){ 2 return new jQuery.fn.init(selector,context,rootjQuery); 3 }
但在第(283)行,出现了如下代码
1 (283)jQuery.fn.init.prototype=jQuery.fn;
jQuery.fn的初始化方法的原型就是jQuery.fn
在普通写面向对象时
1 function Aaa(){} 2 Aaa.prototype.init=function(){}; 3 Aaa.prototype.css=function(){};
调用的时候:
var a1=new Aaa(); a1.init(); a1.css();
我们需要手动调用初始化方法,然后再去调用其他方法;
在jQuery中,面向对象是这样的:
1 function jQuery(){ 2 return new jQuery.prototype.init(); 3 } 4 jQuery.prototype.init=function(){}; 5 jQuery.prototype.css=function(){}; 6 jQuery.prototype.init.prototype=jQuery.prototype;
调用的时候:
1 var a2=new jQuery(); 2 a2.css();
就不需要再去调用初始化方法了,初始化方法在new对象的时候就已经被调用过了。
接下来定义了一些匹配正则
(67)core_pnum=...这匹配数字的正则
core_rnotwhite=...这是匹配单词
rquickExpr=...匹配防止XSS注入,防止输入框输入病毒的正则,类似<p>aaa 或者#div 这样的形式
rsingleTag=...匹配独立空标签,例如<p></p> <div></div> 这样的形式
rmsPrefix=...IE浏览器前缀
rdashAlpha=...转大小写 -l转成L这样的形式
接下来
1 fcamelCase=function(all,letter){ 2 return letter.toUpperCase(); 3 }
转驼峰命名法的回调函数
1 completed=function(){ 2 document.removeEventListener(‘DOMContentLoaded‘,completed,false); 3 window.removeEventListener(‘load‘,completed,false); 4 jQuery.ready(); 5 }
DOM加载成功之后触发的回调函数
感谢大家百忙之中来阅读我的博客~~