Using Require.js with Page.js to do progressive enhancement nicely.

reqpage.js

 require(["jquery", "utils", "routeHelpers"], function() {
  
  	// get new page fragment and swap it out. 
  	var frax = function(context, next) { 
		if(!context.init) { // No need to fetch the page as its the initial page load and markup will be in the page.
			$.get(context.canonicalPath+'?_frax=true', function(markup) { // gets the page without the layout.
				$('#container').html(markup);
				next();
			});	
		}else {
			next();
		}
	};

	var showLoading = function(context, next) {
		if(context.init) {
			// add the mask. enable loading state. 
		}
		next();
	}
	var hideLoading = function() {
		// remove mask and animate in new page. 
		next();
	}

	page('/team/:siteToken/create', showLoading, frax, hideLoading, function(context, next){
		require(["pages/createNew"], function($) {
			GS.config.siteToken = context.params.siteToken;
			GS.pages.createNew();
		});
	});

	page('/team/:siteToken', showLoading, frax, hideLoading,  showTopBar, function(context, next){
		require(["target"], function($) {
			GS.config.siteToken = context.params.siteToken;
			GS.target().pageLoad();
			console.log('site loaded');
		});
	});

	page('/team/create', showLoading, frax, hideLoading); // just animate in.

	page();
});