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?

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.