jQuery 源码分析：当 selector 传来一个函数时，怎么进行处理？

本文章为 0.9 版本，将会在稍后润色更新。本文使用的 jQuery 版本为 3.4.0

我们知道使用 $ 操作符时，可以往里面塞很多类型的参数，字符串，对象，函数...，jQuery 会根据不同的参数类型，让我们执行不同的操作。这其实就是“函数重载”的价值所在：它暴露出一个简洁的接口给用户，允许用户在使用这个接口时，通过参数类型控制函数的行为方式，是一种对用户非常友好的设计。

那么 jQuery 在 $ 这里的函数重载是怎样实现的呢？这篇文章我们只关心其中的一个细枝末节，传入一个函数时，jQuery 会怎么做：

首先我们看这里，jQuery 首先会判断传入的 selector 是不是一个函数，这里使用的是包装后的 isFunction 函数，它基本等同于 typeof 判断：

if (isFunction(selector)) {
  return root.ready !== undefined ?
    root.ready(selector) :

    // Execute immediately if ready is not present
    selector(jQuery);
}

如果判断是一个函数，jQuery 会去判断 root.ready 的值，这里 root 是什么呢？看下面的代码：

// Method init() accepts an alternate rootjQuery
// so migrate can support jQuery.sub (gh-2101)
root = root || rootjQuery;

rootjQuery = jQuery(document);

一般情况下，root 是 jQuery(document) 的返回值，这里就有点绕了，因为我们本来是要解决“选择器是函数的时候，jQuery 会怎么做”的问题，现在我们先要解决“选择器是对象的时候，jQuery 会怎么做”。在源码里 jQuery 是这样处理的：

return jQuery.makeArray(selector, this);

我们越来越深入了，现在我们要解决 jQuery.makeArray 这个方法在做什么的问题，这部分的代码在这里：

makeArray: function (arr, results) {
    var ret = results || [];

    if (arr != null) {
      if (isArrayLike(Object(arr))) {
        jQuery.merge(ret,
          typeof arr === "string" ?
            [arr] : arr
        );
      } else {
        push.call(ret, arr);
      }
    }

    return ret;
  },

可以简单理解为，jQuery 会把一个对象传入到它的数组中。

所以到目前为止，我们大概弄懂了 root 到底是个什么东西，简单来说，是一个数组，并且第一个元素是 document 对象。我们继续，接下来，我们想知道的实际上是 root.ready 是什么，当我们回顾一下最初的代码就能知道，jQuery 处理函数的逻辑就是判断 root.ready 的值，如果该值为真值，就调用 root.ready 方法，并把我们的函数当做参数传进去，如果为假值，则直接调用这个函数，把我们的 jQuery 对象当做参数传进去。

对不起，接下来的重头戏我将会在日后补上了，这次我先描述一个大概，让我们看看和 root.ready 有关的源码：

// The deferred used on DOM ready
var readyList = jQuery.Deferred();

jQuery.fn.ready = function (fn) {

  readyList
    .then(fn)

    // Wrap jQuery.readyException in a function so that the lookup
    // happens at the time of error handling instead of callback
    // registration.
    .catch(function (error) {
      jQuery.readyException(error);
    });

  return this;
};

jQuery.extend({

  // Is the DOM ready to be used? Set to true once it occurs.
  isReady: false,

  // A counter to track how many items to wait for before
  // the ready event fires. See #6781
  readyWait: 1,

  // Handle when the DOM is ready
  ready: function (wait) {

    // Abort if there are pending holds or we're already ready
    if (wait === true ? --jQuery.readyWait : jQuery.isReady) {
      return;
    }

    // Remember that the DOM is ready
    jQuery.isReady = true;

    // If a normal DOM Ready event fired, decrement, and wait if need be
    if (wait !== true && --jQuery.readyWait > 0) {
      return;
    }

    // If there are functions bound, to execute
    readyList.resolveWith(document, [jQuery]);
  }
});

// ===> readyList
var readyList = jQuery.Deferred();

其实注释里也写的很清晰了，jQuery.ready 将会在 DOM 加载完毕后，调用传入的参数，但是就是这样一个简单地功能，jQuery 采用了 jQuery.Deferred() 方法去实现，这个方法到底做了什么呢？请看我（可能的）下一篇文章：）

总结一下，如果给 jQuery 传入一个函数类型的参数会发生什么？不完全准确的回答是，它会等 DOM 加载完毕后被调用。具体来说，是等待 doument 对象上的 DOMContentLoaded 事件被触发。

下面是无声的证据：

        jQuery.ready.then = readyList.then;

	// The ready event handler and self cleanup method
	function completed() {
		document.removeEventListener("DOMContentLoaded", completed);
		window.removeEventListener("load", completed);
		jQuery.ready();
	}

	// Catch cases where $(document).ready() is called
	// after the browser event has already occurred.
	// Support: IE <=9 - 10 only
	// Older IE sometimes signals "interactive" too soon
	if (document.readyState === "complete" ||
		(document.readyState !== "loading" && !document.documentElement.doScroll)) {

		// Handle it asynchronously to allow scripts the opportunity to delay ready
		window.setTimeout(jQuery.ready);

	} else {

		// Use the handy event callback
		document.addEventListener("DOMContentLoaded", completed);

		// A fallback to window.onload, that will always work
		window.addEventListener("load", completed);
	}