CommonJS Module mit Browser laden

[Junkee[]]

Mir hat das require als blockender Aufruf nicht gefallen und deshalb das Script grundlegend geändert:
require.js

function require(module) {
    if(require.modules.hasOwnProperty(module))
        return require.modules[module];
    if(!require.moduleSrc.hasOwnProperty(module))
        throw new Error("Cannot find Module '" + module + "'");
    var exports = {};
    require.eval(exports, require.moduleSrc[module]);
    require.modules[module] = exports;
    return exports;
}

require.load = function(modules, callback) {
    
    if(!require.dependencies.dir)
        throw Error("No directory defined for dependencies");
    if(!modules || ! modules instanceof Array)
        throw new Error("No modules to load");
    if(!require.dependencies.modules)
        require.dependencies.modules = {};
    if(typeof modules == "string")
        modules = [modules];
    
    var useableXHRObjects = [];
    
    var toLoad = 0;
    var depends;
    var loading = {};
    for(var i=0; i<modules.length; i++) {
        loadModule(modules[i]);
    }
    
    function loadModule(module) {
        if(require.dependencies.modules[module]) {
            depends = require.dependencies.modules[module];
            for(var j=0; j<depends.length; j++) {
                if(!loading.hasOwnProperty(depends[j]))
                    loadModule(depends[j]);
                loading[depends[j]] = true;
            }
        }
        if(!loading.hasOwnProperty(module))
            loadPath(module);
        loading[module] = true;
    }
    
    function loadPath(module) {
        toLoad++;
        var path = require.dependencies.dir + "/" + module + ".js?" + Math.random(), req = getXHRObject();
        
        req.open("GET", path, true);
        req.onreadystatechange = function() {
            if(req.readyState == 4) {
                if(req.status != 200) {
                    throw new Error("Module '" + module + "' not found! (HTTP status code " + req.status + ")");
                }
                else {
                    finishRequest(module, req.responseText);
                }
                useableXHRObjects.push(req);
                if(--toLoad == 0) {
                    callback();
                }
            }
        };
        
		req.send(null);
		return req;
    }
    
    function finishRequest(module, data) {
        require.moduleSrc[module] = data;
    }
    
    	
	function getXHRObject(){
		if (useableXHRObjects.length){
			return useableXHRObjects.pop();
		}
		var req;
		if (window.XMLHttpRequest){
			req = new XMLHttpRequest();
		}
		else if(window.ActiveXObject){
			var tries = ['Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'];
			for (var i = 0; i < tries.length; i++){
				try{
					req = new ActiveXObject(tries[i]);
					break;
				}
				catch (e){}
			}
		}
		if (!req){
			throw new Error('Error creating request object!');
		}
		return req;
	}
    
}

require.eval = function(exports, src) {
    eval(src);
}

require.dependencies = {};

require.moduleSrc = {};

require.modules = {};

dependencies.js

require.dependencies = {
    dir: "/path/to/modules",
    modules: {
        x: ["a", "b", "c"],
        a: ["y"]
    }
};

und zum Aufrufen:

<script type="text/javascript" src="require.js"></script>
<script type="text/javascript" src="dependencies.js"></script>
<script type="text/javascript">
require.load(["x", "c"], function() {
    // hier stehen die Module x und c sowie alle Abhängigkeiten (hier a, b, c, y) zur Verfügung
    var x = require("x");
});
</script>

 

[kkapsner]

Wenn du jetzt aber zwei mal require("x") aufrufst, kommen zwei verschiedene Objekte zurück...

 

[Junkee[]]

äh, nein.

if(require.modules.hasOwnProperty(module))
        return require.modules[module];

require.modules[module] = exports;

 

[kkapsner]

Oh - irgendwie übersehen...