Jquery源码解析

目录

• 闭包和模块化
• 工厂函数和构造函数模式
• 原型链和继承
• 事件系统
• AJAX实现
• DOM操作与遍历
• 动画与特效
• 数据缓存
• 插件系统
• 跨域与安全性

---

闭包和模块化

jQuery源码的组织结构非常精妙，其中闭包和模块化的应用是其核心设计之一，它们共同保证了代码的高效运行、良好的封装性以及对外部环境的低干扰。

闭包基础

闭包是一种能够访问其自身作用域、外部函数作用域以及全局作用域中变量的函数。在jQuery中，闭包被广泛用来创建私有变量和方法，避免全局变量污染，同时允许内部函数访问外部函数的局部变量。

jQuery入口函数

jQuery的核心入口代码是一个经典的闭包示例，它确保了所有内部变量和函数的私密性，仅通过暴露必要的API（如$和jQuery）与外部交互。

(function(window, undefined) {
    // jQuery核心代码
})(window);

• 立即执行函数表达式：这段代码是一个自执行的匿名函数，它立即执行并将window对象作为参数传递，同时也传递了undefined来确保在压缩代码时undefined不会被重新赋值。
• 变量隔离：所有在此函数内部声明的变量和函数都是局部的，外部无法直接访问，除非显式通过返回值或闭包暴露出去。

模块化设计

jQuery采用模块化设计，将不同的功能划分为独立的模块，每个模块负责一部分功能，如DOM操作、事件处理、Ajax通信等。模块化通过闭包和对象字面量实现，确保了代码的高内聚和低耦合。

内部模块的闭包实现

以jQuery的事件模块为例，它通过闭包来封装内部状态和方法，同时通过原型链（.fn）扩展公共方法。

jQuery.extend = function() {...}; // 扩展对象方法
jQuery.fn = jQuery.prototype = {...}; // jQuery实例方法的原型

// 事件模块内部实现
jQuery.fn.extend({
    on: function(types, selector, data, fn, one) {...},
    off: function(types, selector, fn) {...},
    trigger: function(event, data) {...},
    // ...其他事件相关方法
});

• .extend()方法：用于扩展jQuery对象和jQuery原型对象，实现模块功能的添加。
• .fn.extend()：特别用于扩展jQuery实例对象（即jQuery包装集）的方法，如.on()、.off()等，这些都是事件处理相关的公共API。

模块间的依赖管理

虽然早期的jQuery没有采用现代的AMD或ES6模块系统，但它通过函数的顺序调用和内部函数的引用，巧妙地管理了模块间的依赖关系，确保了代码的有序加载和执行。

私有变量与方法

在闭包中，jQuery定义了大量的私有变量和方法，这些变量和方法只在内部使用，外部无法直接访问，比如用于事件处理的缓存、特殊事件处理函数等。

var event = {
    add: function(elem, types, handler, data, selector) {...}, // 私有方法
    remove: function(elem, types, handler, selector, mappedTypes) {...}, // 私有方法
    // ...更多私有方法和变量
};

闭包的深入应用：数据缓存与事件处理

在jQuery中，闭包的一个关键应用是实现元素的私有数据存储机制——.data()方法。通过闭包，jQuery为每一个DOM元素创建了一个独立的作用域，用于存放与其相关的数据，而这些数据对外部是不可见的，从而保证了数据的安全性和私密性。

jQuery.extend({
    data: function(elem, name, data, pvt /* Internal Use Only */) {
        if (!acceptData(elem)) {
            return;
        }

        var internalKey = jQuery.expando,
            getByName = typeof name === "string",
            isNode = elem.nodeType,
            cache = isNode ? jQuery.cache : elem,
            id = isNode ? elem[internalKey] : internalKey;

        // ...省略具体实现细节...
    }
});

• .data()方法：利用闭包为每个元素创建独立的数据存储空间，即使元素ID相同，它们的数据也是隔离的。
• 私有变量：internalKey作为一个内部变量，通过闭包保护起来，避免了全局污染。

模块化与插件系统

jQuery的插件系统是模块化设计的另一个体现。开发者可以轻易地扩展jQuery的功能，而这些扩展并不影响jQuery的核心代码，也不会与其他插件产生冲突。这是因为每个插件都是通过扩展jQuery的原型对象.fn来实现的，这种机制保证了高度的模块化和可插拔性。

(function($) {
    $.fn.myPlugin = function(options) {
        // 插件代码
    };
})(jQuery);

• IIFE（立即调用的函数表达式）：确保了插件内部变量和方法的私有性，同时将$作为参数传入，避免了命名冲突。
• 原型扩展：通过$.fn.myPlugin，插件方法被添加到所有jQuery对象实例上，实现了方法的复用和链式调用。

性能考量与优化

虽然闭包和模块化带来了诸多好处，但不当使用也可能导致内存泄露或性能问题，尤其是在处理大量DOM元素和事件时。jQuery对此采取了一系列优化措施：

• 事件委托：通过.on()方法实现事件委托，减少了事件监听器的数量，提高了性能。
• 缓存利用：在.data()、选择器查询等操作中，充分使用缓存机制，避免重复计算。
• 及时清理：在不再需要时，及时清理数据和事件监听器，防止内存泄漏。

工厂函数和构造函数模式

入口函数与初始化

jQuery的入口是一个典型的立即执行函数表达式（IIFE），它创建了一个封闭的作用域，以避免全局变量污染。在这个作用域内，jQuery被定义为一个函数，同时也是构造函数。

(function(window, undefined) {
    var jQuery = function(selector, context) {
        // 构造函数逻辑
        return new jQuery.fn.init(selector, context);
    };

    jQuery.fn = jQuery.prototype = {
        // 原型方法
        init: function(selector, context, rootjQuery) {
            // 初始化逻辑
        },
        // 更多原型方法...
    };

    // 将init方法的原型指向jQuery.fn，实现原型链继承
    jQuery.fn.init.prototype = jQuery.fn;

    // 导出jQuery
    window.jQuery = window.$ = jQuery;
})(window);

工厂函数模式

当调用jQuery(selector)时，它实际上是一个工厂函数，负责根据传入的参数创建并返回一个jQuery对象实例。这个过程通过内部的init方法完成，确保每次调用都能返回一个全新的实例，同时支持链式调用。

jQuery("div"); // 返回一个jQuery对象，包含所有<div>元素

构造函数模式

jQuery.fn.init扮演了构造函数的角色，负责初始化新创建的jQuery实例。它接收选择器、上下文等参数，执行DOM查找、元素包装等操作，并将必要的属性和方法挂载到新实例上。通过将init.prototype指向jQuery.fn，使得每个实例都可以访问到jQuery原型上的方法。

jQuery.fn.init = function(selector, context, rootjQuery) {
    // 实例化逻辑，如DOM选择、数据初始化等
    // ...
    // 返回this，允许链式调用
    return this;
};

链式调用的实现

链式调用是jQuery的一大特色，得益于每个方法都返回当前jQuery对象实例（this）。这样，就可以连续调用多个方法，而无需重复选择元素。

$("div").addClass("selected").show().fadeOut(1000);

混合模式的优势

• 灵活性：通过工厂函数模式，jQuery可以处理多种类型的输入（如选择器字符串、HTML字符串、DOM元素、jQuery对象等），并统一返回jQuery实例。
• 面向对象：构造函数模式允许为每个实例分配独立的属性和方法，支持更复杂的对象模型。
• 链式调用：结合两者的优点，实现简洁、高效的API调用风格。

性能与优化

• 缓存与重用：jQuery在内部使用了缓存机制来存储查询结果，避免了对同一选择器的重复查询。
• 方法合并：通过.extend()方法，可以将多个对象合并到一起，减少代码冗余，提高执行效率。

原型链和继承

原型链基础

在深入jQuery之前，首先回顾JavaScript的原型链机制。每个JavaScript对象都有一个内部属性[[Prototype]]（通常称为__proto__或访问器prototype），指向它的原型对象。原型对象也是一个普通的对象，可以拥有自己的属性和方法，包括另一个原型对象的引用，形成原型链。当尝试访问一个对象的属性时，如果该对象本身没有这个属性，则会向上查找其原型链。

jQuery的构造函数与原型

jQuery的核心构造函数是jQuery，通常以$符号作为别名。jQuery对象实质上是一个函数，同时也是构造函数，因此它有自己的原型对象jQuery.prototype。

function jQuery(selector, context) {
    // 构造函数内部逻辑
}
jQuery.prototype = {
    constructor: jQuery, // 确保constructor属性正确指向自身
    // 其他方法，如each, css, append等...
};

jQuery的继承机制

jQuery的继承机制主要体现在其extend方法上，它支持浅拷贝和深拷贝，同时也能实现类的继承。

浅拷贝与深拷贝

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // 是否深拷贝
    if (typeof target === "boolean") {
        deep = target;
        target = arguments[i] || {};
        i++;
    }

    // 复制过程
    // ...
};

类的继承

jQuery的类继承是通过extend方法实现的，通过传入一个对象作为子类的原型，以及一个构造函数作为子类。

// 实现继承
jQuery.fn.subClass = function(protoProps, staticProps) {
    var parent = this,
        child;

    // 建立子类构造函数
    child = function() {
        return parent.apply(this, arguments);
    };

    // 继承原型
    jQuery.extend(child.prototype, parent.prototype, protoProps);

    // 设置构造函数指向自己
    child.prototype.constructor = child;

    // 扩展静态属性
    jQuery.extend(child, parent, staticProps);

    return child;
};

jQuery实例对象的创建

当调用jQuery(selector)时，会返回一个jQuery实例对象，这个对象继承自jQuery.prototype。

var $div = $("<div>");
console.log($div instanceof jQuery); // true

代码示例：分析jQuery的链式调用

jQuery的链式调用是通过每个方法返回this实现的，保证了对同一个jQuery对象可以连续调用多个方法。

jQuery.fn.css = function(prop, value) {
    // 方法逻辑...
    return this; // 返回this，支持链式调用
};

$("#myDiv").css("color", "red").append("<p>Hello</p>");

jQuery选择器引擎Sizzle解析

除了原型链和继承机制外，jQuery的另一大亮点是其高效的选择器引擎——Sizzle。Sizzle负责解析CSS选择器，快速准确地定位DOM元素，是jQuery强大选择器功能的核心。

Sizzle的工作流程

• 解析选择器：将CSS选择器字符串转换成易于处理的结构，如解析ID选择器、类选择器、属性选择器等。
• 匹配元素：遍历DOM树，根据解析后的选择器结构，逐层筛选出符合条件的元素。
• 结果排序：按照文档顺序对匹配到的元素进行排序，确保结果的一致性。
• 优化查询：利用缓存机制减少重复查询，提高性能。

核心方法与实现

• Sizzle函数：是Sizzle的入口，接受选择器字符串和上下文元素作为参数，返回匹配的元素集合。

Sizzle = function(selector, context, results, seed) {
    // 解析选择器逻辑...
    // 匹配元素逻辑...
    // 返回结果...
};

• Selector解析：通过正则表达式和递归分解选择器字符串，将其转换为可执行的步骤序列。

• 匹配算法：对于每一种选择器类型，Sizzle都有对应的匹配逻辑，如ID选择器直接使用getElementById，类选择器通过遍历元素的classList属性等。

• 缓存机制：Sizzle使用quickExpr和cachedruns等变量来缓存常用选择器的查询结果，减少重复计算。

代码示例：简单理解Sizzle的工作原理

考虑一个简单的选择器.myClass，Sizzle内部可能会这样处理：

// 简化的Sizzle实现
function simpleSelectorEngine(selector, context) {
    var results = [],
        elements = (context || document).getElementsByTagName('*'),
        className = selector.slice(1); // 移除前面的点字符

    for (var i = 0; i < elements.length; i++) {
        if ((' ' + elements[i].className + ' ').indexOf(className) > -1) {
            results.push(elements[i]);
        }
    }

    return results;
}

var elements = simpleSelectorEngine('.myClass', document.body);
console.log(elements);

jQuery与ES6 Class的融合

随着ES6的普及，jQuery也开始支持ES6的Class语法，使得继承和对象创建更加直观和规范。尽管jQuery本身并未全面转向Class语法，但开发者可以利用ES6 Class来组织和扩展jQuery插件。

class MyPlugin extends jQuery.fn.init {
    constructor(selector, context) {
        super(selector, context);
        // 初始化逻辑...
    }

    customMethod() {
        // 自定义方法...
        return this; // 支持链式调用
    }
}

jQuery.fn.myPlugin = function() {
    return new MyPlugin(this.selector, this.context);
};

// 使用
$("div").myPlugin().customMethod();

事件系统

事件绑定与解绑

jQuery的事件绑定主要通过on方法实现，而解绑则通过off方法。这两个方法背后的核心逻辑在于维护一个事件处理器的映射表，确保事件的高效管理和执行。

on方法

jQuery.fn.on = function(types, selector, data, fn) {
    // 确保this指向jQuery对象
    this.each(function() {
        // 获取或创建事件处理器存储对象
        var events = jQuery._data(this, 'events') || jQuery._data(this, 'events', {}),
            handleObjIn = jQuery.extend({}, fn, {selector: selector, data: data});
        
        // 遍历types，可能是多个事件类型，如"click mouseover"
        types.split(/\s+/).forEach(function(type) {
            // 初始化特定事件类型的处理器列表
            var handlers = events[type] || (events[type] = []);
            
            // 将处理器添加到列表中
            handlers.push(handleObjIn);
            
            // 绑定原生事件
            if (this.addEventListener) {
                this.addEventListener(type, dispatchEvent, false);
            } else if (this.attachEvent) { // IE兼容
                this.attachEvent("on" + type, dispatchEvent);
            }
        });
    });
    
    return this; // 支持链式调用
};

// 事件派发函数
function dispatchEvent(event) {
    // 查找并执行相应的事件处理器
    // ...
}

off方法
off方法用于移除事件处理器，它同样遍历事件处理器映射表，根据提供的参数移除指定的事件处理器。

事件委托

jQuery的事件委托是通过on方法中的selector参数实现的。当事件触发时，jQuery会检查触发事件的目标元素是否匹配指定的选择器，只有匹配时才执行相应的事件处理器。

$("#parent").on("click", ".child", function(event) {
    // 当点击的是匹配".child"的选择器的元素时，此处理器会被执行
});

事件对象封装

jQuery对原生事件对象进行了封装，提供了统一的接口，如event.preventDefault()、event.stopPropagation()等，使得跨浏览器事件处理更加一致和方便。

深入理解事件委托

// 假设的事件委托实现
jQuery.fn.delegate = function(selector, eventType, handler) {
    return this.each(function(i, element) {
        jQuery(element).on(eventType, function(e) {
            var target = e.target;
            while (target !== this) {
                if (target.matches(selector)) {
                    handler.call(target, e);
                    break;
                }
                target = target.parentNode;
            }
        });
    });
};

事件冒泡与捕获

在深入讨论jQuery事件系统时，理解事件流的概念是至关重要的。事件流分为两个阶段：事件捕获阶段和事件冒泡阶段。虽然jQuery主要关注事件冒泡阶段，但了解整个事件流模型有助于在更复杂的场景下合理地使用事件委托。

• 事件冒泡：事件从最深的节点（事件目标）开始，然后逐级向上传播至根节点。这是jQuery默认的事件处理方式。
• 事件捕获：与冒泡相反，事件首先由最不具体的节点（通常是document）接收，然后逐级向下传播到最具体的节点（事件目标）。虽然jQuery不直接支持事件捕获，但可以通过原生的addEventListener方法的第三个参数来实现。

特殊事件处理

键盘事件

jQuery提供了对键盘事件的简化处理，如keydown, keyup, 和 keypress。它允许开发者监听键盘按键，并通过event.which获取按键的键码。

触摸事件

针对移动端，jQuery支持触摸事件的处理，如touchstart, touchmove, touchend等。这使得在触摸设备上也能实现流畅的交互体验。

自定义事件

jQuery允许开发者创建和触发自定义事件，这为组件间通信提供了强大的机制。

$("#element").on("myCustomEvent", function(e, data) {
    console.log("Custom event triggered with data:", data);
});

// 触发自定义事件
$("#element").trigger("myCustomEvent", ["Hello, world!"]);

性能优化

为了提升事件处理的性能，jQuery采取了几项措施：

• 事件委托：通过委托减少了直接绑定到元素上的事件处理器数量，特别是在动态内容较多的场景下。
• 事件缓存：jQuery内部维护了一个事件缓存，避免了频繁的DOM查询，提高了事件处理的效率。
• 事件命名空间：通过命名空间区分不同的事件处理器，便于管理和移除特定类型的事件监听器，避免了全局查找。

深入事件委托性能优化

考虑一个列表项点击事件的委托优化示例：

// 不推荐的方式：委托到ul上，每次点击都会遍历所有li
$("ul").on("click", "li", function() {
    // 处理点击逻辑
});

// 推荐的方式：尽量减少遍历的范围，委托到最近的稳定父级元素
$("ul").on("click", "> li", function() {
    // 处理点击逻辑
});

AJAX实现

AJAX请求的核心函数ajax

jQuery的AJAX请求功能主要由$.ajax方法实现，它是所有其他AJAX方法（如‘$.get, $.post`等）的基础。

$.ajax = function(settings) {
    var deferred = $.Deferred(),
        xhr = createXHR(),
        url = parseURL(settings.url),
        data = settings.data,
        method = settings.type.toUpperCase();

    xhr.open(method, url, settings.async, settings.username, settings.password);

    // 设置请求头
    if (settings.headers) {
        for (var header in settings.headers) {
            xhr.setRequestHeader(header, settings.headers[header]);
        }
    }

    // 设置响应类型
    if (settings.dataType) {
        xhr.responseType = dataTypeToResponseType(settings.dataType);
    }

    // 发送请求
    xhr.send(convertData(data, method));

    // 监听状态变化
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                try {
                    var result = parseResponse(xhr.responseText, settings.dataType);
                    deferred.resolve(result, xhr.statusText, xhr);
                } catch (e) {
                    deferred.reject(xhr, 'parsererror', e);
                }
            } else {
                deferred.reject(xhr, 'error');
            }
        }
    };

    // 返回Promise对象，支持链式调用
    return deferred.promise();
};

数据处理与类型转换

• 发送数据处理：convertData函数根据HTTP方法（GET、POST等）和数据类型（如JSON、字符串等）对发送的数据进行适当的编码。
• 响应数据解析：parseResponse函数根据dataType参数（如"json", “xml”, "text"等）解析服务器返回的数据。

错误处理

jQuery的AJAX请求提供了丰富的错误处理机制，包括全局错误处理和单个请求的错误回调。

• 全局错误处理：通过$.ajaxSetup或$.ajaxPrefilter设置全局错误处理函数。
• 局部错误处理：在$.ajax的配置对象中，可以指定error回调函数来处理特定请求的错误。

配置选项与定制

$.ajax支持大量配置选项，如async, cache, timeout, beforeSend, complete等，允许开发者高度定制请求行为。

使用$.ajax发送POST请求

$.ajax({
    url: "/api/data",
    type: "POST",
    data: JSON.stringify({key: "value"}),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
        console.log("Success:", response);
    },
    error: function(xhr, status, error) {
        console.error("Error:", status, error);
    }
});

全局事件与AJAX预过滤器/后过滤器

• 全局事件：ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, ajaxSuccess等全局事件，可用于监控所有AJAX请求的状态。
• 预过滤器/后过滤器：使用$.ajaxPrefilter和$.ajaxTransport可以全局或针对特定条件修改AJAX请求的配置，或改变请求的传输机制。

DOM操作与遍历

选择器引擎Sizzle的集成

jQuery的DOM选择主要依赖于Sizzle选择器引擎。Sizzle负责解析CSS选择器字符串，并高效地遍历DOM树，返回匹配的元素集合。在jQuery中，选择器的使用非常直观：

$("div.myClass"); // 选择所有class为'myClass'的div元素

元素创建与插入

创建新元素

jQuery提供了$()工厂函数，可以用来创建新元素：

var $newElement = $("<div class='new'></div>");

插入元素

• append/prepend: 在元素内部的末尾/开头插入内容。
• after/before: 在元素外部的后面/前面插入内容。
• appendTo/prependTo: 与上述相反，改变操作的方向。

属性操作

jQuery提供了统一的API来读取和设置DOM元素的属性、样式和数据属性。

• attr: 读取或设置属性值。
• css: 读取或设置样式。
• data: 存取自定义数据属性。

内容操作

html/text/val: 分别用于读取或设置元素的HTML内容、文本内容和表单元素的值。

遍历方法

jQuery的遍历方法使得开发者能够灵活地在DOM树中导航，包括但不限于：

• children: 获取子元素集合。
• parents/parent: 获取父元素集合或单一父元素。
• next/siblings: 获取下一个兄弟元素或所有兄弟元素。
• closest: 查找最近的匹配祖先元素。
• each: 遍历集合中的每个元素，并执行回调函数。

源码分析示例：$.fn.find实现

find方法是DOM遍历中的一个重要方法，用于在当前元素集合的后代中查找匹配的元素。

$.fn.find = function(selector) {
    var ret = this.constructor(),
        elems = selector ? this.map(function() {
            return findWithSelector(this, selector);
        }) : this;

    push.apply(ret, elems.get());
    return ret;
};

function findWithSelector(context, selector) {
    var set = Sizzle(selector, context);
    if (context.nodeType === 1) {
        push.apply(set, context.getElementsByTagName(selector));
        push.apply(set, context.querySelectorAll(selector));
    }
    return set;
}

这段代码展示了find方法的基本逻辑：

• 创建一个新的jQuery对象ret，用于存放找到的元素。
• 如果提供了选择器，则对当前元素集合的每个元素调用findWithSelector，使用Sizzle引擎查找匹配的后代元素。
• 如果没有提供选择器，则直接将当前元素集合复制到ret中。
• 最后，将找到的所有元素合并到ret中，并返回。

性能优化

• 缓存选择器结果：避免重复查询相同的选择器。
• 链式调用：减少DOM操作次数，提高性能。
• 最小化DOM操作：尽可能在内存中操作元素，最后一次性更新DOM。

动画与特效

动画基础：animate方法

animate是jQuery中最核心的动画方法，它可以用来改变元素的CSS属性值，实现各种动画效果。

$("#element").animate({
    width: "100px",
    height: "100px",
    opacity: 0.5
}, 1000, function() {
    // 动画完成后的回调
});

动画原理

时间间隔与步进函数
jQuery动画基于定时器（setTimeout或requestAnimationFrame）实现，通过不断调整元素的样式属性，在一定时间内完成从初始值到目标值的变化。动画的核心是一个步进函数，它决定每一步的样式如何改变。

动画队列

jQuery的动画方法会自动管理动画队列，即在一个动画结束后自动执行队列中的下一个动画。这意味着连续调用多个动画方法时，它们会按照顺序依次执行，而不是同时进行。

动画实现细节

queue与dequeue
jQuery动画利用了内部的queue和dequeue方法来管理动画队列。每个jQuery对象都有一个私有的动画队列，用于存储待执行的函数。

fx.tick

动画的调度器，它控制动画的执行节奏，确保动画按预期的时间间隔进行。在旧版jQuery中，这可能通过setTimeout实现；而在现代浏览器中，更倾向于使用requestAnimationFrame，以获得更平滑的动画效果和更好的性能。

自定义动画

jQuery允许用户通过$.fx.step来自定义动画属性的步进函数，从而扩展动画支持的CSS属性。

$.fx.step.myProperty = function(fx) {
    fx.elem.style.myProperty = fx.now + 'px';
};

随后，就可以像使用内置属性一样使用自定义属性：

$("#element").animate({
    myProperty: 100
}, 1000);

特效方法

除了animate之外，jQuery还提供了一系列预定义的动画效果，如fadeIn, fadeOut, slideUp, slideDown等，这些方法实质上都是animate的封装，提供了更简便的API。

源码分析示例：fadeIn的简化实现

$.fn.fadeIn = function(speed, easing, callback) {
    return this.animate({
        opacity: 'show'
    }, speed, easing, callback);
};

fadeIn方法本质上是对animate的调用，通过改变元素的透明度来实现淡入效果。这里opacity: 'show'是一个特殊值，意味着将透明度调整到可见状态。

性能与优化

• 硬件加速：利用CSS3的transform和transition属性，可利用GPU加速动画。
• 减少重排与重绘：通过修改transform和opacity这类不会引起页面布局变化的属性，减少动画过程中的重排和重绘。
• 动画队列管理：合理安排动画序列，避免不必要的动画积累，减少CPU和内存消耗。

数据缓存

数据缓存基础：.data()方法

.data()方法是jQuery数据缓存的核心接口，它允许在DOM元素上绑定数据，而这些数据不会随HTML一起被序列化或发送到服务器。

$(selector).data(key, value); // 设置数据
var value = $(selector).data(key); // 获取数据

数据存储结构

jQuery的数据缓存机制实际上是在每个DOM元素上附加了一个私有属性（通常为jQuery{随机数}_data），这个属性指向一个对象，用于存储所有关联的数据键值对。

数据缓存实现分析

数据存储

当调用.data(key, value)设置数据时，jQuery首先检查元素上是否存在数据缓存对象，如果不存在则创建。之后，将数据键值对存入此对象。

// 简化的数据存储逻辑
if (!element[jQuery.expando]) {
    element[jQuery.expando] = jQuery.uuid++; // 生成唯一ID
}
if (!element[jQuery.expando + "_" + key]) {
    element[jQuery.expando + "_" + key] = value;
} else {
    element[jQuery.expando + "_" + key] = value;
}

数据访问

通过.data(key)访问数据时，jQuery会直接从元素的缓存对象中读取对应的键值。

// 简化的数据访问逻辑
return element[jQuery.expando + "_" + key];

数据更新与删除

更新数据通过再次调用.data(key, newValue)实现，实际上是覆盖原有键的值。删除数据则可以使用.removeData(key)方法，从缓存对象中移除对应键值对。

内存管理与性能优化

• 内存泄漏预防：当元素从DOM中移除时，jQuery会尝试清理与之相关的数据缓存，防止内存泄漏。
• 性能优化：通过直接在DOM元素上挂载数据，而非在jQuery实例上，减少了查找时间，提升了数据访问速度。
• 事件委托与数据共享：在事件委托中，通过数据缓存可以在事件处理程序中快速访问目标元素的数据，无需每次事件触发时重新查询。

数据缓存初始化

// jQuery源码中关于数据缓存初始化的部分逻辑
jQuery.extend({
    cache: {},
    uuid: 1,
    expando: "jQuery" + (new Date()).getTime(),

    // 用于获取或设置数据
    data: function(elem, name, data, pvt /* Internal Use Only */, _pvt /* Private Use Only */) {
        // ... 省略了大量逻辑，包括缓存对象的创建、数据的读取、更新和删除等
    }
});

插件系统

基础插件编写

最简单的jQuery插件就是一个扩展jQuery原型(jQuery.fn)的方法。

jQuery.fn.myPlugin = function(options) {
    // 'this'指向jQuery对象，包含所有匹配的元素
    return this.each(function() {
        var $this = $(this);
        // 根据options执行具体操作
        // ...
    });
};

链式调用

jQuery插件通常支持链式调用，即在调用插件方法后，还可以继续调用jQuery的其他方法或再次调用该插件方法。

$("#element").myPlugin().css("color", "red");

要实现链式调用，插件方法必须返回this（即当前jQuery对象）。

插件参数与默认配置

大多数插件会接受一个配置对象作为参数，并提供默认配置。

jQuery.fn.myPlugin = function(options) {
    var settings = $.extend({}, $.fn.myPlugin.defaults, options);
    // ...
};
$.fn.myPlugin.defaults = {
    color: "blue",
    size: "medium"
};

高级插件设计

私有方法与变量
为了保持插件的封装性，可以使用闭包来定义私有方法和变量。

(function($) {
    var privateMethod = function() { /*...*/ };
    
    $.fn.myPlugin = function(options) {
        // 可以调用privateMethod
        privateMethod.call(this);
        // ...
    };
})(jQuery);

插件扩展性

提供钩子函数（hooks）或事件，允许用户在特定阶段介入插件流程，增强插件的灵活性和可扩展性。

$.fn.myPlugin = function(options) {
    var beforeStart = options.onBeforeStart;
    if ($.isFunction(beforeStart)) {
        beforeStart.call(this);
    }
    // ...
};

如何扩展jQuery原型

// jQuery.fn 是 jQuery.prototype 的别名
jQuery.fn.myPlugin = function(options) {
    // 'this'指向一个jQuery实例，包含了匹配的DOM元素集合
    return this.each(function() {
        var elem = this; // 当前迭代的DOM元素
        // 插件的具体逻辑...
    });
};

跨域与安全性

跨域请求与CORS

在现代Web开发中，跨域资源共享（Cross-Origin Resource Sharing, CORS）是一个重要概念，jQuery的AJAX也很好地支持了CORS请求。

如何启用CORS

CORS通过在HTTP响应头中添加特定字段来告知浏览器允许跨域请求。例如，服务器可能返回以下响应头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

jQuery中的CORS

jQuery的$.ajax会自动处理CORS请求，开发者无需特殊配置即可发起跨域请求。但是，需要注意的是，某些特定情况下（如使用特定版本的IE），可能需要手动设置xhrFields来启用CORS：

$.ajax({
    url: "http://other-domain.com/api/data",
    type: "GET",
    xhrFields: {
        withCredentials: true // 如果需要携带cookie等凭证信息
    },
    crossDomain: true, // 显式指定跨域
    success: function(data) {
        console.log("Received data:", data);
    },
    error: function(xhr, status, error) {
        console.error("Error:", status, error);
    }
});

JSONP原理与实现

在CORS普及之前，JSONP（JSON with Padding）是一种常用的跨域数据请求技术。jQuery也提供了对JSONP的支持，通过dataType: "jsonp"来实现。

JSONP的工作机制

• 请求构造：JSONP通过动态创建<script>标签来绕过同源策略，请求包含回调函数调用的JSON数据。
• 回调处理：服务器返回的数据格式为callback({“key”: “value”})，其中callback是客户端提供的函数名。
• 数据处理：jQuery自动创建该函数，并在脚本加载完成后调用，从而获取到数据。

使用jQuery发起JSONP请求

$.ajax({
    url: "http://other-domain.com/api/data",
    dataType: "jsonp",
    jsonpCallback: "myCallback", // 指定回调函数名
    success: function(data) {
        console.log("Received data:", data);
    },
    error: function(xhr, status, error) {
        console.error("Error:", status, error);
    }
});

// 定义回调函数
function myCallback(data) {
    console.log("JSONP callback fired with data:", data);
}