인터넷을 통해 업로드하는 일반적인 방법과 같이 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 파일을 추가할 수도 있습니다. 자신만의 플러그인으로 사용하세요.