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

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函数中声明它，但是可以将它声明为全局并让func.js中的其他函数可以重用它并确保它在dom准备就绪后发生。

Answer 1

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

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

感叹号不是拼写错误。通过要求domReady!，您要求它像插件一样工作，而不是常规模块。在DOM准备好之前，此依赖关系不会解决。请务必阅读domReady的文档。特别是，您可能需要增加waitSeconds配置选项。

Answer 2

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

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

要在javascript中声明全局变量，您可以将其附加到＆＃34;窗口＆＃34;对象

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