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");
          });
       })
   })
 });
로그인 후 복사
페이지를 새로 고치면 팝업 상자가 바로 표시됩니다.

동적으로 로드된 코드는 여기에서 디버깅하는 데 많은 시간을 소비하기 쉽습니다. 가장 좋은 방법은 여기의 코드를 캡슐화할 수 있고 로드에 CSS 파일을 추가할 수도 있습니다. 자신만의 플러그인으로 사용하세요.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿