2012-01-11 15 views
5

Sto aggiornando un progetto da Dojo 1.6.1 usando AMD e RequireJS a Dojo 1.7.1 con il suo nuovo caricatore AMD. Devo occuparmi di vecchi file JavaScript, non scritti come moduli AMD, e devo caricarli nell'ordine corretto.Il plug-in Ordine RequireJS e Dojo 1.7.1

Prima di utilizzare il plug-in Ordine RequireJS, ma non sembra funzionare con Dojo AMD Loader. Non riesco a trovare nulla a riguardo nella documentazione del caricatore o nella documentazione del Dojo Build System.

Qualche idea a riguardo? Se non esiste un plug-in per gli ordini, come devo gestire i file JavaScript semplici insieme a Dojo 1.7? Devo gestirli separatamente, o ci sono funzionalità per questo nel caricatore o nel sistema di compilazione?

+0

Stai parlando di file dei moduli-meno o moduli sincroni vecchio stile? – hugomg

+0

Solo file JavaScript ordinari, come jQuery (non usato come modulo AMD), scritti in qualsiasi stile possano essere. –

risposta

4

Sto imparando su questo me stesso, ma la documentazione che ho trovato si riferisce a Generic Script Injection

caricare i vostri script generici, come descritto nella documentazione, specificando {asincrona: 0} come opzione di configurazione per require() . Questo, per la mia comprensione, viene caricato gli script nell'ordine specificato nel secondo parametro (l'array contenente i nomi dei file di script/percorsi)

Il mio esempio:

require({async:0},['test1.js','test2.js','test3.js'],function(){ 
    //do stuff with reference to loaded scripts 

}); 

miei test locali indicano se Cambio configurazione in {async: 1} gli script caricano in un ordine diverso da quello che ho specificato. Finora non ho rintracciato questo nel codice del caricatore dojo, ma sembra avere senso, e funzionare, e non è un trucco.

+0

Sono d'accordo con questa risposta, perché funziona! Ho creato un "modulo di dipendenza" in questo modo: 'define ([" require "], function (require) {require ({async: 0}, [" script1.js "," script2.js "," script3.js " ]);}); '. Penso che sia una soluzione ok. Grazie! –

+0

Un avvertimento, però. Non l'ho approfondito ulteriormente, ma sembra (almeno quando caricate gli script in un modulo separato come menzionato sopra) gli script vengono caricati in un ambito diverso rispetto a se caricati tramite un tag script convenzionale. Ad esempio, ho dovuto sostituire 'var uglyGlobal = true' con' window.uglyGlobal = true'. –

+0

Il metodo di scrittura script per '{async: 1}' config carica gli script utilizzando un tag '

2

Non penso che i plugin siano generalmente compatibili con i caricatori AMD. Non è ottimale, ma probabilmente puoi usare dojo/testo! con una valutazione. Ciò dovrebbe allineare il contenuto al momento della compilazione.

+0

Intendi in questo modo? 'define ([" testo! myScript "," testo! myScript2 "], funzione (s, s2) {eval (s); eval (s2)})' –

+0

Funziona, e lo sto usando in un test di doh , ma sono riluttante a contrassegnarlo come risposta accettata, è un hack =) –

3

Vorrei proporre un altro approccio per un modulo di dipendenza come indicato nei commenti sopra. Il problema è che define non accetta un parametro async. L'utilizzo di un semplice require all'interno della funzione define introduce una condizione di competizione poiché il codice dei moduli richiesti non è ancora stato eseguito.

Esempio (WRONG):
oldCode.js

 
window.foo = function(){}; 

legacyWrapper.js

 
define(["require"],function(require){ 
    require({async:0},["./oldCode"]); 
}) 

code.js

 
define(["./legacyWrapper"],function(){ 
    window.foo(); //throws exception, foo has not been loaded yet. 
}) 

(jsFiddle demo)

Tuttavia, esiste una soluzione a questo problema. È necessario restituire uno Deferred che viene risolto non appena vengono caricati tutti i moduli. L'esempio seguente carica a, b, c, d in ordine.

 
define(["require","dojo/Deferred"],function(require,Deferred){ 
    var def = new Deferred(); 
    require({async:0}, 
      ["./moduleA", 
      "./moduleB", 
      "./moduleC", 
      "./moduleD"], 
      function(){ 
     def.resolve(); 
    }); 
    return def; 
}) 

accedere alle proprietà definite nel moduleA, è ora possibile utilizzare

 
require(["legacyDeps"],function(legacyDeps){ 
    legacyDeps.then(function(){ 
     //It's save to assume that all legacy modules have been loaded here. 
    }); 
});