자바스크립트에서 내보내기란 무엇을 의미하나요?

JavaScript에서 내보내기는 "내보내기"를 의미합니다. JavaScript에서 모듈 내의 모든 선언은 내보내기 키워드를 사용하여 모듈을 내보낼 수 있습니다. 모듈을 내보낸 후 다른 JS 파일을 사용할 수 있습니다. import 명령을 통해 모듈을 로드합니다.

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

Javascript에서 내보내기는 무엇을 의미하나요?

기본적으로 모듈 내 JavaScript의 모든 선언은 로컬이며 외부에서 액세스할 수 없습니다. 모듈에서 선언된 콘텐츠 중 일부를 노출하고 다른 모듈에서 이를 사용하도록 해야 하는 경우 가장 간단한 방법은 모듈을 내보내는 내보내기 키워드를 추가하는 것입니다.

내보낼 수 있는 콘텐츠에는 var, let, const로 수정된 클래스, 함수, 변수가 포함됩니다. 내보내기 명령은 모듈의 최상위 수준에 있는 한 모듈의 어느 곳에나 나타날 수 있습니다. 블록 수준 범위에 있는 경우 가져오기 명령과 마찬가지로 오류가 보고됩니다.

export 명령을 사용하여 모듈의 외부 인터페이스를 정의한 후 다른 JS 파일에서 import 명령을 통해 이 모듈을 로드할 수 있습니다.

import 명령은 리프팅 효과가 있으며 전체 모듈의 선두로 승격되어 먼저 실행됩니다. 가져오기는 정적으로 실행되므로 표현식과 변수를 사용할 수 없습니다. 이는 런타임에만 결과를 얻을 수 있는 구문 구조입니다.

1. 기본 가져오기/내보내기 기본 가져오기/내보내기

각 모듈에는 기본 내보내기가 하나만 있으며 내보내기 내용은 함수, 클래스, 개체 등이 될 수 있습니다. 이 방법이 주요 내보내기 내용으로 간주되므로 가져오기 방법이 가장 간단합니다.

// there is no semi-colon here
export default function() {} 
export default class {}
//示例
class A extends Component{
   ...
}
export default A;
//对应的import示例。
import A from './requireTest'
//default export, 输入 lodash 模块
import _ from 'lodash';
//一条import语句中，同时输入默认方法和其他变量
import _, { each } from 'lodash';
//上述代码对应的export语句
export default function (obj) {
  // ···
}
export function each(obj, iterator, context) {
  // ···
}
export { each as forEach };

참고: 모듈은 하나의 기본 개체만 내보낼 수 있습니다. 실제로 내보내는 것은 이름 바꾸기를 위한 변수입니다. 따라서 가져온 후에는 어떤 변수 이름이라도 사용할 수 있으며, {}가 필요하지 않습니다.

import any from './requireTest'
import {default as any } from './requireTest'

2. import 및 내보내기라는 이름

export 명령은 외부 인터페이스를 지정하고 모듈 내부 변수와 일대일 대응을 설정해야 한다는 점에 유의해야 합니다. 또한, 내보내기 문에 의해 출력된 인터페이스는 해당 값과 동적 바인딩 관계를 갖습니다. 즉, 이 인터페이스를 통해 모듈 내부의 실시간 값을 얻을 수 있습니다.

import 명령은 다른 모듈에서 가져올 변수 이름을 지정하는 중괄호 쌍을 허용합니다. 중괄호 안의 변수 이름은 가져온 모듈(profile.js)의 외부 인터페이스 이름과 동일해야 합니다. 입력 변수의 이름을 바꾸려면 import 명령에서 as 키워드를 사용하여 입력 변수의 이름을 바꾸십시오.

가져오기 후의 "from"은 모듈 파일의 위치를 ​​지정하며, 이는 상대 경로 또는 절대 경로일 수 있습니다. .js 경로는 생략할 수 있습니다. 경로 없이 모듈 이름만 있는 경우 JavaScript 엔진에 모듈 위치를 알려주는 구성 파일이 있어야 합니다.

// profile.js
//第一种export
export var firstName = 'Michael';
export function f() {};
//第二种export，优先使用这种写法
var firstName = 'Michael';
export {firstName}；
function f() {}
export {f};
//main.js
import { firstName, f } from './profile';
import { firstName as surname } from './profile';

3. 가져오기 및 내보내기 이름 바꾸기

export { myFunction }; // exports a function declared earlier
export const foo = Math.sqrt(2); // exports a constant

다른 모듈의 내보내기 콘텐츠를 가져올 때 이름 지정의 고유성을 유지해야 합니다. 이 문제는 다음 두 가지 범주를 포함하여 이름을 바꾸면 해결될 수 있습니다.

//导出的时候重命名
function v1() { ... }
function v2() { ... }
export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion  //可以用两个不同的名称导出相同的值
};
//导入的时候重命名
// 这两个模块都会导出以`flip`命名的东西。同时导入两者，需要将其中一个的名称改掉。
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";

4.export와 import의 복합작성

모듈에서 동일한 모듈을 먼저 입력하고 출력하는 경우 import문도 import문과 함께 작성할 수 있습니다.

export { foo, bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
export { foo, bar };

【관련 권장 사항: javascript 학습 튜토리얼】

위 내용은 자바스크립트에서 내보내기란 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!