jQuery document.ready() 不适用于 Require.js答案

【问题标题】：jQuery document.ready() doesn't work with Require.jsjQuery document.ready() 不适用于 Require.js
【发布时间】：2013-06-16 10:05:49
【问题描述】：

我在结束 body 标记之前调用 Require.js：

    <script data-main="assets/scripts/src/main.js" src="assets/scripts/lib/requirejs/require.js"></script>
</body>

这是我的main.js 包含的内容：

requirejs.config({
    urlArgs: "bust=" + (new Date()).getTime(), // override browser cache
});

require(['views/appView'], function (App) {
    App.initialize(); // this is just to test the module is actually loading
});

而 appView.js 包含：

define([
    'modernizr',
    'jquery',
    'underscore',
    'backbone',
    'common', // this module has about 4 other dependencies too
    'dust',
    'routers/main',
    'views/main'
], function (Modernizr, $, _, Backbone, Common, dust, router, mainView) {
    // This is supposed to load, even if jQuery loads after the DOM ready event
    $(document).on('ready', function () {
        console.log("I don't want to play nice");
    });

    return {
        initialize: function () {
            console.log("Init");
        }
    }
});

不幸的是，console.log("I don't want to play nice"); 根本不会发生。

这是我的网络时间线在 Chrome 开发工具中的外观。如您所见，DOM 就绪事件在 jQuery 加载之前触发 - 但 AFAIK，jQuery 知道如何处理这个！所以我迷路了。

【问题讨论】：

除了你的问题的答案之外，在结束 body 标记之前调用 require.js 完全破坏了异步加载的点。 require.js 文件本身是按顺序加载的 - 因此，如果您在文档末尾调用它，那么您定义的模块将不会开始加载（尽管是异步的），直到内容之后...... requireJS 和异步加载的全部目的是您可以首先在专用的同步浏览器线程上调用脚本，以便它们在内容加载的同时加载而不会减慢速度。

标签： javascript jquery requirejs document-ready domready

【解决方案1】：

应该是，

$(document).ready(function () {
    console.log("I don't want to play nice");
});

$(document).on("ready", handler)，自 jQuery 1.8 起已弃用 http://api.jquery.com/ready/

【讨论】：

请注意，问题不在于.on("ready" 版本已弃用（尽管它已弃用且您不应该使用它），而是.on("ready" 版本不调用处理程序，如果它在 ready 事件发生后绑定。
@ChamikaSandamal 这不是真的，你可以在它已经触发后调用$(document).ready，你传递的函数会被立即调用。
是的，正如 pilau 所说，.ready() 是一种特殊情况，即使事件已经发生，也会调用处理程序。（显然这不适用于点击等其他事件。）

【解决方案2】：

鉴于 RequireJS 仅用于加载特定页面所需的模块，开发人员可能不想仅仅因为其 $(document).ready(function(){}) 回调而在某些页面上加载整个 jQuery 库。或者，在 appView.js 中使用 RequireJS 的 domReady：

define([
    'domReady',
    'modernizr',
    'etc'
], function (domReady, Modernizr, etc) {
    domReady(function () {
        console.log("I'll play nice");
    });
});

或在domReady 定义上添加! 以避免嵌套回调：

define([
    'domReady!',
    'modernizr',
    'etc'
], function (domReady, Modernizr, etc) {
    console.log("I'll also play nice");
});

【讨论】：