티스토리 뷰

발생일: 2014.12.15

키워드: jQuery, getScript

문제:
코드 리뷰 중에 외부 라이브러리의 코드를 `$.getScript()`로 불러오는 코드를 보고,
캐시가 어떻게 동작하는지 궁금해 API를 확인해봤다.

`$.getScript()`는 jQuery 의 기본 ajax 속성을 받고 있어서, 요청 값을 캐시하지 않는다.
즉, 캐시되지 않게 매번 새로운 요청을 보낸다.

지금의 경우엔 해당 리소스가 캐시되는 게 더 효율적일 것 같은데,
어떻게 하면 `$.getScript()`의 캐시를 설정할 수 있을까?


해결책:

$.getScript() 캐시 설정

캐시를 설정할 순 있는데, 아래처럼 글로벌로만 설정해야 한다.
썩 좋지 않다.

$.ajaxSetup({
  cache: true
});


대신, 캐시가 필요한 요청 함수를 아래처럼 별도로 구현하면 된다.

jQuery.cachedScript = function( url, options ) {
 
  // Allow user to set any option except for dataType, cache, and url
  options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: url
  });
 
  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax( options );
};
 
// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});


반응형
댓글
공지사항