Question

我正在尝试使用揭示模块模式实现Canvas游戏。因此，我必须获得Canvas DOM元素及其上下文。这意味着在DOM完全加载之前不应该执行该函数。因为我正在使用jQuery，所以我只是将所有内容都放在document.ready（）中，但这与范围有关。正如您在此示例中所看到的那样：

var game = function ()
{
    var canvas = document.getElementById("canvas");

    var init = function ()
    {
    }

    return 
    {
        init: init
    }
}();

该功能必须是自动执行才能使返回正常工作。但是，因为它引用了画布，所以我不希望它立即加载。将自执行函数放在document.ready（）中会阻止我执行

game.init();

我该怎么办？

Answer 1

如果您需要确保在特定的javascript运行之前加载DOM元素，只需将javascript放在页面上的特定DOM元素之后：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script>
        $(function () {
            game.init();
        });
    </script>
</head>
<body>
    <div>
        <canvas id="canvas"></canvas>
    </div>
    <script>
        var game = function () {
            var canvas = document.getElementById("canvas");
            var init = function () {
                alert(canvas.id);
            };
            return {
                init: init
            }
        }();
    </script>
</body>
</html>

页面从上到下进行解析，以便在执行javascript代码之前将canvas元素加载到DOM中。

将javascript放在页面底部，在关闭正文标记之前的另一个好处是，这可以改善页面的感知加载时间。例如，如果页面的head部分中有复杂的javascript，则必须先加载和解析此javascript，然后才能呈现body部分中的任何HTML元素，因为页面是从上到下执行的。如果javascript很复杂，页面可能看起来加载缓慢。通过将其放在底部，您的HTML将被呈现，然后您的javascript被加载和解析，这可以使您的页面的可视部分显示得更快。 See here了解更多信息。

揭示模块模式和文档准备

1 个答案: