모듈 패턴 및 문서 onreal을 표시합니다.

공개 모듈 패턴을 사용하여 Canvas 게임을 구현하려고합니다. 따라서 Canvas DOM 요소와 해당 컨텍스트를 얻어야합니다. 즉, DOM이 완전히로드 될 때까지 함수가 실행되지 않아야합니다. jQuery를 사용하고 있기 때문에 모든 것을 document.ready()에 던지려고했지만 스코프가 망가졌습니다. 이 예제에서 알 수 있듯이 :모듈 패턴 및 문서 onreal을 표시합니다.

반환 기능을 제대로 작동 시키려면 함수가 자동 실행되어야합니다. 캔버스를 참조하기 때문에 즉시로드 할 필요가 없습니다. document.ready()의 자체 실행 기능을 사용하면 나를 막을 수 없습니다.

game.init();

어떻게해야합니까?

출처

2013-06-19 Harangue

당신이 DOM 요소가 자바 스크립트 실행의 특정 부분 전에로드되는 것을 보장해야 할 경우, 단순히 페이지의 특정 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>

아래쪽으로 이동하면 자바 스크립트 코드가 실행되기 전에 캔버스 요소가 DOM에로드됩니다.

자바 스크립트를 페이지의 맨 아래, 닫는 본문 태그 바로 앞에 올리면 페이지로드 시간이 향상된다는 이점이 있습니다. 페이지의 머리 부분에 복잡한 자바 스크립트가있는 경우 (예 : 페이지가 위에서 아래로 실행되므로 본문 섹션의 HTML 요소가 렌더링되기 전에이 자바 스크립트를로드하고 파싱해야합니다. 자바 스크립트가 복잡하면 페이지가 느리게로드되는 것처럼 보일 수 있습니다. 아래쪽에 놓으면 HTML이 렌더링 된 다음 자바 스크립트가로드되고 파싱되므로 페이지의 시각적 부분이 더 빨리 표시 될 수 있습니다. 자세한 내용은 See here을 참조하십시오.

출처

2013-06-25 16:28:45

모듈 패턴 및 문서 onreal을 표시합니다.

답변

관련 문제