js 파일을 다른 js 파일에 포함시키는 방법은 무엇입니까?

157

가능한 중복은 다음 DRY principle에 충실하고 코드의 중복을 피하기 위해js 파일을 다른 js 파일에 포함시키는 방법은 무엇입니까?

어떻게 다른 JS 파일로 JS 파일을 포함 할 수 있습니다.

2011-01-08 Aditya Shukla

[.js 파일 내에 .js 파일 포함] (http://stackoverflow.com/questions/2145914/including-a-js-file-within-a-js-file) 또는 [this 하나] (http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file) – user113716

187

그렇게

document.write('<scr'+'ipt type="text/javascript" src="other js file.js" ></scr'+'ipt>');

를 작성해야합니다. 스크립트하지만,이 경우는 실패 할 수 있습니다

var imported = document.createElement('script'); 
imported.src = '/path/to/imported/script'; 
document.head.appendChild(imported);

코드를 "포함"당신에 의존하는 좋은 기회가있다 : 즉, 당신이 같은 페이지로 "포함"스크립트를로드 자바 스크립트를 작성할 수 있습니다 말했다 브라우저가 "가져온"스크립트를 비동기 적으로로드하기 때문입니다. 가장 좋은 방법은이 문제를 해결하는 jQuery 또는 YUI와 같은 타사 라이브러리를 사용하는 것입니다.

// jQuery 
$.getScript('/path/to/imported/script.js', function() 
{ 
    // script is now loaded and executed. 
    // put your dependent JS here. 
});

출처

2011-01-08 15:49:38

나는 단지 반복 할 수 있습니다 : 사용법이'$ .getScript' 인 경우 두 번째 의존 스크립트는 처음로드 된 후 **로드가 시작됩니다 **. 병렬로드 ** 대신 순차적 **입니다. 게다가 어떤 사람이 JavaScript 라이브러리를로드하는'loader.js' 파일에'

직접적으로 가능하지 않습니다. 당신도 그것을 처리 할 수있는 몇 가지 전처리기를 작성할 수 있습니다.

사용 "@import와 같은 패턴을 찾고, 예를 들어 당신의 JS 파일을 통해 실행됩니다 사전 프로세서 : 나는 그것을 이해한다면

올바르게 다음 아래 그것을 달성하는 것이 도움이 될 수있는 것들 somefile.js "를 찾아 실제 파일의 내용으로 대체하십시오. 니콜라스 Zakas (야후) 당신은 당신이 시도 포장 Jammit 자산을 제공 할 수 있습니다 루비 온 레일즈를 사용하는 경우 (http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/)
을 사용할 수있는 자바에서 하나의 라이브러리를 작성, 그것은 어디 당신이 할 수있는 assets.yml 구성 파일을 사용합니다 여러 파일을 포함 할 수있는 패키지를 정의한 다음 실제 웹 페이지에서 패키지 이름으로 참조하십시오.
RequireJS과 같은 모듈 로더 또는 LabJs과 같은 스크립트 로더를 사용하여로드 순서를 제어하고 병렬 다운로드를 이용할 수 있습니다.

자바 스크립트는 현재 자바 스크립트 CSS (@import)과 같은 다른에 파일을 포함하는 "기본"방법을 제공하지 않지만, 모든 위에서 언급 한 도구/방법은 당신이 언급 한 DRY 원칙을 달성하기 위해 도움이 될 수 있습니다. 서버 측 배경에서 보았을 때 직관적으로 느껴지지 않을 수도 있지만 이해가됩니다. 프런트 엔드 개발자의 경우이 문제는 일반적으로 "배포 및 패키징 문제"입니다.

희망이 있습니다.

출처

2011-01-08 15:46:06 Arnab

예를 들어 주시겠습니까? –

내 마음에 무엇이 있는지 더 잘 설명하기 위해 내 대답을 편집했습니다. 희망이 시간 나는 충분히 명확하다. – Arnab

당신은 당신이 아닌 다른 스크립트 파일에 HTML 페이지에서 스크립트 파일을 만 포함 할 수 있습니다 첫 번째 JS 파일

출처

2011-01-08 15:48:58

+12

아, ** document.write()를 사용하여 **지지하지 마십시오. –

@Matt Ball : 당신 말이 맞습니다. 그러나 Vahan이 여기 새로 왔기 때문에, 당신은 이유를 설명하고 싶을지도 모릅니다. – Konerak

@Konerak : [이유는 여기에 있습니다.] (http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice). –

나는 document.write 기술 (suggestion of Vahan Margaryan 참조)의 비판에 동의하지 않는다. 내가 document.getElementsByTagName('head')[0].appendChild(...) (suggestion of Matt Ball 참조)하는 방법을 좋아하지만 거기에 하나의 중요한 문제가 있습니다 : 스크립트의 실행 순서는입니다. 나는 그 문제를보다 정확하게 설명해야한다.

최근에 많은 시간을 들여 one close problem을 재현합니다. 잘 알고있는 jQuery 플러그인은 파일을로드하는 데 같은 기술 (src here 참조)을 사용하지만 다른 사람들이이 작업에 대한 문제점을보고했다. 문제를 다음과 같이 설명 할 수 있습니다. 많은 스크립트로 구성된 JavaScript 라이브러리와 모든 부분을 하나의 loader.js이로드하도록하십시오. 부품의 일부는 다른 부품에 의존합니다. loader.js 다음에 loader.js의 개체를 사용하는 <script>마다 다른 main.js 스크립트를 포함 시키십시오. 문제는 가끔 main.js이 모든 스크립트가 loader.js에 의해로드되기 전에 실행된다는 것입니다. main.js 스크립트 안에 $(document).ready(function() {/*code here*/});을 사용하면 도움이되지 않을 수도 있습니다. loader.js에서 계단식 onload 이벤트 처리기를 사용하면 스크립트를 병렬로로드하는 대신 순차적으로 수행하고 main.js 스크립트를 사용하기가 어려우며이 스크립트는 loader.js 뒤에 그냥 포함되어야합니다.

내 환경에서이 문제를 재현 할 수 있으며 은 Internet Explorer 8에서 스크립트를 실행하는 순서가 JavaScript 포함 순서대로 다른 것일 수 있습니다. 다른 스크립트에 의존하는 스크립트를 포함시켜야하는 경우 매우 어려운 문제입니다. 문제는 Loading Javascript files in parallel에 설명되어 있습니다. 해결 방법이 document.writeln를 사용하도록 제안됨에 :

document.writeln("<script type='text/javascript' src='Script1.js'></script>"); 
document.writeln("<script type='text/javascript' src='Script2.js'></script>");

이 경우 "스크립트가 병렬로 다운로드 그러나 그들은 페이지에 기록하고 순서대로 실행"고 설명한다. document.getElementsByTagName('head')[0].appendChild(...) 기술을 document.writeln으로 변경 한 후에는 더 이상 문제를 보지 못했습니다.

그래서 document.writeln을 사용하는 것이 좋습니다.

업데이트]

: 누군가가 인터넷 익스플로러 (페이지 사용 document.getElementsByTagName('head')[0].appendChild(...) 기술)에 그가로드 할 수 있습니다 관심 (그리고 다시로드) the page을 가지고 the fixed version이 document.writeln을 사용하여 비교합니다. (페이지의 코드는 비교적 더럽고 나로부터 오는 것이 아니지만, 내가 설명하는 문제를 재현하는 데 사용될 수있다.)

출처

2011-01-08 22:22:44 Oleg

js 파일을 다른 js 파일에 포함시키는 방법은 무엇입니까?

답변

관련 문제