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

다른 JS 파일에 JS 파일을 포함시키는 방법은 무엇입니까? [복제]

---

가능한 중복 :
.js 파일 내에 .js 파일 포함

DRY 원칙 을 고수하고 코드 중복을 피하기 위해 다른 js 파일에 js 파일을 포함시키는 방법은 무엇입니까 ?

---

다른 스크립트 파일이 아닌 HTML 페이지에만 스크립트 파일을 포함 할 수 있습니다. 즉, "포함 된"스크립트를 동일한 페이지에로드하는 JavaScript를 작성할 수 있습니다 .

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.
});

---

나는 document.write기술 의 비평가에 동의하지 않는다 ( Vahan Margaryan의 제안 참조 ). 나는 길을 좋아 하지만 ( Matt Ball의 제안document.getElementsByTagName('head')[0].appendChild(...) 참조 ) 한 가지 중요한 문제가 있습니다 : 길에 포함 된 스크립트 실행 순서 . 아래에서 문제를보다 정확하게 설명해야합니다.

최근에 나는 한 가지 긴밀한 문제 를 재현하기 위해 많은 시간을 보냈다 . 잘 알고있는 jQuery 플러그인은 동일한 기술 (src here 참조 )을 사용하여 파일을로드하지만 다른 사람들이이 작업에 문제를보고했습니다. 다음과 같이 문제를 설명 할 수 있습니다. 많은 스크립트와 하나의 loader.js모든 부분으로 구성된 JavaScript 라이브러리가 있습니다 . 부품 중 일부는 다른 부품과 다릅니다. . 바로 다음에서 객체를 사용하는 다른 main.js스크립트 를 포함시켜 보겠습니다 . 문제는 언젠가에 의해로드 된 모든 스크립트 전에 실행된다는 것 입니다. 스크립트 내부의 사용법 도 도움이되지 못했습니다. 캐스 케이 딩 이벤트 핸들러 사용법<script>loader.jsloader.jsmain.jsloader.js$(document).ready(function () {/*code here*/});main.jsonloadloader.js스크립트를 병렬로로드하는 대신 순차적으로 수행하며 main.js이후 어딘가에 포함되어야 하는 스크립트 를 사용하기가 어렵습니다 loader.js.

내 환경에서 문제를 재현 할 수 있으며 Internet Explorer 8에서 스크립트 실행 순서가 JavaScript 포함 순서와 다를 수 있음을 알 수 있습니다 . 하나의 스크립트가 다른 스크립트를 포함해야하는 경우 매우 어려운 문제입니다. 문제는 Javascript 파일을 병렬 로 로드에 설명되어 있습니다. 해결 방법으로 다음을 사용하는 것이 좋습니다 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(...)기술)과 비교 고정 버전의 사용을 document.writeln. (페이지의 코드는 상대적으로 더러 우며 내 코드가 아니지만 설명하는 문제를 재현하는 데 사용할 수 있습니다).

---

직접 불가능합니다. 이를 처리 할 수있는 일부 전처리기를 작성할 수도 있습니다.

내가 올바르게 이해하면 아래에 그것을 달성하는 데 도움이 될 수있는 것들이 있습니다.

• 예를 들어 "@import somefile.js"와 같은 패턴을 찾고 JS 파일을 실행하는 전처리기를 사용하고 실제 파일의 내용으로 바꿉니다. Nicholas Zakas (Yahoo)는 Java로 사용할 수있는 하나의 라이브러리를 작성했습니다 ( http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/ )

• Ruby on Rails를 사용하는 경우 Jammit 자산 패키징을 시도 할 수 있습니다. asset.yml 구성 파일을 사용하여 여러 파일을 포함 할 수있는 패키지를 정의한 후 실제 웹 페이지에서 패키지 이름으로 참조 할 수 있습니다.

• RequireJS 와 같은 모듈 로더 또는 LabJs 와 같은 스크립트 로더 를 사용하여로드 순서를 제어하고 병렬 다운로드를 활용할 수 있습니다.

JavaScript는 현재 JavaScript 파일을 다른 CSS (@import)에 포함시키는 "기본"방식을 제공하지 않지만 위에서 언급 한 모든 도구 / 방법은 언급 한 DRY 원칙을 달성하는 데 도움이 될 수 있습니다. 서버 쪽 배경 출신이라면 직관적이지 않을 수도 있지만 이것이 방법입니다. 프런트 엔드 개발자에게이 문제는 일반적으로 "배포 및 패키징 문제"입니다.

도움이 되길 바랍니다.

---

document.write 객체를 작성해야합니다.

document.write('<script type="text/javascript" src="file.js" ></script>');

기본 자바 스크립트 파일에 배치하십시오.

참고 URL : https://stackoverflow.com/questions/4634644/how-to-include-js-file-in-another-js-file