danshearmur/define.html

## define.html
<!doctype html>


<script>
var cache = {};

function define(thing, fn) {
    cache[thing] = fn;
}

function load(file) {
    var s = document.createElement('script');
    s.src = file;

    var callback;
    s.onreadystatechange = s.onload = function () {
        if (s.readyState) {
            if (s.readyState === "loaded" || s.readyState === "complete") callback(cache[file]);
        } else {
            if (callback) callback(cache[file]);
        }
    };

    var ref = document.querySelector('script');
    ref.parentNode.insertBefore(s, ref);

    return {
        then: function (cb) {
            if (cache[file]) return cb(cache[file]);
            callback = cb;
        }
    };
}
</script>

<script>
var start = performance.now();

load('wrapper.js').then(function (cb) {
    console.log('define: load time %f', performance.now() - start);
    cb();
    console.log('define: exec time %f', performance.now() - start);
});
</script>

## index.html
<!doctype html>
<iframe src="xhr.html"></iframe>
<iframe src="define.html"></iframe>

## plain.js
var x = Math.random() * 1000;
console.log(x);

## wrapper.js
define('wrapper.js', function () {

    var x = Math.random() * 1000;
    console.log(x);

});

## xhr.html
<!doctype html>
<script>
function load(file) {
    var x = new XMLHttpRequest();
    var script;
    var callback;

    x.onreadystatechange = function () {
        if (x.readyState !== 4) return;
        script = function () { eval(x.responseText); };
        if (callback) callback(script);
    };

    x.open("GET", file, true);
    x.send();

    return {
        then: function (cb) {
            if (script) cb(script);
            callback = cb;
        }
    };
}
</script>

<script>
var start = performance.now();

load('plain.js').then(function (cb) {
    console.log('xhr: load time %f', performance.now() - start);
    cb();
    console.log('xhr: exec time %f', performance.now() - start);
});
</script>
	<!doctype html>


	<script>
	var cache = {};

	function define(thing, fn) {
	cache[thing] = fn;
	}

	function load(file) {
	var s = document.createElement('script');
	s.src = file;

	var callback;
	s.onreadystatechange = s.onload = function () {
	if (s.readyState) {
	if (s.readyState === "loaded" \|\| s.readyState === "complete") callback(cache[file]);
	} else {
	if (callback) callback(cache[file]);
	}
	};

	var ref = document.querySelector('script');
	ref.parentNode.insertBefore(s, ref);

	return {
	then: function (cb) {
	if (cache[file]) return cb(cache[file]);
	callback = cb;
	}
	};
	}
	</script>

	<script>
	var start = performance.now();

	load('wrapper.js').then(function (cb) {
	console.log('define: load time %f', performance.now() - start);
	cb();
	console.log('define: exec time %f', performance.now() - start);
	});
	</script>
	<!doctype html>
	<iframe src="xhr.html"></iframe>
	<iframe src="define.html"></iframe>
	define('wrapper.js', function () {

	var x = Math.random() * 1000;
	console.log(x);

	});