browserify and document ready?

Question

I'm struggling with using Browserify and document ready events. How do I craft a module that exports content only available after the document ready event has fired? How do I depend on such a module?

My first stab was to try to set module.exports asynchronously -- fail out of the box. My nextx stab at this was for the module to return a function that took in a callback, and called the callback when document ready fired. Third attempt returned a promise. This seems to make dependent modules not very modular as now dependent modules and their dependencies (and theirs, turtles all the way down) must also leverage this pattern.

What's a good pattern for using Browserify and document ready events?

Uncut

If your question has been answered, please make sure to accept an answer for further references. – Pneumococcus

Thanks for the nudge. – Uncut

Answer 1

Try this:

var domready = require("domready");

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

You'll need to download the domready package:

npm install domready

Then just use browserify:

browserify input.js -o output.js

Yes. It's that simple.

---

Consider that we have two files: library.js and 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);
});

As long as you require your library before you register your main domready function you should be able to use your library seamlessly.

---

Sometimes you may wish to set module.exports to a function. In that case you can use the following hack:

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

Note that the _call property is not in any way special.

Pneumococcus

Answer 2

Instead of listening for a ready event, you can put your browserify bundle in a deferred script tag:

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

This allows you to remove the ready wrapper completely since the bundle will not be executed until the DOM is loaded.

Unfortunately support of defer is patchy, and I don't recommend it unless you don't have to support IE < 10. Consider this answer one for the future, as browser support for it grows.

Thigpen

Answer 3

Usually you have one master file that fires up the entire application, so you can simply wrap it in the ready callback. It doesn't make much sense to do anything before the document is ready anyway. Sure you could return a function in every single file that does DOM manipulation, but that would turn into a mess quickly.

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

Capsulate

Following this advice would require the user to guarantee that the script has loaded before DOMContentLoaded otherwise the callback will never fire. – Menado

Answer 4

This works for me in one project, not sure it can work always.

Put the script, for example: <script src="/path/to/main.js"></script> right before </body>.

In the file going to be 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 ....
});

Another way might be better:

// the-file.js:

var $ = require("jquery");

//......

(function($){

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

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

Evin

Answer 5

I would suggest to use window.onload Something along the lines of

const main = () => {

//Your logic here

}

window.onload = main;

Photochemistry