Ergebnis 1 bis 6 von 6
  1. #1
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    CommonJS Module im Browser

    Hat Jemand ne gute(!) Idee, wie man CommonJS Module (http://www.commonjs.org/specs/modules/1.0/) in den Browser laden könnte? ich finde die Idee nämlich ziemlich Cool...

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.714

    AW: CommonJS Module im Browser

    Hab' ich mir auch schon Gedanken zu gemacht. Die Module an sich machen ja keine Probleme, wenn man vor dem Einlesen des Moduls eine Variable exports zur Verfügung stellt.
    Da aber die require-Funktion ein Element zurückliefern soll (eben das exports) kann man nicht mit dynamisch nachgeladenen <script>-nodes arbeiten (wie ich es bis jetzt mache), sondern man muss mit synchronem AJAX (also eigentlich SJAX) die Daten holen und dann per eval ausführen:
    Code:
    function require(path){
    	// if you want to do some caching, look in you cache
    	// some manipulations on path if you want to use a standard folder or always the "script" folder
    	var code = AJAX({
    		url: path,
    		async: false,
    		onerror: function(e){
    			// what ever you want to do in this case... try another folder... do nothing...
    		},
    		returnText: true
    	});
    	var exports = {};
    	eval(code); // here is no need of "(" + code + ")" because code is no JSON
    	// in case of caching: store in cache
    	return exports;
    }
    - exemplarisch.

    Die Idee ist zwar nicht wirklich gut, aber die einzige, die mir einfällt... alle anderen Codenachladetechniken sind ja asynchron.

  3. #3
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: CommonJS Module im Browser

    damn it. Ist auch die einzige Möglichkeit die ich kenne, finde sie aber besch***. Vll wäre eine asynchrone Funktion aber auch denkbar...
    Code:
    require("m1", "m2", function(err, m1, m2) {
      
    });

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.714

    AW: CommonJS Module im Browser

    Was ist m2?
    Asynchron passt's dann aber nicht mehr mit den anderen Implementationen (z.B. node.js) zusammen...

  5. #5
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: CommonJS Module im Browser

    Zitat Zitat von kkapsner Beitrag anzeigen
    Was ist m2?
    Asynchron passt's dann aber nicht mehr mit den anderen Implementationen (z.B. node.js) zusammen...
    m2=modul 2
    Wenn man nur ein Modul laden könnte würde es den Code ziemlich aufblähen. Natürlich hast du auch Recht mit den anderen Implementationen aber auch node hatte das Laden zuerst asynchron gelöst...

  6. #6
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: CommonJS Module im Browser

    Code:
    var require = function() {
        var args = arguments;
        if(!args.callee.modules)
            args.callee.modules = {};
        if(!args.callee.modulesDir) {
            var scripts = document.getElementsByTagName("script");
            for(var i=0; i<scripts.length; i++) {
                if(/^.*\/require\.js(&.*)?$/.test(scripts[i].src)) {
                    var src = scripts[i].src.indexOf("?") == -1 ? scripts[i].src : scripts[i].substr(0, scripts[i].src.indexOf("?"));
                    args.callee.modulesDir = src.substr(0, src.lastIndexOf("/")) + "/modules/";
                }
            }
        }
        function createXHR() {
            var req;
    	    try{
    	        req = new XMLHttpRequest();
    	    }
    	    catch (e){
    		    try{
    		        req = new ActiveXObject("Msxml2.XMLHTTP");
    		    } 
    		    catch (e){
    			    try{
    			        req = new ActiveXObject("Microsoft.XMLHTTP");
    			    } 
    			    catch (failed){
    				    req = null;
    			    }
    		    }
    	    }
    	    return req;
    	}
    	function loadFailed(i) {
    	    throw new Error("Required file \"" + args[i] + "\" could not be loaded (" + req.status + ")");
    	}
        if(typeof arguments[arguments.length-1] == "function" && arguments.length > 1) { // async
            var modules = [];
            
            function load(filen) {
                if(typeof args.callee.modules[args[filen]] != "undefined") {
                    modules.push(args.callee.modules[args[filen]]);
                    if(++filen == args.length-1) {
                        return args[args.length-1].apply(window, modules);
                    }
                    load(filen);
                }
                req = createXHR();
                req.open("get", args.callee.modulesDir + args[filen] + ".js", true);
                
                req.onreadystatechange = function() {
                    if(req.readyState == 4) {
                        if(req.status != 200)
                            loadFailed(filen);
                            
                        var export = {};
                        eval(req.responseText);
                        modules.push(export);
                        args.callee.modules[args[filen]] = export;
                        
                        if(++filen == args.length-1) {
                            return args[args.length-1].apply(window, modules);
                        }
                        load(filen);
                    }
                }
                req.send(null);
            }
            
            load(0);
        }
        else { // sync
            if(typeof args.callee.modules[args[0]] != "undefined")
                return args.callee.modules[args[0]];
            req = createXHR();
            req.open("get", args.callee.modulesDir + arguments[0] + ".js", false);
            req.send(null);
            var export = {};
            if(req.status != 200)
                loadFailed(0);
            eval(req.responseText);
            args.callee.modules[args[0]] = export;
            return export;
        }
    }
    Kann man Synchron und Asynchron benutzen...
    Code:
    // synchron
    var m1 = require("m1");
    var m2 = require("m2");
    
    // module werden nur einmal geladen
    var new_m1 = require("m1");
    alert(m1===new_m1); // true
    
    // asnychron
    require("m1", "m2", function(m1, m2) {
      
    });

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 15-09-2010, 23:56
  2. Antworten: 6
    Letzter Beitrag: 26-03-2010, 14:59
  3. Antworten: 43
    Letzter Beitrag: 13-09-2009, 19:18
  4. JS Module öffnen und schließen mit Bilder wechsel
    Von MauroNegro im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 11-04-2008, 13:00
  5. Module werden nicht gefunden
    Von kakalake im Forum Serverseitige Programmierung
    Antworten: 15
    Letzter Beitrag: 02-10-2001, 13:23

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •