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

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;
        }
    }
});

I required fun.js when use init.js , which means if I set param like var box = $('.box') in the beginning might not get the dom because it's not created, I know I can declare it in doSomthing function, but is it possible to declare it to global and let other function in func.js can reuse it and make sure it happened after dom is ready.

Answer 1

You should make your module be dependent on the DOM being ready. You do this by using the domReady plugin . Define func.js like this:

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

The exclamation point is not a typo. By requiring domReady! you are asking it to work like a plugin, rather than a regular module. This dependency won't resolve until the DOM is ready. Make sure to read the documentation of domReady . In particular you may need to increase the waitSeconds configuration option.

Answer 2

To execute code after the document is ready, I suggest using an IIFE (Immediately-Invoked Function Expression).

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

To declare a global variable in javascript, you can attach it to the "window" object.

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