一、jQuery的基本框架
/**
*说明:以下匿名函数内的括号里数字代表从第几行到第几行;jQuery版本为2.0.3
*
*/
//框架
(function(window, undefined){
(21 , 94) // 定义了一些变量和函数 jQuery = function(){};
(96 , 283) //给jQuery对象,添加一些方法和属性
(285 , 347) // extend :jQuery继承方法
(349 , 817) //jQuery.extend() : 扩展一些工具(静态)方法
(877 , 2856) //Sizzle : 选择器的实现(复杂)
(2880 , 3042) Callbacks // 回调对象 :实现函数的统一管理
(3043 , 3183) Deferred //延迟对象 :实现异步的统一管理
(3184 , 3295) support //(浏览器)功能检测
(8826) windows.jQuery = windows.$ = jQuery //对外提供接口
})(window);
//知识
(function(){
[_code]
})(); //匿名函数,外部不能访问其中内容,减少冲突
windows.[_function] = [_function];//提供外部调用接口
$('ul li + p input.class') //复杂选择器
二、代码逐行分析
(1)函数说明及21-94行
1.(function(window, undefined){})(window);
1.1 将window以参数形式传入
1.1.1 函数使用window时查找速度更快
1.1.1.1 压缩效率更高在压缩的版本里为了尽量压缩到最小,有的变量名仅用一个字母代替。
如,(function(window, undefined){})(window);在压缩版本里为(function(e,undefined){})(window);
若是不以window做参数传进去那e在函数内部将不是window对象。
1.1.2 压缩时,局部变量名短。
1.2 将undefined以参数形式定义
1.2.1 undefined只是window下的一个属性,在某些浏览器下(如IE7,8),undefined的值可被修改。jQuery为了防止undefined在外部被修改,所以定义了一个局部undefined参数。
1.2.1.1 在IE 7、8 undefined是可以被这样修改的 undefined = xxx;
2."use strict"
2.1 将Javascript模式改成 '严格模式'
2.1.1 在严格模式下代码编写规范将严格遵守,否则会出错;jQuery不推荐使用。
2.1.2 在ASP.NET 环境下,arguments.caller.callee 不能使用。
2.1.3 在 Firefox 18+ 以前的版本,会出现 '假死' 状态
2.1.4 在 jQuery Bugs 的 #13335 可找到更详细的相关信息
3. rootjQuery
3.1 一个赋值为jQuery(document)的变量。
3.1.1 为了后期代码压缩
3.1.2 增加代码的可阅读性(可维护性)
4.readyList
4.1 与DOM加载相关的变量
5.core_strundefined = typeof undefined
5.1 存储 typeof undefined
5.1.1 在 XML.node 下,在某些浏览器(IE 6 7 8 9)下直接使用 undefined 进行判断会不支持,需要进行 typeof undefined 进行判断
6. location = window.location,
document = window.document,
docElem = document.documentElement
6.1 将2个BOM和1个DOM的常用属性以 变量 形式存储,目的是为了后期压缩效率 和 增加代码的可读性
7. _jQuery = window.jQuery,
_$ = window.$
7.2 由于其他的Javascript库有可能也使用 $ 或者定义了 jQuery 这两个变量。所以将他们以 _$, _jQuery 保存起来。目的是为了 防冲突(在后面 扩展工具方法再详细说明)
8. class2type = {}
8.1 $.type() 需要使用到这个变量
8.1.1 class2type = { '[Object String]' : 'string' , '[Object Array]' : 'array'} 日后存储此格式内容。
9. core_deletedIds = []
9.1 数据缓存相关的变量(在2.0版本前),现在仅是一个空数组
10. core_version = "2.0.3"
10.1 存储 jquery 的版本号
11. core_concat = core_deletedIds.concat,
core_push = core_deletedIds.push,
core_slice = core_deletedIds.slice,
core_indexOf = core_deletedIds.indexOf,
core_toString = class2type.toString,
core_hasOwn = class2type.hasOwnProperty,
core_trim = core_version.trim
11.1 将数组操作的常用函数以 变量 形式存储起来,增加压缩效率 和 扩展可阅读性。
12. jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
12.1 每当执行 jQuery 函数,就会返回一个执行完毕的 jQuery 对象。
12.1.1 function jQuery(){
return new JQuery.prototype.init();
}
jQuery.prototype.init = function(){};
jQuery.prototypr.css = function(){};
jQuery.prototype.init.prototype = jQuery.prototype;
jQuery().css();
上面的是jQuery 面向对象 的写法。
1. 执行 jQuery 函数时,返回 jQuery 初始化对象
2. 将 jQuery.prototype 的引用 赋值 给 jQuery.init.prototype
3. 这样当 jQuery 对象生成时,就可直接使用其prototype的方法。如 jQuery().css() 。 (是否可理解成链式操作的第一步实现?有待后续教程是否解答)