jQuery源码分析笔记一

时间:2022-12-02 20:42:34
一、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() 。 (是否可理解成链式操作的第一步实现?有待后续教程是否解答)