Browserify和文档准备就绪？

Question

我在使用Browserify和document ready事件时遇到了问题。如何制作一个模块，在文档准备就绪事件触发后才导出内容？如何依赖此类模块？

我的第一次尝试是异步设置module.exports——直接失败。接下来，我的尝试是让模块返回一个函数，该函数接受回调并在文档准备就绪事件触发时调用回调。第三次尝试返回一个promise。但这似乎使得依赖的模块不太模块化，因为现在依赖的模块及其依赖关系（以及它们的依赖关系）必须也采用这种模式。

如何使用Browserify和document ready事件的良好模式是什么?

- robrich

---

如果您的问题已得到解答，请确保接受一个答案以供参考。 - Aadit M Shah

谢谢提醒。 - robrich

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 属性在任何方面都不是特殊的。

- Aadit M Shah

Answer 2

不必监听ready事件，你可以将browserify捆绑包放置在延迟的脚本标签中：

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

这使得你可以完全删除准备好的包装器，因为捆绑包不会在DOM加载之前执行。

不幸的是，对于defer的支持很patchy，除非您不必支持IE < 10，否则我不建议使用它。随着浏览器对其的支持增加，考虑将此答案视为未来的一个方案。

- qubyte

Answer 3

通常情况下，你只需要一个主文件来启动整个应用程序，因此你可以将其简单包裹在"ready"回调中。在文档准备就绪之前，做任何事都没有意义。当然，你可以在每个文件中返回一个执行DOM操作的函数，但这很快就会变得混乱不堪。

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

- jgillich

---

按照这个建议，用户需要确保在DOMContentLoaded之前脚本已经加载完成，否则回调函数将永远不会触发。 - Matthew Kime

Answer 4

这在我的一个项目中可行，但不确定它是否总是有效。

将脚本放在</body>之前，例如：<script src="/path/to/main.js"></script>。

在要进行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 ....
});

另一种方式可能更好：

// the-file.js:

var $ = require("jquery");

//......

(function($){

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

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

- Andrew_1510

Answer 5

我建议使用window.onload，大致如下：

const main = () => {

//Your logic here

}

window.onload = main;

- Rohit Shetty