Load multiple JS files in one call

Posted by jj_jiles on Mar 30, 2010 in jQuery & Javascript | 0 comments

With this script, you can easily load multiple JavaScript files in one call. The main purpose behind this is to simply cut down on the clutter in your source code.

The function can be called from anywhere and the files are specified in an array

/* *********************************************************
*
* 	Setup a global config variable that
* 	stores all sitewide values such root
* 	url, absolute paths, Javascript library paths, etc.
*
********************************************************* */
	var config;
	config = {
		   URL : 'http://domain.com',
		   jsURL: "http://domain.com/js"
	};

/* **********************************************************************************************************
*
*	Function for looping through long lists of JS includes this function, when fed an array will
*	write the script tag to include the specified files as JS include files.
*
*	NOTE: This written to look in the 'js' folder under the site's root folder (http://domain.com/js/)
*
*	Directions:
*	config.loadComponents( { foldername:['filename.js'] } );
*
*	Example:
*	config.loadComponents( { jquery:['jquery-ui'] } );
*	OUTPUT: <script src='http://domain.com/js/jquery/jquery-ui.js' type='text/javascript'></script>
*
********************************************************************************************************** */
config.loadComponents = function (components) {
	for ( var key in components ) {
		var obj = components[key];
		for (var prop in obj) {
			var file = obj[prop];
			file = config.jsURL + '/' + key + "/" + file;
			document.write(unescape("%3Cscript src='" + file + "' type='text/javascript'%3E%3C/script%3E"));
		}
	}
}

/* *********************************************************
*
*	Call the loadComponents() function
*	pay attention to how folder and file are called
*		folder: ['filename1.js', 'filename2.js']
*
********************************************************* */
config.loadComponents( {
	jquery:[
		'jquery-1.3.2.min.js',
		'jquery.easing.1.3.js',
	],
	app:[
		'app.js',
	],
	scripts:[
		'facbox.js'
	]
});