jQuery를 사용하여 JavaScript 스크립트 비동기 로드

JavaScript 로더는 웹 개발에 있어 매우 강력하고 유용한 도구입니다. curjs, LABjs, RequireJS와 같은 널리 사용되는 여러 로더가 널리 사용됩니다. 강력하지만 상황에 따라 더 간단한 해결책이 있을 수 있습니다.

jQuery를 사용하는 경우 스크립트를 로드하는 방법이 내장되어 있습니다. 플러그인이나 다른 유형의 스크립트를 지연 로드하려는 경우 이 방법을 사용할 수 있습니다. 사용 방법은 다음과 같습니다.

구현 방법

jQuery에는 스크립트를 로드하는 getScript 메서드가 내장되어 있으며, 반환된 결과를 처리하는 방법에는 여러 가지가 있습니다. jQuery.getScript의 가장 기본적인 사용법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {

/*
스크립트가 로드되고 실행된 후 다음을 수행할 수 있습니다.
*/

})

getScript 메소드는 jqXHR 객체를 반환하므로 다음과 같이 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

jQuery.getScript("/path/to/myscript.js")
.done(function() {
/* 실행 성공 후 처리*/
})
.fail(function() {
/* 실행 실패 후 처리*/
}) ;

jQuery.getScript를 사용하는 가장 일반적인 시나리오는 플러그인을 지연 로드하고 로드 후에 호출하는 것입니다.

코드 복사 코드는 다음과 같습니다.

jQuery.getScript("jquery.cookie.js")
.done(function() {
jQuery.cookie(" cookie_name", "value", { 만료: 7 });
});

여러 스크립트 및 다양한 유형의 파일(텍스트 파일, 텍스트 파일, 이미지, CSS 파일 등), 더 강력한 JavaScript 로더로 전환하는 것이 좋습니다. getScript는 단순히 페이지를 로드할 때마다 플러그인을 로드하는 것이 아니라 천천히 플러그인을 로드하려는 경우에 적합합니다!

캐싱 문제

jQuery.getScript를 사용할 때 스크립트 URL 끝에 타임스탬프가 자동으로 추가되어 스크립트가 캐시되었습니다. 따라서 모든 요청에 ​​대해 캐시 스크립트를 설정해야 합니다.

코드 복사 코드는 다음과 같습니다.

jQuery.ajaxSetup({
cache: true
})

AJAX 요청으로 모든 캐시를 덮어쓰지 않으려면 다음을 수행하는 것이 좋습니다. jQuery.ajax 메소드를 사용하고 dataType Set을 스크립트에 넣습니다. 예:

코드 복사 코드는 다음과 같습니다.

jQuery.ajax({
url: "jquery.cookie.js",
dataType: "script",
cache: true
}).done(function() {
jQuery.cookie("cookie_name" , "value", { 만료: 7 })
})

스크립트를 로드할 때 캐싱 문제에 특별한 주의가 필요합니다. !