내 웹 프로젝트에 JavaScript 파일을 어떻게 포함할 수 있나요?

JavaScript 파일 포함: @Import 그 이상

@import는 외부 스타일시트를 포함하기 위해 CSS에서 일반적으로 사용되지만 JavaScript는 기본적으로 다음을 지원하지 않습니다. 유사한 메커니즘. 시간이 지남에 따라 이러한 요구를 해결하기 위한 다양한 방법이 등장했습니다.

ES6 모듈(권장)

2015년부터 JavaScript는 ES6 모듈을 채택하여 가져오기 위한 표준화된 방법을 제공했습니다. 모듈. 이 접근 방식은 대부분의 최신 브라우저와 Node.js에서 지원됩니다.

ES6 모듈을 활용하려면 내보내기 기능이 있는 module.js 파일을 생성하세요.

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

다른 파일에서 모듈을 선택하고 그 기능을 사용하세요:

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

Node.js Require

Node.js의 경우 기존 모듈 스타일은 module.exports/require 시스템입니다.

mymodule.js 모듈 만들기:

module.exports = {
   hello: function() {
      return "Hello";
   }
}

다른 파일에서 모듈 사용:

const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"

AJAX 로드

AJAX 요청을 사용하여 JavaScript 스크립트를 동적으로 로드할 수 있습니다. 그러나 이 기능은 보안 제한으로 인해 동일한 도메인으로 제한됩니다. 이러한 스크립트를 실행하기 위해 eval을 사용하는 것은 잠재적인 보안 위험으로 인해 권장되지 않습니다.

가져오기 로드

동적 가져오기와 유사하게 Fetch Inject 라이브러리를 사용하면 가져오기를 통해 여러 스크립트를 로드할 수 있습니다. Promise를 사용하여 실행 순서를 제어합니다.

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 로드

jQuery는 외부 스크립트를 로드하는 간단한 방법을 제공합니다.

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

동적 스크립트 로드

이 기술에는 스크립트 생성이 포함됩니다. 원하는 URL로 태그를 지정하고 이를 HTML에 삽입합니다. document.

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");
    script.src = url;
    document.head.appendChild(script);
}

스크립트 실행 감지

스크립트를 비동기적으로 로드하는 경우 스크립트가 실행되기 전에 지연이 발생합니다. 스크립트 로드가 완료된 시기를 감지하려면 이벤트 기반 콜백을 사용하거나 원래 답변에 제공된 링크에 제안된 접근 방식을 고려하세요.

소스 코드 병합/전처리

Parcel, Webpack 및 Babel과 같은 최신 빌드 도구는 여러 JavaScript 파일을 결합하고 변환을 적용하며 브라우저 간 호환성을 제공할 수 있습니다. 이를 통해 개발자는 고급 JavaScript 기능을 사용하고 개발 작업 흐름을 간소화할 수 있습니다.

위 내용은 내 웹 프로젝트에 JavaScript 파일을 어떻게 포함할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!