How to mock jquery ready function

Cheok Yan Cheng Published at Dev

Cheok Yan Cheng

Due to certain reason, we are going to remove jquery from our legacy app (Please don't ask why!)

However, there 1000+ of template files by designers, are making used of jquery ready function. We plan to make the following mock strategy.

<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>

Take note, we tend to mock jquery ready with the following code snippet.

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

It works for cases

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

However, how can we make the following syntax works as well?

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

Tushar

Check if the passed parameter is function

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

Code:

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

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

Collected from the Internet

Please contact [email protected] to delete if infringement.