가변 범위 문제 - 외부 JS 파일에서 변수 참조하기

Question

아래의 문제는 제가 틀릴 수도 있지만 변수 범위와 관련이 있다고 생각합니다.

나는 웹 페이지에 몇 가지 외부 자바 스크립트 파일을 삽입하는 javascript 북마크릿을 만들었습니다. 이 북마크에는 3 개의 외부 js 파일을 삽입해야합니다. 이러한 파일을 삽입하려면 약 6 개의 다른 함수를 사용하고 있는데 모두 비슷합니다. 이러한 기능을 통합하기 위해 새로운 기능을 만들려고했으나 실패했습니다. 다양한 범위 문제로 인해 실패했다고 생각하지만 잘못 생각할 수도 있습니다. 여기

는 하나의 외부 JS 파일 (3 중)를 삽입하기 위해 노력 코드입니다 :

이

jQueryCheck(); 
function jQueryLoader() { 
    var jQ = document.createElement('script'); 
    jQ.type = 'text/javascript'; 
    jQ.onload = jQueryCheck; 
    jQ.src = 'http://example.com/jquery.js';  
    document.body.appendChild(jQ); //the jQuery variable get defined here 

} 

function jQueryCheck() { 
    if (typeof jQuery == 'undefined') { 
     jQueryLoader(); 
    } else { 
     tableSorterLoader(); 
    } 
} 

위의 코드는 작동하지만, 나는 3 별도의 외부를 삽입하기 위해 거의 동일한 기능을 3 회 실행해야 파일. (주석 참조) document.body.appendChild(js); 후 :

var scripts = []; 
    scripts[0] = 'http://example.com/jquery.js'; 
    scripts[1] = 'http://example.com/plugin2.js'; 
    scripts[2] = 'http://example.com/plugin3.js'; 
jsLoader(scripts, mainFunction); 
function jsLoader(file,nextFunction) {//nextFunction is the function that runs after jsLoader is finished 
    for (var i = 0; i <= scripts.length; i++) { 
     function insertScript() { 
      var js = document.createElement('script'); 
      js.type = 'text/javascript'; 
      js.onload = scriptCheck; 
      js.src = file[i]; 
      document.body.appendChild(js);//the jQuery variable fails to get defined here 
     } 
     function scriptCheck() { 
      var variableTest = (typeof jQuery); 
      if (typeof jQuery == 'undefined') { 
       insertScript(); 
      } 
     } 
     scriptCheck(); 
    } 
    nextFunction(); 
} 

나는 문제가 발생 어디 고립 생각 : 나는 (실패) 다음에 코드를 통합하기 위해 노력했다. 첫 번째 함수 집합에서 jQuery 변수가이 코드 줄에서 성공적으로 정의됩니다 (jQuery 라이브러리가 삽입 되었기 때문에). 그러나 두 번째 함수에서 jQuery 라이브러리가 아직 웹 페이지의 html에 성공적으로 삽입되어 있어도 jQuery 변수가 정의되지 않습니다. jQuery가 활성화되어 사용할 수있을 때까지 나머지 코드가 실행되지 않도록 jQuery를 정의했는지 확인해야합니다.

누구나 솔루션뿐만 아니라이 문제의 원인을 제안 할 수 있습니까? 또한, 누군가 내 새로운 기능을 향상시킬 것을 제안 할 수 jsLoader() 더 지능/전문 만들기 위해?

Answer 1

플러그인이 작동하기 전에로드 된 jquery 파일이 필요해 보이므로 한 번에 (예 : 두 번째 코드가 시도하는 것처럼) 세 가지 모두를로드하려고하지는 않겠지 만 처음 3 가지 기능 통화가 어쩌면 (어쩌면).

의견에서 알 수 있듯이 많은 플러그인 파일이 없으면 루프를 사용하지 않고 대신 jsLoader와 같은 중첩되지 않은로드 함수를 사용합니다. 첫 번째 호출은 마지막 함수를 호출하는 nextFunction을 사용하여 첫 번째 플러그인 파일에 대해 jsLoader를 호출하는 nextFunction과 함께 jQuery를로드합니다. 그런 다음 파일이 모두로드 된 시점을 알 수 있습니다.