JavaScript require / import / include modules

Require, import or include, name it as you wish but never forget the importance of modular design. This functionality enables you to divide your code into meaningful, purposeful and reusable modules enabling you to use your code as many times as you want and easing it’s maintenance. This functionality is supported in almost all modern programming languages like: C/C++, Java, C#, PHP, Ruby, Python, etc. under different names stated above, but not in only (for now) web client side programming language JavaScript. Of course we can be clever and use trick to emulate this behavior. Flexibility of this dynamic functional language, characteristic that makes it very favorable, will aid us once again to develop similar behavior like any other more complex languages.

Lets say that we have file structure like this:

• script.js
• ivar
  • util
    • array.js
    • string.js
  • net
    • _all.js
    • JSON.js
    • REST.js
    • XML.js

In short all we want is to in script.js do this:

require('ivar.util.string');
require('ivar.net.*');
require('ivar/util/array.js');
require('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');

ready(function(){
//do something when required scripts are loaded
});

We also want to include only script.js in our HTML file. To require other scripts, we have to know their names and their locations. To find the root location we have to find the URL of script.js. We will remember it as the root url and then use the supplied namespaces, for example ‘ivar.util.string‘ and transform them into ‘<url of script.js>/ivar/util/string.js‘. Now we have to append to html head dom element scripts with given locations. We will put a loading stack so scripts can be loaded asynchronously. Before loading a script we have to check is the script currently loading or is it already loaded. When all of the required scripts are loaded we will fire the functions stacked with ready method. If we want to include all of the scripts in a directory, we have to have _all.js that requires all scripts in that directory. By requiring ‘ivar.net.*‘ we really require ‘ivar.net._all.js’, that requires all scripts required inside it.

The following code does the described job:

	var _rmod = _rmod || {}; //require module namespace
	_rmod.LOADED = false;
	_rmod.on_ready_fn_stack = [];
	_rmod.libpath = '';
	_rmod.imported = {};
	_rmod.loading = {
	scripts: {},
	length: 0
	};
	_rmod.findScriptPath = function(script_name) {
	var script_elems = document.getElementsByTagName('script');
	for (var i = 0; i < script_elems.length; i++) {
	if (script_elems[i].src.endsWith(script_name)) {
	var href = window.location.href;
	href = href.substring(0, href.lastIndexOf('/'));
	var url = script_elems[i].src.substring(0, script_elems[i].length-script_name.length);
	return url.substring(href.length+1, url.length);
	}
	}
	return '';
	};
	_rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark the root directory of your library, any library
	_rmod.injectScript = function(script_name, uri, callback, prepare, async) {
	if(!prepare)
	prepare(script_name, uri);
	var script_elem = document.createElement('script');
	script_elem.type = 'text/javascript';
	script_elem.title = script_name;
	script_elem.src = uri;
	if(!async)
	async = false;
	script_elem.async = async;
	script_elem.defer = false;
	if(!callback)
	script_elem.onload = function() {
	callback(script_name, uri);
	};
	document.getElementsByTagName('head')[0].appendChild(script_elem);
	};
	_rmod.requirePrepare = function(script_name, uri) {
	_rmod.loading.scripts[script_name] = uri;
	_rmod.loading.length++;
	};
	_rmod.requireCallback = function(script_name, uri) {
	_rmod.loading.length–;
	delete _rmod.loading.scripts[script_name];
	_rmod.imported[script_name] = uri;
	if(_rmod.loading.length == 0)
	_rmod.onReady();
	};
	_rmod.onReady = function() {
	if (!_rmod.LOADED) {
	for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){
	_rmod.on_ready_fn_stack[i]();
	});
	_rmod.LOADED = true;
	}
	};
	_.rmod = namespaceToUri = function(script_name, url) {
	var np = script_name.split('.');
	if (np.getLast() === '*') {
	np.pop();
	np.push('_all');
	} else if (np.getLast() === 'js') {
	np.pop();
	}
	if(!url)
	url = '';
	script_name = np.join('.');
	return url + np.join('/')+'.js';
	};
	//you can rename based on your liking. I chose require, but it can be called include or anything else that is easy for you to remember or write, except import because it is reserved for future use.
	var require = function(script_name, async) {
	var uri = '';
	if (script_name.indexOf('/') > -1) {
	uri = script_name;
	var lastSlash = uri.lastIndexOf('/');
	script_name = uri.substring(lastSlash+1, uri.length);
	} else {
	uri = _rmod.namespaceToUri(script_name, ivar._private.libpath);
	}
	if (!_rmod.loading.scripts.hasOwnProperty(script_name)
	&& !_rmod.imported.hasOwnProperty(script_name)) {
	_rmod.injectScript(script_name, uri,
	_rmod.requireCallback,
	_rmod.requirePrepare, async);
	}
	};
	var ready = function(fn) {
	_rmod.on_ready_fn_stack.push(fn);
	};
	// —– USAGE —–
	require('ivar.util.string');
	require('ivar.net.*');
	require('ivar/util/array.js');
	require('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#39;);
	ready(function(){
	//do something when required scripts are loaded
	});

view raw

require.js

hosted with ❤ by GitHub

I chose to name the method ‘require’ but you can rename it however you like, remember import is a reserved word for future use in JavaScript, that means at some point module import will be enabled by standard, but until then we have to fallback to methods similar as one stated above. As we can see there is no special philosophy with importing / requiring / including modules in JavaScript. Combining this require module with namespace method described here provides the ultimate system for JavaScript modular development.

I have excluded this code from a large library I am writing so if you find an error or a typo please notify me, I would be grateful. Any suggestions, similar snippets  or any other kind of feedback is welcome in the comments section. I only hope that this peace of code helped you in some way. Thank you.

Tags: import, import module, include, include module, JavaScript, module, reqire, require module