Javascript 파일의 동적 로딩 이해_javascript 기술-JS 튜토리얼-php.cn

Javascript 파일의 동적 로딩 이해_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:17:00

원래의

1082명이 탐색했습니다.

인터넷을 통해 업로드하는 일반적인 방법과 같이 Javascript 파일의 동적 로딩은 항상 골치 아픈 일이었습니다.

function loadjs(fileurl){
 var sct = document.createElement("script");
 sct.src = fileurl;
 document.head.appendChild(sct);
}

로그인 후 복사

그럼 결과를 테스트해 보겠습니다.

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    function loadjs(fileurl){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     document.head.appendChild(sct);
    }
    loadjs("http://code.jquery.com/jquery-1.12.0.js");
    loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
    
    loadjs("http://bootboxjs.com/bootbox.js")
    </script>
  </body>
</html>

로그인 후 복사

코드가 로드되면 다음 오류가 나타납니다.

jquery는 분명히 첫 번째 처리에서 로드되는데, 여전히 jQuery가 존재하지 않는다고 보고되는 이유는 무엇입니까?

이와 같이 로드하는 것은 스레드 3개를 여는 것과 동일하지만 jquery 파일이 스레드를 먼저 시작하고 jquery가 이 스레드 실행을 완료하는 데 걸리는 시간이 다음 두 번을 초과하므로 이후에 jquery를 찾지 못할 수 있습니다. 이 개체는 나중에 실행됩니다.

이 방법은 어떻게 처리하나요?

실제로는 파일 로딩이 진행되는 상태인데, 파일 로딩 여부를 모니터링할 수 있는 이벤트인 onload 이벤트가 있습니다.

그래서 우리가 원하는 결과를 처리하기 위해 이 방법을 고려할 수 있습니다. 개선된 코드는 다음과 같습니다.

 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    
    function loadjs(fileurl, fn){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     if(fn){
      sct.onload = fn;
     }
     document.head.appendChild(sct);
    }


    loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
     loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
        loadjs("http://bootboxjs.com/bootbox.js")
     })
    });
      
    
    </script>
  </body>
</html>

로그인 후 복사

좋아, 이 코드를 실행한 후에는 이전 파일이 로드될 때까지 로드된 파일이 로드되지 않으므로 사용된 개체를 찾을 수 없습니다.

그런 다음 팝업 상자 효과를 수행해 보겠습니다. 코드에는 Bootbox.js 플러그인이 사용됩니다.

loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
  loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
       loadjs("http://bootboxjs.com/bootbox.js",function(){
          bootbox.alert("Hello world!", function() {
           Example.show("Hello world callback");
          });
       })
   })
 });

로그인 후 복사

페이지를 새로 고치면 팝업 상자가 바로 표시됩니다.