browserifizieren und dokumentieren bereit?

Question

Ich habe Probleme mit Browserify und document ready Ereignisse. Wie erstelle ich ein Modul, das Inhalte exportiert, die erst verfügbar sind, nachdem das Ereignis "Dokument bereit" ausgelöst wurde? Wie bin ich auf ein solches Modul angewiesen?

Mein erster Stich war zu versuchen, module.exports asynchron zu setzen - fehlgeschlagen aus der Box. Mein nextx-Stich bei diesem war, dass das Modul eine Funktion zurückgab, die einen Rückruf annahm, und den Rückruf anrief, als das Dokument fertig war. Der dritte Versuch brachte ein Versprechen. Dies scheint dazu zu führen, dass abhängige Module nicht sehr modular sind, da nun abhängige Module und ihre Abhängigkeiten (und ihre, Schildkröten ganz unten) dieses Muster ebenfalls nutzen müssen.

Was ist ein gutes Muster für die Verwendung von Browserify und Document Ready Events?

Answer 1

Try this:

var domready = require("domready"); 

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

Sie finden das domready Paket herunterladen müssen:

npm install domready 

Dann benutzen Sie einfach browserify:

browserify input.js -o output.js 

Ja. So einfach ist das.

---

Bedenken Sie, dass wir zwei Dateien: library.js und 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); 
}); 

Solange Sie Ihre Bibliothek benötigen, bevor Sie Ihre Hauptdready-Funktion registrieren, sollten Sie in der Lage sein, Ihre Bibliothek nahtlos zu verwenden.

---

Manchmal können Sie module.exports auf eine Funktion einstellen möchten. In diesem Fall können Sie den folgenden Hack verwenden:

// 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(); 
}); 

Beachten Sie, dass die _call Eigenschaft ist nicht in irgendeiner Weise besonders.

Answer 2

Normalerweise haben Sie eine Master-Datei, die die gesamte Anwendung startet, so dass Sie sie einfach in den Bereit-Rückruf einbinden können. Es macht wenig Sinn, irgendetwas zu tun, bevor das Dokument sowieso fertig ist. Sicher, Sie könnten eine Funktion in jeder einzelnen Datei zurückgeben, die DOM-Manipulation macht, aber das würde schnell zu einem Durcheinander führen.

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

Answer 3

Statt für einen bereiten Fall hören, können Sie Ihr browserify Bündel in einem latenten Skript-Tag setzen:

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

Auf diese Weise können Ihnen die fertige Wrapper vollständig entfernen, da das Bündel wird nicht ausgeführt bis das DOM geladen ist.

Leider Unterstützung von defer ist patchy, und ich würde es nicht empfehlen, es sei denn Sie müssen IE nicht unterstützen < 10. Betrachten Sie diese Antwort für die Zukunft, wie Browser-Unterstützung für sie wächst.

Answer 4

Dies funktioniert für mich in einem Projekt, nicht sicher, dass es immer funktionieren kann.

Setzen Sie das Skript, zum Beispiel: <script src="/path/to/main.js"></script> direkt vor </body>.

In der Datei wird browserify the-file.js -o main.js sein.

// the-file.js: 

var $ = require("jquery"); 

//...... 

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

Eine weitere Möglichkeit könnte besser sein:

// the-file.js: 

var $ = require("jquery"); 

//...... 

(function($){ 

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

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