JavaScript에서 AMD 및 ES6 모듈 가져오기 및 내보내기 비교(코드 예)

이 기사의 내용은 JavaScript에서 AMD와 ES6 모듈의 가져오기 및 내보내기 비교에 관한 것입니다(코드 예제). 필요한 친구가 참고할 수 있기를 바랍니다.

저희 프론트엔드는 개발 과정에서 import,export 기능을 자주 접하게 됩니다.
가져올 때는 require일 때도 있고, import일 때도 있습니다.
내보낼 때, module.exports일 때도 있고, import일 때도 있고, default일 때도 있습니다
오늘은 이러한 내용에 대해 간략하게 소개하겠습니다

import,export,export default

import,export,export default는 ES6 사양에 속합니다

import

import는 컴파일 프로세스 중에 실행됩니다
즉, 코드 실행 실행 전,
예를 들어 import 후 경로를 잘못 적으면 코드 실행 전에 오류가 발생합니다.
코드 작성 시 import를 js 앞에 쓸 필요는 없습니다
import 명령에는 개선 효과가 나타나며, 전체 모듈의 선두가 먼저 실행됩니다. (컴파일 단계에서 실행됩니다.)
Import는 정적으로 실행됩니다
import는 정적으로 실행되기 때문에 표현식과 변수는 사용할 수 없습니다. 즉 런타임에만 결과를 얻을 수 있는 구문 구조
예를 들어, if and else import
또 다른 예를 들어 from after import의 경로는 상대 경로일 수도 있고 절대 경로일 수도 있지만 변수를 기반으로 얻은 경로일 수는 없습니다

//import 路径不可以为变量
var url = './output'
  import {
    a,
    b
  } from url//这么写会报错
//------------------
//import 的引入与否不能和代码逻辑向关联
let status= true
if(status){
     import {
    a,
    b
  } from url//这么写会报错
}

import는 as
를 사용하여 이름을 바꿀 수 있습니다. imports 방법의 종류,

  import foo from './output'
  import {b as B} from './output'
  import * as OBj from './output'
  import {a} from './output'
  import {b as BB} from './output'
  import c, {d} from './output'

import 방법은 내보내기와 어느 정도 관련이 있습니다. 아래에서 내보내기에 대해 이야기할 때 위의 가져오기 방법을 하나씩 소개하겠습니다.

exoprt 및 내보내기 기본값

exoprt와 내보내기 기본값을 함께 사용하기 때문입니다. 매우 큽니다
간단히 말하면: 내보내기는 내보내기이고 내보내기 기본값은 기본 내보내기입니다
모듈은 여러 개의 내보내기를 가질 수 있지만 내보내기 기본값은 하나만 있을 수 있으며 내보내기 기본값은 여러 개의 내보내기와 공존할 수 있습니다
export default는 기본 내보내기이고, 내보내기는 {}로 래핑된 객체이며 키-값 쌍의 형태로 존재합니다. 따라서 내보내기 방법이 다르면 가져오기 방법도 달라지므로 동일하게 가져오기 및 내보내기 방법을 사용하는 것이 좋습니다.

export 기본 해체 후 내보내기입니다두 가지 직관적인 데모를 통해 기본 내보내기와 내보내기의 차이점을 살펴보세요먼저 코드 조각 살펴보기(내보내기)
output.js

const a = 'valueA1'
export {a}

input.js

import {a} from './output.js'//此处的import {a}和export {a}，两个a是一一对应关系
console.log(a)//=>valueA1

export {a}가 있는 위 코드에 주의하세요. 내보낸 a는 import {a}로 가져온 a와 동일합니다.

코드를 다시 살펴보세요(내보내기 기본값)

const a = 'valueA1'
export default{a}

input.js

import a from './output.js'//此处的a和export default{a}，不是一个a，
console.log(a)//=>{ a: 'valueA1' }

내보내기 기본값의 밤나무에 있는 input.js를 보면 약간 변경되었습니다.

import abc from './output.js'//此处的a和export default{a}，不是一个a，
console.log(abc)//=>{ a: 'valueA1' }

몇 가지 변경을 했지만 출력은 변경되지 않았습니다. 가져오기는 내보내기 기본값에서 개체를 가져오므로 원하는 대로 호출할 수 있습니다. 내보내기 기본값

exoprt와 내보내기 기본값이 함께 혼합되어 있습니다

exoprt와 내보내기 일반적으로 이렇게 하지 않지만 동일한 모듈에서 기본값을 동시에 사용하는 것이 지원됩니다.

출력 예를 살펴보세요. js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
const d = 'valueD1'
function foo() {
  console.log(`foo执行，c的值是${c}`);
}
export {a}
export {b}
export default { b,d,foo}

input.js

import obj, {a,b } from './output'
console.log(a); //=>valueA1
console.log(b); //=>valueB1
console.log(obj); //=>{ b: 'valueB1', d: 'valueD1', foo: [Function: foo] }

as rename

은 exoprt를 통해 내보내지고 기본적으로 import가 도입되면 as를 통해 이름 바꾸기를 지원합니다. 여전히 위의

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
const d = 'valueD1'
function foo() {
  console.log(`foo执行，c的值是${c}`);
}
export {a}
export {b}
export default { b,d,foo}

입니다.

는 내보내기 및 내보내기 기본값으로 내보낸 항목을 포함한 모든 것을 나타냅니다.

앞서 import{}와 내보내기{}는 일대일 대응이므로 내보내기에서 내보낸 항목은 가져오기에서 지원되지 않는다고 말했습니다.{}*

정보 가져오기, 내보내기 및 내보내기 기본값은 여기에서 계속하겠습니다.

require, 내보내기, module.exports(끝의 s를 기억하세요)

이것은 AMD 사양입니다

require

require는 런타임 호출이므로 require입니다. 이론적으로는 코드의 어느 곳에서나 사용할 수 있습니다.

require는 동적 도입을 지원합니다

예를 들어, 이것은 지원됩니다

import {a as A} from './output'
import {* as A} from './output'//这是不支持的
import * as obj from './output'
console.log(A); //=>valueA1
console.log(obj); //=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }

require 경로는 변수를 지원합니다

import {* as A} from './output'//这是不支持的
import * as obj from './output'
console.log(obj); //=>{ a: 'valueA1',default: { b: 'valueB1', d: 'valueD1', foo: [Function: foo] },b: 'valueB1' }

require를 통한 도입은 할당 프로세스

내보내기 및 모듈입니다. 내보내기

AMD 사양에 따름

각 파일은 모듈이며 자체 범위를 갖습니다. 파일에 정의된 변수, 함수 및 클래스는 비공개이며 다른 파일에 표시되지 않습니다.

각 모듈 내에서 모듈 변수는 현재 모듈을 나타냅니다. 이 변수는 객체이고 해당 내보내기 속성(예: module.exports)은 외부 인터페이스입니다. 모듈을 로드하면 실제로 모듈의 module.exports 속성이 로드됩니다.

편의를 위해 Node는 module.exports를 가리키는 각 모듈에 대한 내보내기 변수를 제공합니다. 이는 각 모듈의 헤드에 이와 같은 줄을 두는 것과 같습니다.

let flag = true
if (flag) {
  const a = require('./output.js')
  console.log(a); //支持
}

그래서

다음 두 가지 작성 방법은 동일합니다

let flag = true
let url = './output.js'
if (flag) {
  const a = require(url)
  console.log(a); //支持
}

앞서 언급했듯이 각 모듈에 module.exports를 가리키는 내보내기 변수를 제공하세요.

따라서 내보내기에 직접 값을 할당할 수 없으므로 할당이 덮어쓰게 됩니다.

const exports = module.exports;

내보내기에 직접 값을 할당하면 내보내기와 모듈 간의 관계가 끊어집니다. .js

exports.a ='valueA1'
module.exports.a='valueA1'

input.js

const exports = module.exports;

다른 부분을 살펴보세요. code

output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
module.exports = { c}
exports.b = b//当直接给 module.exports时，exports会失效
module.exports.a = a

input.js

  const obj = require('./output.js')
  console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }

当直接给 module.exports时，exports会失效

交叉使用

在ES6中export default 导出的是一个对象
在AMD中exports和module.exports导出的也都是一个对象
所以如果你手中的项目代码支持两种规范，那么事可以交叉使用的（当然不建议这么去做）
通过export导出的不一定是一个对象

demo1

output.js

//部分省略
module.exports = { c}
module.exports.a = a

inputj.s

import obj from './output'
import {a} from './output'
console.log(a);//=>valueA1
console.log(obj);//=>{ c: 'valueC1', a: 'valueA1' }

demo2

output.js

const a = 'valueA1'
const b = 'valueB1'
const c = 'valueC1'
function foo() {
  console.log(`foo执行，c的值是${c}`);
}
export {a}
export default {b,c,foo}
export {b}

input.js

  const a = require('./output.js')
  console.log(a); //=>{ a: 'valueA1',default: { b: 'valueB1', c: 'valueC1', foo: [Function: foo] }, b: 'valueB1' }

总结

• require，exports，module.export属于AMD规范，import，export，export default属于ES6规范
• require支持动态导入，动态匹配路径，import对这两者都不支持
• require是运行时调用，import是编译时调用
• require是赋值过程，import是解构过程
• 对于export和export default 不同的使用方式，import就要采取不同的引用方式，主要区别在于是否存在{},export导出的，import导入需要{},导入和导出一一对应,export default默认导出的，import导入不需要{}
• exports是module.export一种简写形式，不能直接给exports赋值

• 当直接给module.export赋值时，exports会失效

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

위 내용은 JavaScript에서 AMD 및 ES6 모듈 가져오기 및 내보내기 비교(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!