Question

I would like to extend $.mobile.changePage to accept more options such as adding a callback function for when the page finishes loading as well as more options for the AJAX call like contentType. Is there a way to do this without changing the source code? If not, I am willing to change the source code for educational purposes, but could not find it in the jQuery Mobile GitHub: https://github.com/jquery/jquery-mobile . Thanks for any helps or guidance.

Answer 1

One of the more exciting parts of JavaScript is that ability to redefine any function using a technique which is commonly referred to as Monkey Patching. (as an aside ES5 provides a new freeze method which allows developers to prevent such modifications.)

Here’s an example of a JavaScript MonkeyPatch which allows us to modify the behaviour of a function without editing it’s source:

// A namespace object.
var Example = {};

// Sums two values.
Example.sum = function (a, b) {
    return a + b;
}

// Usage:
var result = Example.sum(1, 2);

Say we wanted to add logging to the sum method, we could just add a console.log line to the function, but we can also monkey patch it:

// Store a reference to the current 'Example.sum' function.
var originalSum = Example.sum;

// Now redeclare Example.sum...
Example.sum = function (a, b) { 

    // Call the originalSum function first...
    var result = originalSum(a, b);

    // Now add some logging...
    console.log("Example.sum(" + a + ", " + b + ") yields " + result);

    return result;
};

Now when Example.sum is called, not only will we get the result as before, but a console message will also be written. With this in mind, you can monkey patch the $.mobile.changePage method in the same way:

var originalChangePage = $.mobile.changePage;

// Redefine `changePage` so it accepts a 'complete' function in the options
// object which will be invoked when the page change is complete.
$.mobile.changePage = function (to, options) {
    if (typeof options.complete === "function") {
        $(body).one("pagechange", function (event) { 
            options.complete(event);
        });
    }

    originalChangePage(to, options);
};