揭示模塊模式和文檔已準備就緒

我正在嘗試使用揭示模塊模式實現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();

我該怎麼辦？

來源

2013-06-19 Harangue

如果您需要確保DOM元素在特定的一段JavaScript代碼運行的前裝，簡單地把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放在頁面底部的正文之前的附加好處是，這可以提高頁面的感知加載時間。例如，如果在頁面的頭部有複雜的JavaScript，則必須先加載並解析此JavaScript，然後才能呈現正文部分中的任何HTML元素，因爲頁面是從上至下執行的。如果JavaScript複雜，頁面可能會顯示爲加載緩慢。通過將它放在最下面，呈現HTML，然後加載並解析JavaScript，這可以使頁面的可視部分更快地出現。 See here瞭解更多信息。

來源

2013-06-25 16:28:45

揭示模塊模式和文檔已準備就緒

回答

相關問題