jQuery源码阅读笔记

一、闭包结构

//作用：消除全局污染
//采用闭包（匿名函数立即执行）的方式，传入了window对象
//只在后面暴露 $ 和 jQuery 这 2 个变量给外界
方式1：
(function(window, undefined) {
   // jQuery 代码
})(window);
方式2：
(function(window) {
   // JS代码
})(window, undefined);

//方式1压缩细节：window->w undefined->u

二、jQuery 无 New构造方法的实现

(function(window, undefined) {
    var 
    // ...
    jQuery = function(selector, context) {
        // 看这里，实例化方法 jQuery() 实际上是调用了其拓展的原型方法 jQuery.fn.init
        return new jQuery.fn.init(selector, context, rootjQuery);
    },

    // jQuery.prototype 即是 jQuery 的原型，挂载在上面的方法，即可让所有生成的 jQuery 对象使用
    jQuery.fn = jQuery.prototype = {
        // 实例化化方法，这个方法可以称作 jQuery 对象构造器
        init: function(selector, context, rootjQuery) {
            // ... 
        }
    }
    // 这一句很关键，也很绕
    // jQuery 没有使用 new 运算符将 jQuery 实例化，而是直接调用其函数
    // 要实现这样,那么 jQuery 就要看成一个类，且返回一个正确的实例
    // 且实例还要能正确访问 jQuery 类原型上的属性与方法
    // jQuery 的方式是通过原型传递解决问题，把 jQuery 的原型传递给jQuery.prototype.init.prototype
    // 所以通过这个方法生成的实例 this 所指向的仍然是 jQuery.fn，所以能正确访问 jQuery 类原型上的属性与方法
    jQuery.fn.init.prototype = jQuery.fn;

})(window);

*jQuery.fn.init.prototype = jQuery.fn;
实例化方法存在这么一个关系链

• jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ; new
• jQuery.fn.init() 相当于 new jQuery() ; jQuery() 返回的是 new
• jQuery.fn.init()，而 var obj = new jQuery()，所以这 2 者是相当的，所以我们可以无 new 实例化 jQuery 对象。

三、jQuery 方法的重载
实例化一个 jQuery 对象的九种重载方法场景

// 接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器
jQuery([selector,[context]])
// 传入单个 DOM
jQuery(element)
// 传入 DOM 数组
jQuery(elementArray)
// 传入 JS 对象
jQuery(object)
// 传入 jQuery 对象
jQuery(jQuery object)
// 传入原始 HTML 的字符串来创建 DOM 元素
jQuery(html,[ownerDocument])
jQuery(html,[attributes])
// 传入空参数
jQuery()
// 绑定一个在 DOM 文档载入完成后执行的函数
jQuery(callback)

四、 jQuery.fn.extend 与 jQuery.extend
extend 方法在 jQuery 中是一个很重要的方法，jQuey 内部用它来扩展静态方法或实例方法，而且我们开发 jQuery 插件开发的时候也会用到它。但是在内部，是存在 jQuery.fn.extend 和 jQuery.extend 两个 extend 方法的，而区分这两个 extend 方法是理解 jQuery 的很关键的一部分。先看结论：

1）jQuery.extend(object) 为扩展 jQuery 类本身，为类添加新的静态方法；

2）jQuery.fn.extend(object) 给 jQuery 对象添加实例方法，也就是通过这个 extend 添加的新方法，实例化的 jQuery 对象都能使用，因为它是挂载在 jQuery.fn 上的方法（上文有提到，jQuery.fn = jQuery.prototype ）。

五、jQuery 的链式调用及回溯