12

我正在努力使用Browserify并记录准备好的事件。如何制作一个仅在文档就绪事件触发后导出可用内容的模块？我如何依赖这样的模块？

我的第一个尝试是尝试异步设置 module.exports - 开箱即用失败。我的 nextx 是为了让模块返回一个接受回调的函数，并在文档准备就绪时调用回调。第三次尝试返回了一个承诺。这似乎使得依赖模块不是非常模块化，因为现在依赖模块及其依赖项（以及他们的，一直向下的海龟）也必须利用这种模式。

使用 Browserify 和记录就绪事件的好模式是什么？

4

5 回答 5

17

尝试这个：

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属性没有任何特殊之处。

于 2014-06-12T17:04:06.680 回答
9

您可以将 browserify 捆绑包放在延迟脚本标记中，而不是监听就绪事件：

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

这允许您完全删除准备好的包装器，因为在加载 DOM 之前不会执行包。

不幸的是，对 的支持defer是不完整的，除非您不必支持 IE < 10，否则我不推荐它。随着浏览器对它的支持不断增长，请考虑将来使用这个答案。

于 2014-09-27T17:10:29.163 回答
3

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

document.addEventListener('DOMContentLoaded', function () {
    var app = require('./app');
    // ...
});
于 2014-06-12T17:28:35.707 回答
1

这在一个项目中对我有用，不确定它是否可以一直工作。

放置脚本，例如：<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 $.
于 2016-05-27T13:03:18.233 回答
-2

我建议按照window.onload 以下方式使用Something

const main = () => {

//Your logic here

}

window.onload = main;

于 2019-01-04T16:57:43.877 回答