Javascript 파일을 자동으로 포함하는 방법_javascript技巧

양식: http://www.webreference.com/programming/javascript/mk/
저자:Mark Kahn

많은 개발자는 자신이 개발하고 동료가 개발한 대규모 JavaScript 코드 라이브러리를 손쉽게 사용할 수 있습니다. , 또는 인터넷상의 스크립트를 통해 함께 엮어낸 것입니다. 하나의 기능을 찾기 위해 모든 파일을 검색할 필요가 없으면 좋겠다고 생각한 적이 있습니까? 이 문서에서는 해당 파일에서 함수를 호출하여 런타임 시 JavaScript 파일을 동적으로 포함하는 방법을 보여줍니다.

다음은 예입니다. bar.js 파일에 foo() 함수가 있습니다. 코드에서 foo()가 호출될 수 있다는 것을 알고 있지만 대부분의 사람들이 해당 기능을 사용하지 않기 때문에 호출되지 않을 가능성이 높습니다. bar.js가 상당히 큰 파일이기 때문에 사용되지 않는 한 사용자가 bar.js를 다운로드하도록 강요하고 싶지는 않습니다. 여기서는 bar.js를 실제로 로드한 다음 실제 foo() 함수를 호출하는 가짜 foo() 함수를 만드는 방법을 알아봅니다.

동적으로 스크립트 로드
많은 개발자가 알고 있듯이 런타임 시 스크립트를 동적으로 로드하는 방법에는 적어도 두 가지가 있습니다. 첫 번째는 스크립트 개체를 생성하여 문서에 추가하는 것입니다. 두 번째는 XMLHTTP 요청을 사용하여 소스 코드를 가져온 다음 평가()하는 것입니다. 

우리가 사용할 것은 이 두 번째 방법이며, XMLHTTP 요청이 모든 스크립트 활동을 완전히 중단시킬 수 있다는 사실을 활용하려고 합니다. 

먼저 몇 가지 기본 사항: XMLHTTP 개체를 생성하는 방법. AJAX로 작업하는 개발자의 수만큼 크로스 브라우저 XMLHTTP 개체를 반환하는 다양한 함수가 있습니다. 나에게도 내 것이 있는데, 그 간단한 예를 들면 다음과 같습니다.

复system代码 代码如下:

function getXMLHttpObj(){ 
  if(typeof(XMLHttpRequest)!='undefine') 
    return new XMLHttpRequest(); 

  var axO=['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.4.0', 
    'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'], 나; 
  for(i=0;i    시도{ 
      return new ActiveXObject(axO[i]); 
    }catch(e){} 
  return null; 
} 

Internet Explorer 5 또는 6을 제외한 대부분의 브라우저에는 XMLHttpRequest 객체가 내장되어 있습니다. Internet Explorer 7이 출시되면 이 개체도 기본적으로 갖게 됩니다. 우리가 가장 먼저 하는 일은 이 객체가 존재하는지 확인하는 것입니다. 그렇다면 인스턴스를 생성하면 끝입니다. 개체가 존재하지 않는 경우 여러 ActiveX 개체 중 하나를 생성하려고 시도합니다. 우리는 사용자가 어떤 개체를 설치했는지 모르기 때문에 최신 개체부터 시작하여 여러 가지 XMLHTTP 개체를 생성하려고 시도합니다. 

이제 함수를 동적으로 로드하려면 먼저 함수를 정의해야 합니다. 이 기능은 한 번에 하나씩 수행할 수 있지만 수십 개의 기능을 하드 코딩하는 대신 자동으로 포함하려는 모든 파일 이름과 기능이 포함된 객체 또는 배열을 만들도록 선택할 수 있습니다.

复主代码 代码如下:

var autoIncludeFunctions = { 
  'scripts/file1.js ': ['function1', 'function2', 'function3'], 
  'scripts/file2.js': ['function4', 'function5', 'function6'], 
  'scripts/file3.js ': ['function7', 'function8', 'function9'] 
} 

autoIncludeFunctions 개체에는 JavaScript 파일 목록과 함수 목록이 포함되어야 합니다. 그 파일. 여기서는 간단한 JavaScript 표기법을 사용하여 객체와 배열을 모두 생성하지만 동일한 작업을 다양한 방법으로 수행할 수 있습니다. 

이러한 .js 파일에는 자바스크립트 메뉴, 애니메이션 등 사용 가능한 모든 코드가 포함될 수 있습니다. 가장 간단한 예는 'file1.js'라는 제목의 파일로, '함수 function1()' 알림만 포함되어 있습니다. ('Hello, World!'); }'.

이러한 파일 중 하나에 다른 파일과 이름이 같은 함수가 포함되어 있는 경우 나열된 마지막 함수만 사용됩니다. 

일을 좀 더 쉽게 만들기 위해 JavaScript 파일을 끌어내서 실행하는 함수를 만들겠습니다. 우리의 경우에는 XMLHTTP 객체로 전송된 세 번째 매개변수가 false라는 것이 매우 중요합니다. 이렇게 하면 스크립트가 다른 코드를 계속 진행하는 대신 응답이 다운로드될 때까지 기다리게 됩니다. 

复system代码 代码如下:

function loadScript(scriptpath, functions){ 
  var oXML = getXMLHttpObj(); 
  oXML.open('GET', scriptpath, false); 
  oXML.send(''); 
  eval(oXML.responseText); 
  for(var i=0; i    window[functions[i]] = eval(functions[i]); 
} 

loadScript 함수에는 scriptpath와 함수라는 두 가지 인수가 필요합니다. 'scriptpath'에는 자바스크립트 파일의 URL이 포함되어야 하며, '함수'는 이 자바스크립트 파일에 존재하는 함수의 배열입니다.

보시다시피 스크립트를 가져와 실행하는 코드는 간단합니다. 브라우저는 먼저 자바스크립트 파일을 다운로드한 다음 해석합니다. AJAX 개발에 대한 다른 기사를 읽었다면 대부분의 경우 XMLHTTP 객체의 open() 함수에 전송된 세 번째 인수가 일반적으로 'true'라는 사실을 기억하실 것입니다. 우리의 경우에는 'false'로 설정했습니다. 이 인수는 XMLHTTP 개체의 상태를 제어합니다. true로 설정하면 개체가 비동기식으로 실행됩니다. 즉, 개체가 로드되는 동안 다른 모든 자바스크립트 코드가 계속 실행됩니다. 이는 여러 상황에서 좋은 일이지만 여기서 구현하면 파일 로드가 완료되기 전에 코드가 반환될 것입니다. 이 파일이 완료될 때까지 코드가 대기하기를 원하므로 이 세 번째 인수를 false로 설정하여 계속할 준비가 될 때까지 자바스크립트 실행을 일시 중지합니다. 

responseText에서 코드가 평가되면 loadScript 함수의 제한된 범위 내에서 실행되며 이로 인해 이러한 함수 중 어느 것도 loadScript 함수 외부에서 사용할 수 없습니다. 이 문제를 해결하기 위해 for 루프는 각 함수를 창 개체에 추가하여 전역적으로 사용할 수 있도록 합니다. 

현재 페이지와 동일한 서버에 있는 스크립트만 이 방식으로 호출할 수 있다는 점에 유의하는 것이 중요합니다. 이는 XMLHTTP 개체에 내재되어 있으며 일반 브라우저 보안을 강화하는 데 필요한 조치입니다.