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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery 源码分析：当 selector 传来一个函数时，怎么进行处理？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4327字，纯文字阅读大概需要7分钟。

内容图文

本文章为 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);
    }

内容总结

以上是互联网集市为您收集整理的jQuery 源码分析：当 selector 传来一个函数时，怎么进行处理？全部内容，希望文章能够帮你解决jQuery 源码分析：当 selector 传来一个函数时，怎么进行处理？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端