JavaScript도 import를 사용하나요?

JavaScript에는 import 문이 있습니다. import 문은 한 모듈에서 내보낸 함수, 객체, 초기값을 다른 모듈로 가져오는 데 사용되며, 구문은 "가져와야 할 모듈의 경로 이름"에서 import {모듈 이름}입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

import 문은 다른 모듈에서 내보낸 바인딩을 가져오는 데 사용됩니다. 엄격 모드 선언 여부에 관계없이 가져온 모듈은 엄격 모드에서 실행됩니다. import 문은 포함된 스크립트에서 사용할 수 없습니다.

Syntax

import defaultExport from “module-name”;
import * as name from “module-name”;
import { export } from “module-name”;
import { export as alias } from “module-name”;
import { export1 , export2 } from “module-name”;
import { export1, export2 as alias2 , [...] } from “module-name”;
import defaultExport, { export [ , [...] ] } from “module-name”;
import defaultExport, * as name from “module-name”;
import “module-name”;

defaultExport

는 모듈의 기본 내보내기 이름을 참조합니다.

module-name

가져올 모듈입니다. 이는 일반적으로 모듈이 포함된 .js 파일에 대한 상대 또는 절대 경로 이름이며 .js 확장자를 포함하지 않을 수 있습니다. 일부 패키징 도구에서는 이 확장의 사용을 허용하거나 요구할 수 있습니다. 런타임 환경에서 작은따옴표 및 큰따옴표 문자열만 허용하는지 확인하세요.

name

참조 시 일종의 네임스페이스로 사용될 모듈 객체의 이름입니다.

export,exportN

가져올 내보내기의 이름

alias, aliasN

은 지정된 가져오기의 이름을 참조합니다.

Description

name 매개변수는 네임스페이스를 사용하여 내보내기를 참조하는 데 사용되는 "모듈 개체"의 이름입니다. 내보내기 매개변수는 이름이 지정된 단일 내보내기를 지정하는 반면, import * as name 구문은 모든 내보내기를 가져옵니다.

전체 모듈의 콘텐츠 가져오기

이렇게 하면 myModule이 현재 범위에 삽입됩니다. 여기에는 /modules/my-module.js에 있는 파일에서 내보낸 모든 모듈이 포함됩니다.

import * as myModule from ‘/modules/my-module.js’;

여기서 내보내기에 액세스한다는 것은 모듈 이름(이 경우 "myModule")을 네임스페이스로 사용하는 것을 의미합니다. 예를 들어 위에서 가져온 모듈에 doAllTheAmazingThings()가 포함된 경우 다음과 같이 호출할 수 있습니다.

myModule.doAllTheAmazingThings();

Import 단일 내보내기

myExport라는 개체 또는 값이 주어지면 모듈 my-module( 전체 모듈을 내보내거나(export 문을 사용하여) 명시적으로 내보내므로 myExport를 현재 범위에 삽입하세요.

import { myExport } from ‘/modules/my-module.js’;

다중 내보내기 가져오기

현재 범위에 foo와 bar를 삽입합니다.

import { foo, bar } from ‘/modules/my-module.js’;

별칭을 사용하여 내보내기 가져오기

가져올 때 내보내기 이름을 바꿀 수 있습니다. 예를 들어 현재 범위에 shortName을 삽입합니다.

import { reallyReallyReallyLongModuleExportName as shortName } from “/modules/my-module.js”;

가져올 때 여러 내보내기 이름 바꾸기

별칭을 사용하여 모듈의 여러 내보내기를 가져오세요.

import {
    reallyReallyReallyLongModuleMemberName as shortName,
    anotherLongModuleName as short
} form “/modules/my-module.js”;

부작용을 위한 모듈 가져오기

모듈은 부작용(중립적인 단어, 경멸적인 의미 없음)을 위해서만 가져옵니다. 모듈에서 아무 것도 가져오는 대신 모듈에서 전역 코드를 실행하지만 실제로는 어떤 값도 가져오지 않습니다.

import “/modules/my-module.js”

기본값 가져오기

기본 내보내기(객체, 함수, 클래스 등)가 적용되는 경우 사용할 수 있습니다. 그런 다음 import 문을 사용하여 이러한 기본값을 가져올 수 있습니다.
가장 간단한 사용법은 기본값을 직접 가져오는 것입니다:

import myDefault from “/modules/my-module.js”;

위의 사용법(네임스페이스 가져오기 및 명명된 가져오기)과 함께 기본 구문을 동시에 사용할 수도 있습니다. 이 경우 기본 가져오기를 먼저 선언해야 합니다.

import myDefault, * as myModule from “/modules/my-module.js”;

또는

import myDefault, { foo, bar } from “/modules/my-module.js”;

example

은 AJAX DSON 요청 처리를 지원하기 위해 도우미 모듈에서 가져옵니다.

모듈: file.js

function getJSON(url, callback){
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        callback(this.responseText)
    };
    xhr.open(‘GET’, url, true);
    xhr.send();
}
export function getUserFulContents(url, callback){
    getJSON(url, data => callback(JSON.parse(data)));
}

메인 프로그램: main.js

import { getUserFulContents } from “/modules/file.js”;
getUserFulContents(‘http://www.example.com”, 
    data => { doSomethingUseful(data); } )

[관련 권장사항: javascript 학습 튜토리얼]

위 내용은 JavaScript도 import를 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!