using.js basic test

This is a quick and dirty test of using.js. The using.js (9kb) script allows you specify a dependency script with its source URL for a particular feature so that it can be late-loaded, but it will not re-load the source twice. There is no dependency upon other script libraries like jQuery to get started with using.js.

The callback function will try to wait a bit for the referenced script to load. The callback is truly synchronous (no wait) or the delay is set using using.wait=[milliseconds];. You can reference scripts on different domains by setting the global using.wait property, or by declaring the URIs as external URIs by passing true and/or an optional post-load milliseconds parameter before each URL, i.e.
using.register(true, 750, 'http://www.cachefile.net.nyud.net/scripts/jquery/1.2.3/jquery-1.2.3.js');.

The URL parameter in using.register()can take several URLs, not just one, as additional (third, fourth, ..) parameters to the using.register() function.

You do not need a callback function when calling using() if you just want to make sure the referenced script is loaded. using('jquery'); works fine as long as it has been pre-registered.

The big advantage of using.js is that you can manage one source script that does nothing but register a big list of script files by name, then in a larger web client app you can reference using.js and the registrations script and then have all you need for your app.

<html>
	<head>
		<script language="JavaScript" type="text/javascript" src="using.js"></script>
		<script language="JavaScript" type="text/javascript">

                using.register('hello', 
                    'helloworld.js'
                    );
        			
                using.register('hello2', 
                    'helloworld2.js'
                    );
        			
                using.register('moo', 
                    true, 500, // async needed cause I'm gonna be fetching moo tools from another domain
                    'http://www.cachefile.net.nyud.net/scripts/mootools/1.11/mootools_full_1.11_packed.js'
                    );
        			
                using.register('multi', 
                    'dep1.js',
                    'dep2.js'
                    );

                using.register('jquery', true,
                    'http://www.cachefile.net.nyud.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js');

                using.register('jquery-blockUI', true,
                        'http://www.cachefile.net.nyud.net/scripts/jquery/plugins/blockUI/2.02/jquery.blockUI.js'
                    ).requires('jquery');

		</script>
	</head>
	<body>

		<!-- invoke a function declared from helloworld.js -->
		<button onclick="using('hello', function() {alert(window.hello_isLoaded());}); ">helloworld.js</button>

		<!-- fetch and invoke helloworld2.js -->
		<button onclick="using('hello2');">no callback</button>

		<!-- fetch and load a function from an outside domain -->
		<button onclick="document.body.style.cursor='wait';
			using('moo', function() {
				alert('moo! .. random: ' + $random(1,5));
				document.body.style.cursor='default';});">moo tools</button>

		<!-- fetch and load variables from two different files under one declared 'registration' -->
		<button onclick="using('multi', function() {alert('dep1: ' + window.dep1 + ', dep2: ' 
			+ window.dep2);});">multiple dependencies</button>

		<!-- fetch and load a library having a dependency upon another declared 'registration' -->
		<button onclick="if (window.jQuery) alert('Refresh first please.');
		    document.body.style.cursor='wait';
		    using('jquery-blockUI', function() {
		        document.body.style.cursor='default';$.blockUI();
		        setTimeout($.unblockUI, 2000);});">subdependency</button>

		<!-- basic test to be sure that the object going in is also what comes out (plop-plop!) -->
		<button onclick="if (window.jQuery) alert('Refresh first please.');
		    using('jquery-blockUI', function() {window.eval('alert(this)');}, 
		        'Context object was retained.');">retain context object (basic)</button>

		<!-- declare multiple pre-declared dependencies for a callback function -->
		<button onclick="if (window.jQuery) alert('Refresh first please.');
		    using('jquery', 'jquery-blockUI', function() {
		        document.body.style.cursor='default';$.blockUI(); 
		        setTimeout($.unblockUI, 2000);});">runtime declared multi-dependency</button>

		<!-- load and run a URL without pre-registering -->
		<button onclick="if (window.jQuery) alert('Refresh first please.');
		    using('url(http://www.cachefile.net.nyud.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js)', 
		        function() {alert($.fn.jquery);});">inline url declaration</button>

	</body>
</html>

[helloworld.js]
window.hello_isLoaded = function(){
	window.hello_isLoaded = function() {
		return "I'm already loaded.";
	}
	return "Hello world! I'm loaded!!";
}

[helloworld2.js]
alert ("helloworld2.js loaded");

[dep1.js]
window.dep1 = 'loaded';

[dep2.js]
window.dep2 = 'loaded';