질문 : 다른 JavaScript 파일에 JavaScript 파일을 어떻게 포함합니까?
다른 JavaScript 파일에 JavaScript 파일을 포함 할 수있는 CSS의 @import 와 유사한 JavaScript가 있습니까?
답변
이전 버전의 JavaScript에는 가져 오기, 포함 또는 필요가 없었기 때문에이 문제에 대한 다양한 접근 방식이 개발되었습니다.
그러나 2015 년 (ES6) 이후 JavaScript는 Node.js에서 모듈을 가져 오기 위한 ES6 모듈 표준을 가지고 있으며 대부분의 최신 브라우저 에서도 지원됩니다.
이전 브라우저와의 호환성을 위해 Webpack 및 Rollup 과 같은 빌드 도구 및 / 또는 Babel 과 같은 변환 도구를 사용할 수 있습니다.
ES6 Modules
ECMAScript (ES6) 모듈은 Node.js에서 v8.5부터 --experimental-modules 플래그를 사용하고 플래그가없는 Node.js v13.8.0 이상부터 지원되었습니다. "ESM"(vs. Node.js의 이전 CommonJS 스타일 모듈 시스템 [ "CJS"])을 활성화하려면 package.json "type": "module" 을 사용하거나 파일에 .mjs . (마찬가지로 Node.js의 이전 CJS 모듈로 작성된 모듈은 기본값이 ESM 인 경우 .cjs
package.json 사용 :
{
"type": "module"
}그런 다음 module.js :
export function hello() {
return "Hello";
}그런 다음 main.js :
import { hello } from './module.js';
let val = hello(); // val is "Hello";.mjs 사용하면 module.mjs .
export function hello() {
return "Hello";
}그런 다음 main.mjs :
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";브라우저의 ECMA스크립트 모듈
Safari 10.1, Chrome 61, Firefox 60 및 Edge 16 이후 브라우저는 ECMAScript 모듈을 직접로드하는 기능을 지원했습니다 (Webpack과 같은 도구가 필요하지 않음). caniuse에서 현재 지원을 확인하십시오. .mjs 확장자를 사용할 필요가 없습니다. 브라우저는 모듈 / 스크립트의 파일 확장자를 완전히 무시합니다.
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}https://jakearchibald.com/2017/es-modules-in-browsers/ 에서 자세히 알아보세요.
브라우저에서 동적 가져오기
동적 가져 오기를 사용하면 스크립트가 필요에 따라 다른 스크립트를로드 할 수 있습니다.
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>https://developers.google.com/web/updates/2017/11/dynamic-import 에서 자세히 알아보세요.
Node.js require
Node.js에서 여전히 널리 사용되는 이전 CJS 모듈 스타일은 module.exports / require 시스템입니다.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"JavaScript가 전처리가 필요없는 브라우저에 외부 JavaScript 콘텐츠를 포함하는 다른 방법이 있습니다.
AJAX Loading
AJAX 호출로 추가 스크립트를로드 한 다음 eval 을 사용하여 실행할 수 있습니다. 이것은 가장 간단한 방법이지만 JavaScript 샌드 박스 보안 모델로 인해 도메인으로 제한됩니다. eval 을 사용하면 버그, 해킹 및 보안 문제에 대한 문이 열립니다.
Fetch Loading
Dynamic Imports와 마찬가지로 Fetch Inject 라이브러리를 사용하여 스크립트 종속성에 대한 실행 순서를 제어하는 promise를 사용 fetch 호출로 하나 이상의 스크립트를로드 할 수 있습니다.
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})jQuery Loading
jQuery 라이브러리는 한 줄로 로드 기능을 제공합니다.
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});Dynamic Script Loading
스크립트 URL과 함께 스크립트 태그를 HTML에 추가 할 수 있습니다. jQuery의 오버 헤드를 피하려면 이상적인 솔루션입니다.
스크립트는 다른 서버에있을 수도 있습니다. 또한 브라우저는 코드를 평가합니다. <script> 태그는 웹 페이지 <head> 에 삽입하거나 닫는 </body> 태그 바로 앞에 삽입 할 수 있습니다.
다음은 이것이 작동하는 방법의 예입니다.
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}이 함수는 페이지의 헤드 섹션 끝에 <script> src 속성은 함수에 첫 번째 매개 변수로 제공되는 URL로 설정됩니다.
이 두 솔루션은 JavaScript Madness : Dynamic Script Loading 에서 설명하고 설명합니다.
스크립트가 실행된 시간 탐지
이제 알아야 할 큰 문제가 있습니다. 그렇게하는 것은 코드를 원격으로로드 한다는 것을 의미합니다. 최신 웹 브라우저는 성능을 향상시키기 위해 모든 것을 비동기 적으로로드하기 때문에 파일을로드하고 현재 스크립트를 계속 실행합니다. (이것은 jQuery 방법과 수동 동적 스크립트로드 방법 모두에 적용됩니다.)
즉, 이러한 트릭을 직접 사용하면 로드를 요청한 후 다음 줄에 새로로드 된 코드를 사용할 수 없습니다 . 계속로드되기 때문입니다.
예 : my_lovely_script.js MySuperObject 가 포함됩니다.
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined그런 다음 F5 키를
눌러 페이지를 다시로드합니다. 그리고 작동합니다! 혼란스러워 ...
그럼 어떻게해야할까요?
글쎄, 내가 준 링크에서 저자가 제안한 해킹을 사용할 수 있습니다. 요약하면, 급한 사람들을 위해 그는 스크립트가로드 될 때 이벤트를 사용하여 콜백 함수를 실행합니다. 따라서 콜백 함수에 원격 라이브러리를 사용하여 모든 코드를 넣을 수 있습니다. 예를 들면 :
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}그런 다음 스크립트가 람다 함수에 로드 된 후 사용할 코드를 작성합니다.
var myPrettyCode = function() {
// Here, do whatever you want
};그런 다음 모든 것을 실행합니다.
loadScript("my_lovely_script.js", myPrettyCode);script.async = false; 행 포함 여부에 따라 DOM이로드 된 후 또는 이전에 실행될 수 있습니다. . 일반적으로 이것을 논의하는 Javascript 로딩에 대한 훌륭한 기사가 있습니다.
소스 코드 Merge/Proprocessing
이 답변의 상단에서 언급했듯이 많은 개발자는 프로젝트에서 Parcel, Webpack 또는 Babel과 같은 빌드 / 트랜스 파일 도구를 사용하여 향후 JavaScript 구문을 사용하고 이전 브라우저에 대한 하위 호환성을 제공하고 파일을 결합하고 축소하고 코드 분할 등을 수행합니다.
출처 : https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file
'프로그래밍 언어 > JAVA' 카테고리의 다른 글
| JavaScript 변수명에 $를 붙이는 이유 (0) | 2021.12.07 |
|---|---|
| JavaScript 객체에서 키를 제거하는 방법 (0) | 2021.12.07 |
| Java에서 소수점 이하 n 자리로 숫자를 반올림하는 방법 (0) | 2021.12.07 |
| Java 인터페이스에서 static 메소드를 정의 하는 방법 (0) | 2021.12.06 |
| IDEA : javac : source release 1.7 requires target release 1.7 (0) | 2021.12.06 |