A small module for orchestrating and dynamically loading JS or CSS resources using Promises.

Orchestrate-DynamicLoading-Resources.js

window.UT = window.UT || {};
UT.Masterpage = function() {
	var
		_jqui = null,
		_wap = null,
		_kom = null,
		_sps = null,
		_module = {
			LoadJQueryUI: UT$Masterpage$LoadJQueryUI,
			LoadKnockout: UT$Masterpage$LoadKnockout,
			LoadSPServices: UT$Masterpage$LoadSPServices,
			IsValidType: UT$Masterpage$IsValidType,
			LoadResourceFromTenantRoot: UT$Masterpage$LoadResourceFromTenantRoot,
			LoadResourceFromSiteCollection: UT$Masterpage$LoadResourceFromSiteCollection,
			LoadAllResources: UT$Masterpage$LoadAllResources,
			LoadResource: UT$Masterpage$LoadResource,
			LoadWebproperties: UT$Masterpage$Webproperties
		};
	return _module;

	function UT$Masterpage$Webproperties(clearCache) {
		if (_wap && (typeof(clearCache) === 'undefined' || !clearCache)) return _wap;
		_wap = new $.Deferred();
		var req = {
			type: 'GET',
			url: String.format("{0}/_api/web/AllProperties", _spPageContextInfo.webServerRelativeUrl),
			headers: { ACCEPT: 'application/json;odata=minimalmetadata' }
		};
		$.ajax(req)
  		.done(function (response, textStatus, xhrObj) {
  			var newData = {};
  			for(var k in response) {
  				if (k.match(/^odata./g)) continue;
  				newData[k] = response[k];
  			}
  			_wap.resolve(newData);
  		})
  		.fail(function(xhrObj, textStatus, err) {
  			var
  				e = JSON.parse(xhrObj.responseText),
  				err = e.error || e["odata.error"],
  				m = '<div style="color:red;font-family:Calibri;font-size:1.2em;">Exception<br/>&raquo; ' +
  					((err && err.message && err.message.value) ? err.message.value : (xhrObj.status + ' ' + xhrObj.statusText))
  					+' <br/>&raquo; '+r.url+'</div>';
  			_wap.reject({ success: false, error: m, uri: endpoint });
  		});
		
		/** E.g.

				UT.Masterpage.LoadWebproperties()
					.done(function(props) {
						for(var k in props) {
							console.log('property: key='+k+', value='+props[k]);
						}
					});
		**/
		return _wap;
	}

	function UT$Masterpage$LoadJQueryUI() {
		if (!_jqui) {
			var deps = [
				UT$Masterpage$LoadResourceFromTenantRoot("_catalogs/masterpage/Buzz365/js/jquery-ui-1.11.2.min.js"),
				UT$Masterpage$LoadResourceFromTenantRoot("_catalogs/masterpage/Buzz365/css/flick/jquery-ui-1.11.2.min.css")
			];
			_jqui = $.when.apply($, deps)
						.done(function(jquijs, jquicss) {
							if (window.console) {
								window.console.log('>> UT$Masterpage$LoadJQueryUI ['+jquijs+']');
								window.console.log('>> UT$Masterpage$LoadJQueryUI ['+jquicss+']');
							}
						});
		}
		/** E.g
				UT.Masterpage.LoadJQueryUI()
					.done(function(jquijs, jquicss) {
						console.log('loaded jquery');
					});
		**/
		return _jqui;
	}

	function UT$Masterpage$LoadKnockout() {
		if (!_kom) {
			_kom = UT$Masterpage$LoadResourceFromTenantRoot("_catalogs/masterpage/Buzz365/js/knockout-3.2.0.js");
		}
		/** E.g
				UT.Masterpage.LoadKnockout()
					.done(function(r) {
						console.log('loaded: '+r);
					});
		**/
		return _kom;
	}

	function UT$Masterpage$LoadSPServices() {
		if (!_sps) {
			_sps = UT$Masterpage$LoadResourceFromTenantRoot("_catalogs/masterpage/Buzz365/js/jquery.SPServices-2014.01.min.js");
		}
		return _sps;
	}

	function UT$Masterpage$IsValidType(typeName) {
		if (!typeName || !typeName.length) return true;
		var 
			bits = typeName.split('.'),
			r = bits.reduce(function(p,c) {
						return (typeof p == "undefined") ? p : p[c];
					}, window);
		return typeof r !== 'undefined';
	}

	function UT$Masterpage$LoadResourceFromTenantRoot(url, afterUi) {
		var
			m = _spPageContextInfo.siteAbsoluteUrl.match(/(http[s]?:\/\/[^\/]*)/gi),
			tenantUrl = m && m.length ? m[0] : '',
			absoluteUrl = String.format("{0}/{1}", tenantUrl.replace(/\/$/,''), url.replace(/^\//,''));
		return UT$Masterpage$LoadResource(absoluteUrl, afterUi);
	}
	
	function UT$Masterpage$LoadResourceFromSiteCollection(url, afterUi) {
		var relativeUrl = String.format("{0}/{1}", _spPageContextInfo.siteServerRelativeUrl.replace(/\/$/,''), url.replace(/^\//,''));
		return UT$Masterpage$LoadResource(relativeUrl, afterUi);
	}

	function UT$Masterpage$LoadAllResources(urls, afterUi) {
		var deps = [];
		for(var $i=0; $i < urls.length; $i++) {
			deps.push(UT$Masterpage$LoadResource(urls[$i], afterUi));
		}
		if (!deps.length) return new $.Deferred().reject('no resource urls supplied!').promise();

		var p = $.when.apply($, deps)
			.done(function() {
				if (window.console) {
					for(var $i=0; $i < arguments.length; $i++){
						window.console.log('>> UT$Masterpage$LoadAllResources ['+arguments[$i]+']');
					}
				}
			});
		/** E.g
				UT.Masterpage.LoadAllResources('','')
					.done(function(arguments) {
						console.log('loaded resources');
					});
		**/
		return p.promise();
	}
	
	function UT$Masterpage$LoadResource(url, afterUi) {
	   var
	   	p = new $.Deferred(),
	      resource = null,
	      headOrBody = document.getElementsByTagName(typeof afterUi !== 'undefined' && afterUi ? "body" : "head")[0];
	   if (url.match(/.js$/gi)) {
	      resource = document.createElement("script");
	      resource.type = "text/javascript";

	      if (resource.readyState) { // IE
	         resource.onreadystatechange = function() {
	            if (resource.readyState == "loaded" || resource.readyState == "complete") {
	               resource.onreadystatechange = null;
	               p.resolve(url);
	            }
	         };
	      } else { // good browsers
	         resource.onload = function() {
	            resource.onload = null;
	            p.resolve(url);
	         };
	      }
	      resource.src = url;
	   } else if (url.match(/.css$/gi)) {
	      resource = document.createElement('link');
	      resource.rel = 'stylesheet';
	      resource.type = "text/css";
	      resource.href = url;
	      p.resolve(url);
	   }
	   if (resource) {
	      headOrBody.appendChild(resource);
	   } else {
	   	p.reject('unsupported resource type, only *.js or *.css are allowed!');
	   }
	   return p.promise();
	}
}();