browserify e documenti pronti?

Question

Sono in difficoltà con l'utilizzo degli eventi Browserify e document ready. Come faccio a creare un modulo che esporta i contenuti disponibili solo dopo che è stato attivato l'evento pronto per il documento? Come posso dipendere da un tale modulo?

La mia prima pugnalata è stata quella di provare a impostare module.exports in modo asincrono: errore immediato. Il mio tentativo successivo fu che il modulo restituisse una funzione che includeva una richiamata e chiamava la richiamata quando il documento era pronto. Il terzo tentativo ha restituito una promessa. Ciò sembra rendere i moduli dipendenti non molto modulari in quanto i moduli dipendenti ora e le loro dipendenze (e le loro, le tartarughe fino in fondo) devono anche sfruttare questo schema.

Qual è un buon modello per utilizzare Browserify e documentare gli eventi pronti?

Answer 1

Prova questo:

var domready = require("domready"); 

domready(function() { 
    exports.something = /* whatever you want */ 
}); 

Avrai bisogno di scaricare il pacchetto domready:

npm install domready 

poi basta usare browserify:

browserify input.js -o output.js 

Sì. È così semplice.

---

Si consideri che noi abbiamo due file: library.js e main.js.

// library.js 

var domready = require("domready"); 

domready(function() { 
    exports.test = "Hello World!"; 
}); 

// main.js 

var library = require("./library"); 
var domready = require("domready"); 

domready(function() { 
    alert(library.test); 
}); 

Finché si richiede la libreria prima di registrare il vostro principale funzione domready si dovrebbe essere in grado di utilizzare la libreria senza soluzione di continuità.

---

A volte si potrebbe desiderare di impostare module.exports a una funzione. In questo caso è possibile utilizzare il seguente trucco:

// library.js 

var domready = require("domready"); 

module.exports = function() { 
    return exports._call.apply(this, arguments); 
}; 

domready(function() { 
    exports._call = function() { 
     alert("Hello World!"); 
    }; 
}); 

// main.js 

var library = require("./library"); 
var domready = require("domready"); 

domready(function() { 
    library(); 
}); 

Nota che la proprietà _call non è in alcun modo speciale.

Answer 2

In genere si dispone di un file master che attiva l'intera applicazione, in modo da poterlo semplicemente racchiudere nel callback pronto. Non ha molto senso fare qualcosa prima che il documento sia pronto comunque. Certo, potresti restituire una funzione in ogni singolo file che manipola DOM, ma che si trasformerebbe in un disastro in fretta.

document.addEventListener('DOMContentLoaded', function() { 
    var app = require('./app'); 
    // ... 
}); 

Answer 3

Invece di ascoltare per un evento pronto, si può mettere il pacco browserify in un tag script differita:

<script src="bundle.js" defer></script> 

Questo consente di rimuovere completamente l'involucro pronto dal momento che non sarà eseguito il bundle fino a quando il DOM non viene caricato.

Purtroppo sostegno defer è patchy, e io non lo consiglio a meno che non si deve sostenere IE < 10. Considerate questa risposta una per il futuro, come il supporto del browser per esso cresce.

Answer 4

Questo funziona per me in un progetto, non è sicuro che funzioni sempre.

Inserire lo script, ad esempio: <script src="/path/to/main.js"></script> subito prima dello </body>.

Nel file sarà browserify the-file.js -o main.js.

// the-file.js: 

var $ = require("jquery"); 

//...... 

window.$ = $; // window is the global object in browsers 
$(document).ready(function(){ 
    // all the old things here .... 
}); 

Un altro modo potrebbe essere migliore:

// the-file.js: 

var $ = require("jquery"); 

//...... 

(function($){ 

    $(document).ready(function(){ 
     // all the old things here .... 
    }); 

})($); // Anonymous function get called with $.