准备好文档后如何执行所需的代码

Question

main.js

require.config({
    paths: {
        'jq': 'jquery.min',
        'init': 'init'
    },
    shim: {
        'init': ['jq']
    }
});
requirejs(['init']);

init.js

requirejs(['func'], function(func) {
    $(function() {
        // Do something when document is ready
        func.doSomething();
    });
});

func.js

define(function() {
    var box = $('.box');

    return {
        doSomething: function() {
            // Do something;
        }
    }
});

我在使用fun.js时需要init.js ，这意味着如果我在一开始就像var box = $('.box')那样设置参数，可能因为未创建而无法获得dom，我知道我可以在doSomthing函数中声明它，但是可以将其声明为global并让func.js其他函数重用它并确保它在dom准备就绪后发生。

Answer 1

您应该使模块依赖于准备就绪的DOM。 您可以使用domReady插件来执行此操作。 像这样定义func.js ：

define(['domReady!'], function() {
    var box = $('.box');
    //...
});

感叹号不是错字。 通过要求domReady! 您要求它像插件一样工作，而不是常规模块。 在DOM准备就绪之前，这种依赖性将无法解决。 确保阅读domReady的文档。 特别是，您可能需要增加waitSeconds配置选项。

Answer 2

要在文档准备好后执行代码，建议使用IIFE（立即调用函数表达式）。

(function ($) {
    var box = $('.box');
}) (jQuery);

要在javascript中声明全局变量，可以将其附加到“窗口”对象。

(function ($) {
    window.box = $('.box');
}) (jQuery);