하나의 JavaScript 파일을 다른 파일에 포함하려면 어떻게 해야 합니까?

한 JavaScript 파일을 다른 파일에 어떻게 포함합니까?

한 JavaScript 파일을 다른 파일에 포함하는 것은 CSS에서 @import를 사용하는 것만큼 간단하지 않습니다. . ES6 이전에는 이 문제를 해결하기 위해 다양한 접근 방식이 활용되었습니다.

ES6 모듈

2015년(ES6)부터 JavaScript는 Node.js에서 모듈을 가져오기 위해 ES6 모듈을 도입했습니다. 대부분의 최신 브라우저도 이 표준을 지원합니다. ES6 모듈은 다음 구문을 사용합니다.

export function hello() {
  return "Hello";
}

import { hello } from './module.js';
let val = hello(); // val is "Hello";

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"   

기타 브라우저 로딩 방법

ES6 모듈 외에도 브라우저는 외부 JavaScript 콘텐츠를 로딩하기 위한 다양한 다른 옵션도 제공합니다.

• AJAX 로딩: AJAX 사용 호출하여 추가 스크립트를 로드한 다음 eval을 사용하여 실행합니다.
• Fetch Loading: fetch 호출을 사용하여 스크립트를 로드하고 실행 순서를 제어할 것을 약속합니다.
• jQuery 로딩: jQuery 라이브러리를 사용하여 한 줄의 스크립트를 로드합니다. code.
• 동적 스크립트 로딩: 스크립트 URL이 포함된 스크립트 태그를 HTML에 추가합니다. 이를 통해 브라우저는 코드를 평가할 수 있습니다.

스크립트 실행 감지

원격으로 코드를 로드할 때 최신 브라우저는 스크립트를 비동기식으로 실행하므로 코드가 실행되지 않을 수 있습니다. 로딩 후 바로 사용 가능합니다. 스크립트가 실행된 시기를 감지하려면 다음을 사용할 수 있습니다.

• 이벤트 핸들러: 스크립트 태그의 onload 또는 onreadystatechange 이벤트를 콜백 함수에 바인딩합니다.
• 소스 코드 병합/전처리: Parcel, Webpack 또는 같은 빌드/변환 도구를 사용합니다. JavaScript 파일이 브라우저에 로드되기 전에 결합하고 처리하는 Babel.

위 내용은 하나의 JavaScript 파일을 다른 파일에 포함하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!