getScript - 어떻게 만, 이미 클릭에

Question

이라고하지 않을 경우 통화에로드되는 다음

$.getScript('/javascripts/contacts.js'); 

getScript 위에서 이미로드 된 경우 내가

라는 한 문장을 쓸 수있는 방법 X을 ,로드하지 않으면 Y ...?

감사

Answer 1

var gotContacts = 0; 
function getContacts(){ 
    if (!gotContacts){ 
     $.getScript('/javascripts/contacts.js', function() { 
      gotContacts = 1; 
      doSomethingWithContacts(); 
     }); 
    }else{ 
     doSomethingWithContacts(); 
    } 
} 

Answer 2

이 작업을 수행하지 마십시오 <script> 태그를 소스 코드를로드하는 컴파일러로 취급하지 마십시오. 대신 javascript minifier을 사용하여 모든 소스 코드를 연결하고 서버를 한 번만 누르십시오.

하나의 4k 파일을로드하는 것이 네 개의 1k 파일을로드하는 것보다 좋으며, minifier가 아마 그보다 나은 작업을 수행 할 수 있습니다. 어쨌든 브라우저는이 모듈을 캐싱하고 서버 설정을 엉망으로 만들지 않는 한 옳은 일을 할 것입니다.

계속 진행하려면 Ensure 또는 Ajile 또는 Dojo 또는 JSAN과 같이로드가 많은 자바 스크립트 라이브러리를 먼저보십시오. 적어도 그러면, 당신은 바퀴를 다시 발명하지 않을 것입니다.

아직도 직접하고 싶습니까? contacts.js이 무엇인지 확인하거나 변수를 사용하여 테스트를 완료했는지 여부를 테스트 할 수 있습니다. contacts.js는이 같은 뭔가가있는 경우 :, 또는

if(typeof ContactsLoaded=='undefined')$.getScript('contacts.js'); 

를 당신은 스스로를 설정하고 로더 기능을 할 수 있습니다 :

function ContactsLoaded(){...} 

당신은 할 수

function getScriptOnce(f){ 
    var a=getScriptOnce; 
    if(typeof a[f]=='undefined')$.getScript(f); 
    a[f]=true; 
} 

Answer 3

사용 require.js

을

Answer 4

내 상황이 달랐습니다. jquery를 사용하여 div에 내용을로드하는 메뉴를 사용했습니다. 헤더 섹션에 너무 많은 스크립트가 존재하지 않도록하기 위해 링크를 호출 한 경우에만 .getscript를 사용하여 파일을로드했습니다. 중복을 막기 위해 내놓은 해결책은 다음과 같습니다.

먼저 스크립트로드를 담당하는 함수를 만듭니다. 이 내 사이트에 global.js 파일과 global.js 파일의 일부가 하드 헤더에 코드입니다 :

는

var loadedScripts=new Array(); 

function loadScriptFiles(scriptArray){ 

    if($.isArray(scriptArray)){ 
     $.each(scriptArray, function(intIndex, objValue){ 
      if($.inArray(objValue, loadedScripts) < 0){ 
       $.getScript(objValue, function(){ 
        loadedScripts.push(objValue); 
       }); 
      } 
     }); 
    } 
    else{ 
      if($.inArray(script, loadedScripts) < 0){ 
       $.getScript(script, function(){ 
        loadedScripts.push(objValue); 
       }); 
      } 





    } 
} 

이 부하의 두 가지 유형, 배열, 또는 하나의 스크립트 값 중 하나를합니다. 배열 인 경우 각 요소를 반복하고로드합니다. 배열이 아닌 경우 하나의 파일 만로드합니다. 1 분 안에 그 부분을 보게 될 것입니다.

중요 부분 : loadScripts라는 전역 범위 (함수 외부)에 배열을 만들었습니다. 이 파일은 global.js 파일의 일부이므로 다시로드되지 않고 어디서나 호출 할 수 있습니다. JQuery와 inarray 함수가 반환하기 때문에 값이 발견되지 않는 경우 경우

-1, 난 단지

if($.inArray(objValue, loadedScripts) < 0){ 

계속 :하지만 우리의 목적을 위해, 나는 단순히로드되는 스크립트 이름을 사용하여 배열에 이미 있는지 확인 값이 0보다 작습니다.다른 값은 배열에 값이 있음을 의미합니다.

다음은 사용할 함수를 호출하는 방법입니다. 이 코드를 재생할 동적 페이지의 어느 위치 에나 배치하십시오 (맨 위에 놓습니다).

<script type="text/javascript"> 
    var scriptArray=new Array(); 
    scriptArray[0]="[REPLACE THIS WITH THE PATH TO THE JS FILE]"; 
    scriptArray[1]="[REPLACE THIS WITH THE PATH TO THE JS FILE]"; 
    loadScriptFiles(scriptArray); 
</script> 

제대로 완료되면 한 번만로드됩니다.

Answer 5

$.getScriptOnce()과 거의 일치하는 plugin을 만들었습니다.

동일한 스크립트를 두 번 이상로드하려고 시도하면 스크립트가로드되지 않고 false가 반환됩니다.

그러나 기본적으로, 그것은 $.getScript()

(function($) { 
    $.getScriptOnce = function(url, successhandler) { 
     if ($.getScriptOnce.loaded.indexOf(url) === -1) { 
      $.getScriptOnce.loaded.push(url); 
      if (successhandler === undefined) { 
       return $.getScript(url); 
      } else { 
       return $.getScript(url, function(script, textStatus, jqXHR) { 
        successhandler(script, textStatus, jqXHR); 
       }); 
      } 
     } else { 
      return false; 
     } 

    }; 

    $.getScriptOnce.loaded = []; 

}(jQuery)); 

의 다른 기능을 정의하고 단순히 나는 또한 같은 기능을 쓴 $.getScriptOnce('yourFile.js')

Answer 6

호출합니다. Firebug 또는 Chrome 개발 도구의 네트워크 탭으로 테스트 할 수 있습니다. 이것은 같은 파일을 한 번로드합니다.

콜백이 호출 된 후, 즉 파일이 성공적으로로드 된 후 함수가 파일이로드 된 것으로 가정하기 때문에 이전 두 번째 시간을 다운로드하지 않도록주의하십시오.

var getScriptOnce = (function(url, callback) { 
 
    var scriptArray = []; //array of urls 
 
    return function (url, callback) { 
 
     //the global array doesn't have such url 
 
     if (scriptArray.indexOf(url) === -1){ 
 
      if (typeof callback === 'function') { 
 
       return $.getScript(url, function(script, textStatus, jqXHR) { 
 
        scriptArray.push(url); 
 
        callback(script, textStatus, jqXHR); 
 
       }); 
 
      } else { 
 
       return $.getScript(url, function(){ 
 
        scriptArray.push(url); 
 
       }); 
 
      } 
 
     } 
 
     //the file is already there, it does nothing 
 
     //to support as of jQuery 1.5 methods .done().fail() 
 
     else{ 
 
      return { 
 
       done: function() { 
 
        return { 
 
         fail: function() {} 
 
        }; 
 
       } 
 
      }; 
 
     } 
 
    } 
 
}()); 
 

 
/*#####################################################################*/ 
 
/*#####################################################################*/ 
 

 

 
//TEST - tries to load the same jQuery file twice 
 
var jQueryURL = "https://code.jquery.com/jquery-3.2.1.js"; 
 
console.log("Tries to load #1"); 
 
getScriptOnce(jQueryURL, function(){ 
 
    console.log("Loaded successfully #1") 
 
}); 
 

 
//waits 2 seconds and tries to load again 
 
window.setTimeout(function(){ 
 
    console.log("Tries to load #2"); 
 
    getScriptOnce(jQueryURL, function(){ 
 
    console.log("Loaded successfully #2"); 
 
    }); 
 
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>