如何模拟 jquery 就绪功能答案

【问题标题】：How to mock jquery ready function如何模拟 jquery 就绪功能
【发布时间】：2015-11-10 07:32:28
【问题描述】：

由于某些原因，我们将从旧版应用程序中删除 jquery（请不要问为什么！）

然而，设计人员有 1000 多个模板文件正在使用 jquery 就绪功能。我们计划制定以下模拟策略。

<head>
<script type="text/javascript">
    // // http://stackoverflow.com/a/9899701
    (function(funcName, baseObj) {
        // The public function name defaults to window.docReady
        // but you can pass in your own object and own function name and those will be used
        // if you want to put them in a different namespace
        funcName = funcName || "docReady";
        baseObj = baseObj || window;
        var readyList = [];
        var readyFired = false;
        var readyEventHandlersInstalled = false;

        // call this when the document is ready
        // this function protects itself against being called more than once
        function ready() {
            if (!readyFired) {
                // this must be set to true before we start calling callbacks
                readyFired = true;
                for (var i = 0; i < readyList.length; i++) {
                    // if a callback here happens to add new ready handlers,
                    // the docReady() function will see that it already fired
                    // and will schedule the callback to run right after
                    // this event loop finishes so all handlers will still execute
                    // in order and no new ones will be added to the readyList
                    // while we are processing the list
                    readyList[i].fn.call(window, readyList[i].ctx);
                }
                // allow any closures held by these functions to free
                readyList = [];
            }
        }

        function readyStateChange() {
            if (document.readyState === "complete") {
                ready();
            }
        }

        // This is the one public interface
        // docReady(fn, context);
        // the context argument is optional - if present, it will be passed
        // as an argument to the callback
        baseObj[funcName] = function(callback, context) {
            // if ready has already fired, then just schedule the callback
            // to fire asynchronously, but right away
            if (readyFired) {
                setTimeout(function() {
                    callback(context);
                }, 1);
                return;
            } else {
                // add the function and context to the list
                readyList.push({
                    fn: callback,
                    ctx: context
                });
            }
            // if document already ready to go, schedule the ready function to run
            if (document.readyState === "complete") {
                setTimeout(ready, 1);
            } else if (!readyEventHandlersInstalled) {
                // otherwise if we don't have event handlers installed, install them
                if (document.addEventListener) {
                    // first choice is DOMContentLoaded event
                    document.addEventListener("DOMContentLoaded", ready, false);
                    // backup is window load event
                    window.addEventListener("load", ready, false);
                } else {
                    // must be IE
                    document.attachEvent("onreadystatechange", readyStateChange);
                    window.attachEvent("onload", ready);
                }
                readyEventHandlersInstalled = true;
            }
        }
    })("docReady", window);

    // Mock jquery.
    var jQuery = function(baseObj) {
        return {
            ready: function(baseObj) {
                docReady(baseObj);
            }
        }
    };
    var $ = jQuery;
</script>

</head>

请注意，我们倾向于使用以下代码 sn-p 来模拟 jquery。

// Mock jquery.
var jQuery = function (baseObj) {
    return {
        ready: function (baseObj) {
            docReady(baseObj);
        }
    }
};
var $ = jQuery;

适用于案例

jQuery(document).ready(function() {...});
$(document).ready(function() {...});

但是，我们如何才能使以下语法也有效？

$(function() {...});

【问题讨论】：

标签： javascript jquery document-ready ready

【解决方案1】：

检查传入的参数是否为函数

var jQuery = function(baseObj) {
    if (typeof baseObj === 'function')
        return docReady(baseObj);

代码：

// Mock jquery.
var jQuery = function (baseObj) {
    if (typeof baseObj === 'function')
        return docReady(baseObj);

    return {
        ready: function (baseObj) {
            docReady(baseObj);
        }
    }
};
var $ = jQuery;

【讨论】：

【解决方案2】：

在第三种情况下，您实际上并没有调用 ready 函数。因为它只是在其中绑定一个函数。

$(function() {...});

所以下面的函数没有被调用，你只是返回一个没有被调用的对象函数。

var jQuery = function (baseObj) {
    return {
        ready: function (baseObj) {
            docReady(baseObj);
        }
    }
};

第三种情况需要直接调用函数，如下。

 // Mock jquery.
  var jQuery = function (baseObj) {
      if (typeof(baseObj) === 'function') docReady(baseObj);
      return {
          ready: function (baseObj) {
              docReady(baseObj);
          }
      }
  };

演示：http://jsfiddle.net/kishoresahas/vnd92c1u/

我也遇到过类似的情况，一些类似的代码已经存在很长时间了。

【讨论】：