Question

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

我的第一个尝试是尝试异步设置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>

这允许您完全删除ready包装器，因为在装入DOM之前不会执行包。

不幸的是，对defer的支持是patchy，我不推荐它，除非您不必支持IE＆lt; 10.考虑到对未来的回答，因为浏览器对它的支持在增长。

Answer 3

通常，您有一个主文件可以激活整个应用程序，因此您只需将其包装在就绪回调中即可。无论如何，在文档准备好之前做任何事情都没有多大意义。当然你可以在每个执行DOM操作的文件中返回一个函数，但这会很快变成一团糟。

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

Answer 4

这对我来说在一个项目中起作用，不确定它是否能够始终有效。

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

在文件中将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 $.

Answer 5

我建议使用window.onload 类似于

const main = () => {

//Your logic here

}

window.onload = main;

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

5 个答案: