Capire quando e come utilizzare Require.JS

Question

Ho appena iniziato a lavorare con Require.JS e sono un po 'poco chiaro sui casi appropriati in cui dovrebbe essere utilizzato, così come il modo corretto di utilizzare in questi casi.

Ecco come momento ho impostato le cose con Require.JS. Ho due funzioni, functionA() e functionB(). Entrambe queste funzioni richiedono una funzione aggiuntiva, functionC() per funzionare correttamente.

Ho solo voglia di caricare functionC () quando è necessario, vale a dire quando functiona () o functionB () sta per essere chiamato. Così ho i seguenti file:

functionC.js

functionC(){
  //do stuff
}

functionA.js

functionA(){  
  define(['functionC'],function(){
    //functionC() is loaded because it is listed as a dependency, so we can proceed
    //do some functionA() stuff
  });
}

functionB.js

functionB(){  
  define(['functionC'],function(){
    //functionC() is loaded because it is listed as a dependency, so we can proceed
    //do some functionB() stuff
  });
}

Quindi, è questo è impostato correttamente? E se finisco chiamare sia functiona () e functionB () sulla stessa pagina, è lavoro extra stato fatto dal momento che sia il carico che il file functionC.js? Se è così, è un problema? E se sì, c'è un modo per configurarlo in modo che prima controllano se functionC.js è stato ancora caricato, e solo caricare se non è stato? Infine, è presente un uso appropriato della Require.JS?

Answer 1

define() deve essere utilizzato solo per definire un modulo. Per l'esempio di cui sopra, in cui un pezzo di codice deve essere caricato in modo dinamico, utilizzando require() è più appropriato:

functionA.js

functionA(){
  require(['functionC'],function(functionC){
    //use funcC in here to call functionC
  });
}

Alcune note:

• require([]) è asincrona, quindi se il chiamante di functionA si aspetta un valore restituito da questa funzione, ci sarà probabilmente errori. E 'meglio se functionA accetta un callback che viene chiamata quando functionA è fatto con il suo lavoro.
• Il codice di cui sopra chiamerà require() per ogni chiamata a functionA; Tuttavia, dopo la prima chiamata, non c'è penalità presa a carico functionC.js, viene caricato solo una volta. La prima volta require() viene chiamato, caricherà functionC.js, ma il resto del tempo, RequireJS sa che è già caricato, quindi chiamerà la funzione function(functionC){} senza richiedere nuovamente functionC.js.

Answer 2

È possibile trovare i dettagli circa RequireJS e modularità JavaScript qui: JavaScript modularità con RequireJS (da spaghetti code in codice ravioli)