jQuery 源码分析学习 — 优秀前端框架jQuery框架认识

从今天开始学习优秀前端开源框架jQuery源码.本系列主要针对 jQuery1.6 源码分析学习.

准备工作:初始jQuery 框架.

(function(){

// javascript  代码……

})();

所有的jQuery 代码都包含在这个自调用匿名函数中

什么是匿名函数?

类似这样的函数定义

(function(a,b) {

console.info( a+b);

})( 5,6);

匿名函数其实是一种函数字面量,就像对象字面量一样{name:”小小”,age:1}  第一对圆括号括起来的function(){….}  是匿名函数的函数体,第二对圆括号 (5,6) 是匿名函数的参数,此函数字面量定以后就可以自动调用执行,chrome 下 console 

什么是自调用函数?

就是初始化后马上执行调用的函数,像上面的函数直接量就是一种自调用函数.

jQuery 之所以采用这种架构是使用了javascript语言的一个技巧,我们知道javascript没有命名空间的感念,而匿名函数中定义的属性,方法,对象等不与匿名函数外的变量,属性,方法等冲突,这样就达到了一个函数使用范围的限制.

jQuery 架构中的只调用函数是 (function(a,b){})(window); 

上面的自调用函数中传入的参数是windows,而匿名函数明显需要两个参数 a和b ,window 会默认被a形参接收,那b没有可接收的参数默认会是undefined 我们下面来验证一下.

事实确实是这样,输出的 a 正是window 对象, 而输出的b 是 undefined 因为第二对圆括号传入了一个参数,jQuery 为什么要把window 传入匿名函数呢? 关键因素是在匿名函数直接操作使用window对象而不需要将对象作用域链返回到最顶层作用域链上,其次形参a 接收第一个参数window 将在以后压缩jQuery代码时起到优化作用.

jQuery整体构造如下:

(function( window, undefined ) {
// 构造jQuery对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}

// 工具函数 Utilities

// 异步队列 Deferred

// 浏览器测试 Support

// 数据缓存 Data

// 队列 queue

// 属性操作 Attribute

// 事件处理 Event

// 选择器 Sizzle

// DOM遍历

// DOM操作

// CSS操作

// 异步请求 Ajax

// 动画 FX

// 坐标和大小

window.jQuery = window.$ = jQuery;
})(window);

整个构造结构非常清晰易读,从上面的代码中很容易发现自调用函数内部 jQuery对象的定义.函数的实现体在方法 new jQuery.fn.init 中完成,后面我们会分析学习.最下面看到了将 jQuery 对象赋值给windwo的一个属性,同时还定义了另外一个window 属性 $ (美元符号) 它等价于 jQuery ,当多个框架共存的时候,$ 符号可能被占用,就需要用jQuery来代替 $符号了,定义后 jQuery 或者 $ 你就可以直接使用,就像使用window.decument 方法没有两样.