JavaScript로 가져오기에 대한 자세한 설명(예제 포함)

이 글은 JavaScript로 가져오기에 대한 자세한 설명을 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

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()가 포함된 경우 다음과 같이 호출할 수 있습니다. myExport를 my-module 모듈에서 내보낸 myExport의 개체 또는 값으로 현재 범위에 삽입합니다(전체 모듈이 내보냄) 또는 명시적으로 내보냈습니다(export 문 사용).

myModule.doAllTheAmazingThings();

여러 내보내기 가져오기

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

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

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

내보내기 이름은 가져올 때 이름을 바꿀 수 있습니다(예: 현재 범위에 shortName을 삽입).

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

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

별칭을 사용하여 모듈의 여러 내보내기를 가져옵니다.

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

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

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

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

Import default

기본 내보내기(객체, 함수, 클래스 등)가 적용되는 경우 사용 가능합니다. 그런 다음 import 문을 사용하여 이러한 기본값을 가져올 수 있습니다.

가장 간단한 사용법은 기본값을 직접 가져오는 것입니다:

import “/modules/my-module.js”

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

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

또는

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

Example

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

모듈: file.js

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

메인 프로그램: main.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)));
}

# 🎜🎜#보충사항

엄격 모드엄격 모드임베디드 스크립트

위 내용은 JavaScript로 가져오기에 대한 자세한 설명(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!