浏览器和文件准备好了吗？

Question

我正在努力使用Browserify和文档就绪事件.如何创建一个模块,用于导出仅在文档就绪事件触发后可用的内容？我如何依赖这样的模块？

我的第一个尝试是尝试异步设置module.exports - 开箱即用.我的下一个问题就是模块返回一个接受回调的函数,并在文件准备好时触发调用.第三次尝试回复了承诺.这似乎使依赖模块不是非常模块化的,因为现在依赖的模块及其依赖性(以及它们,乌龟一直向下)也必须利用这种模式.

使用Browserify和文档就绪事件有什么好的模式？

Answer 1

试试这个:

var domready = require("domready");

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

您需要下载该domready软件包:

npm install domready

然后只使用browserify:

browserify input.js -o output.js

是.就这么简单.

考虑一下我们有两个文件:library.js和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);
});

只要您在注册主要domready功能之前需要您的库,您应该能够无缝地使用您的库.

有时你可能希望设置module.exports一个功能.在这种情况下,您可以使用以下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();
});

请注意,该_call物业并不特别.

Answer 2

您可以将browserify包放在延迟脚本标记中,而不是侦听就绪事件:

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

这允许您完全删除现成的包装器,因为在加载DOM之前不会执行包.

不幸的是支持的defer是修修补补,而对于它的增长我不建议这样做,除非你没有支持IE <10.考虑这个答案之一,未来随着浏览器的支持.