JavaScript 모듈 내보내기 및 가져오기 소개(자세한 설명)-JS 튜토리얼-php.cn

이 글은 JavaScript 모듈 내보내기 및 가져오기에 대한 소개(자세한 설명)를 제공합니다. 필요한 참고 자료가 있으면 도움이 될 것입니다.

최근 Vue 프레임워크로 작성된 일부 프로그램을 살펴보니 아직 프론트엔드 지식이 몇 년 전인 것을 발견했습니다. Javascript 프로그램에는 다양한 import 모듈이 있다는 것을 얼핏 보면 다음과 같습니다. python. 유사성은 from 및 import 키워드를 사용하는 순서를 바꾸는 것 이상입니다. 잘 살펴보면 import 모듈은 Python과 상당히 다릅니다. 모듈에 내보내기가 있다는 전제가 있고, 기본 내보내기와 명명된 내보내기로도 나누어져 있어서 조금 번거롭습니다. 그래서 오늘의 기사에서는 모든 내보내기 형식과 해당 가져오기 용도를 요약합니다.

ES6은 언어 표준 수준에서 모듈 기능을 구현하며 CommonJS 및 AMD 사양을 완전히 대체할 수 있는 범용 모듈 솔루션입니다.

각 모듈은 한 번만 로드됩니다. JS는 한 번만 실행됩니다. 다음에 동일한 디렉터리에 동일한 파일을 로드하면 메모리에서 직접 읽혀집니다.
각 모듈에 선언된 변수는 지역 변수이며 전역 범위를 오염시키지 않습니다.
내보내기를 통해 모듈 내부의 변수나 함수를 내보낼 수 있습니다.
모듈은 다른 모듈을 가져올 수 있습니다.

2. 모듈 기능은 주로 내보내기와 가져오기라는 두 가지 명령으로 구성됩니다. 내보내기 명령은 모듈의 외부 인터페이스를 지정하는 데 사용되며 가져오기 명령은 다른 모듈에서 제공하는 기능을 입력하는 데 사용됩니다.

3. 모듈은 독립된 파일이며 파일 내부의 모든 변수를 외부에서 가져올 수 없습니다. . 외부 세계에서 모듈 내부의 변수를 읽을 수 있게 하려면 내보내기 키워드를 사용하여 변수를 출력해야 합니다.

var year = '2018';
var month = 'Febuary';
export {year, month};

로그인 후 복사

export 내보내기 모듈

export 구문 선언은 함수, 개체 및 원본을 내보내는 데 사용됩니다. 지정된 파일(또는 모듈) 값의 이름입니다. 모듈을 내보내는 방법에는 이름이 지정된 내보내기(이름 내보내기) 및 기본 내보내기(정의 내보내기)라는 두 가지 방법이 있습니다. 이름이 지정된 내보내기는 모듈당 여러 모듈을 가질 수 있지만 기본 내보내기는 모듈당 하나만 가질 수 있습니다.

Named 내보내기

모듈은 내보내기 접두사 키워드를 통해 내보내기 개체를 선언할 수 있으며, 내보내기 개체는 여러 개가 될 수 있습니다. 이러한 내보내기 객체는 이름으로 구분되며, 이름이 지정된 내보내기

export { func }; // 导出一个已定义的函数func
export const foo = Math.sqrt(100); // 导出一个常量

로그인 후 복사

* 및 from 키워드를 사용하여 모듈 상속을 구현할 수 있습니다.

export * from 'base_module';

로그인 후 복사

모듈을 내보낼 때 내보낸 모듈 멤버를 지정할 수 있습니다. 내보낸 멤버는 클래스에서 공개 멤버로 간주될 수 있고, 내보내지 않은 멤버는 클래스에서 비공개 멤버로 간주될 수 있습니다.

var name = 'Kevin的居酒屋';
var domain = 'http://coffee.toast.com';
 
export {name, domain}; // 相当于导出{name:name,domain:domain}

로그인 후 복사

모듈을 내보낼 때 as 키워드를 사용하여 내보낸 멤버의 이름을 바꿀 수 있습니다. 내보내기는 다음과 같이 작성할 수 있습니다.

export {name as siteName, domain}

로그인 후 복사

구문 오류에 주의하세요.

export 1; 
var a = 100;
export a;

로그인 후 복사

인터페이스를 내보낼 때 모듈 내부 변수와 일대일 대응이 있어야 합니다. 1을 직접 내보내는 것은 의미가 없으며, 가져올 때 이에 해당하는 변수를 갖는 것도 불가능합니다. a가 함수에 할당되더라도 위의 형식을 사용하여 내보내는 것은 권장되지 않습니다. 대부분의 스타일에서는 위의 예처럼 모든 인터페이스를 내보내려면 모듈 끝에서 내보내기를 사용하는 것이 가장 좋다고 제안하기 때문입니다. export a虽然看上去成立，但是a的值是一个数字，根本无法完成解构，因此必须写成export {a}

기본 내보내기

기본 내보내기는 정의된 내보내기라고도 합니다. 명명된 내보내기는 여러 값을 내보낼 수 있지만 참조를 가져올 때 해당 값을 참조하는 데에도 동일한 이름을 사용해야 합니다. 기본 내보내기는 단일 값만 내보냅니다. 이 출력은 모듈을 가져올 때 참조하기가 더 쉬운 함수, 클래스 또는 기타 유형일 수 있습니다.

export default function() {}; // 导出一个函数
export default class(){}; // 导出一个类

로그인 후 복사

기본 내보내기는 명명된 내보내기의 또 다른 형태로 이해될 수 있습니다. 기본 이름을 사용하는 명명된 내보내기라고 생각할 수 있습니다.

다음 두 가지 내보내기 방법은 동일합니다.

const D = 123; 
export default D;
export { D as default };

로그인 후 복사

이름을 사용하여 모듈을 내보낼 때:

// "my-module.js" 模块
function cube(x) {
    return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

로그인 후 복사

다른 모듈(js 파일)에서는 다음과 같이 참조할 수 있습니다.

import { cube, foo } from 'my-module';
console.log(cube(3));
console.log(foo);

로그인 후 복사

기본값을 사용하여 모듈 내보내기 시기:

// "my-module.js"模块
export default function (x) {
return x * x * x;
}

로그인 후 복사

다른 모듈에서는 다음과 같이 참조할 수 있는데, 이는 이름 내보내기보다 사용하기 더 간단합니다:

import cube from 'my-module';
console.log(cube(3)); // 27

로그인 후 복사

import 가져오기 모듈

import 구문 문은 내보낸 모듈 및 스크립트에서 가져오는 데 사용됩니다. 함수의 기본 값, 개체 또는 지정된 파일(또는 모듈)입니다. 모듈 가져오기 가져오기는 내보내기 모듈 내보내기 기능에 해당합니다. 가져오기(이름 가져오기) 및 기본 가져오기(정의 가져오기)라는 두 가지 모듈 가져오기 방법도 있습니다.

참고: 가져오기는 파일 시작 부분에 배치해야 하며 앞에 다른 논리 코드는 허용되지 않습니다. 이는 다른 모든 프로그래밍 언어의 가져오기 스타일과 일치합니다.

Named Import

이름을 지정하여 가져온 멤버를 현재 범위에 삽입할 수 있습니다. 단일 멤버 또는 여러 멤버를 가져올 수 있습니다.

중괄호 안의 변수는 내보낸 후의 변수에 해당합니다

import {myMember} from "my-module";
import {foo, bar} from "my-module";

로그인 후 복사

通过*符号，我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时，就是将导出模块（’my-module.js’）所有的导出绑定内容，插入到当前模块（’myModule’）的作用域中：

import * as myModule from "my-module";

로그인 후 복사

默认导入

在模块导出时，可能会存在默认导出。同样的，在导入时可以使用import指令导入这些默认值。直接导入默认值：

import defaultName from "my-module";
import myDefault, {foo, bar} from "my-module"; // 指定成员导入和默认导入

로그인 후 복사

default关键字

// my-module.js
export default function() {}
 
// 等效于：
function func() {};
export {func as default};

로그인 후 복사

在import的时候，可以这样用：

import a from './my-module';
 
// 等效于，或者说就是下面这种写法的简写
import {default as a} from './my-module';

로그인 후 복사

这个语法糖的好处就是import的时候，可以省去{}。

简单的说，如果import的时候，你发现某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的{default as ...}语法，所以import $,{each,map} from 'jquery';import后面第一个$是{default as $}的替代写法。

위 내용은 JavaScript 모듈 내보내기 및 가져오기 소개(자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!