Managing Client-side Data - HTML5, JavaScript, and jQuery - page 209

This is taking advantage of the $.getScript helper in jQuery to load the appropriate
JavaScript via an asynchronous AJAX call. The result of the AJAX call is the script we
wish to load, which jQuery is then dynamically adding to the DOM.
Due to the fact the JavaScript is now dynamically loading the appropriate storage engine
at run-time, we also need to ensure we do not start using the storage engine until the script
has been processed. We therefore initialise the screen inside the success (done) callbacks
from the AJAX calls.
The current implementation duplicates the initialisation logic for each script we attempt to
load; therefore we can rewrite it as follows:
function initScreen() {
$(document).ready(function() {
tasksController.init($('#taskPage'), function() {
tasksController.loadTasks();
});
});
}
if (window.indexedDB) {
$.getScript( "scripts/tasks-indexeddb.js" )
.done(function( script, textStatus ) {
initScreen();
})
.fail(function( jqxhr, settings, exception ) {
console.log( 'Failed to load indexed db script' );
});
} else if (window.localStorage) {
$.getScript( "scripts/tasks-webstorage.js" )
.done(function( script, textStatus ) {
initScreen();
})
.fail(function( jqxhr, settings, exception ) {
console.log( 'Failed to load web storage script' );
});
}