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

다른 JavaScript 파일에 JavaScript 파일 포함

JavaScript에서 모듈 가져오기는 CSS의 @import와 다릅니다. 초기 버전의 JavaScript에는 가져오기, 포함 또는 요구 기능이 부족하여 JavaScript 파일을 다른 파일에 포함하기 위한 다양한 접근 방식이 사용되었습니다. 그러나 ES6(2015) 이후 JavaScript는 Node.js 및 대부분의 최신 브라우저로 모듈을 가져오기 위해 ES6 모듈 표준을 도입했습니다.

ES6 모듈

ES6 모듈은 다음 구문:

import { function } from './module.js';
// or
import * as module from './module.js';

ECMAScript 모듈 브라우저

브라우저는 Webpack과 같은 빌드 도구 없이 ES6 모듈 직접 로딩을 지원합니다. 다음 구문을 사용하세요.

<script type="module">
  import { function } from './module.js';
</script>

Node.js require

Node.js는 CJS 모듈 스타일을 사용합니다.

const module = require('./module.js');

다른 방법

ES6 모듈 및 Node.js가 필요하며 브라우저에 JavaScript 파일을 포함하는 다른 방법은 다음과 같습니다.

• AJAX 로드: AJAX 호출을 사용하여 스크립트를 로드하고 평가판을 사용하여 실행합니다. 보안으로 인해 동일한 도메인으로 제한됩니다.
• Fetch Loading: 프라미스와 함께 fetch를 사용하여 스크립트의 실행 순서를 제어합니다.
• jQuery Loading: jQuery를 사용하여 한 줄로 스크립트를 로드합니다.
• 동적 스크립트 로딩: URL이 포함된 스크립트 태그를 생성하고 HTML에 추가합니다.

스크립트 실행 감지

JavaScript 파일을 원격으로 포함한다는 것은 비동기 로딩을 의미합니다. . 로드된 코드를 즉시 사용할 수 있도록 하려면 다음 기술을 사용하십시오.

function loadScript(url, callback) {
  // Create script tag
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  // Bind event to callback function
  script.onreadystatechange = callback;
  script.onload = callback;

  // Append to HTML
  document.head.appendChild(script);
}

소스 코드 병합/전처리

Parcel, Webpack, Babel과 같은 빌드 도구 소스 코드 병합, 이전 버전과의 호환성 제공, 파일 축소에 사용할 수 있습니다.

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