JavaScript での AMD および ES6 モジュールのインポートとエクスポートの比較 (コード例)

この記事の内容は、JavaScript での AMD と ES6 モジュールのインポートとエクスポートの比較 (コード例) です。一定の参考価値があります。必要な友人は参考にしてください。お役に立てば幸いです。 。

私たちのフロントエンドは、開発プロセス中にインポート関数とエクスポート関数に頻繁に遭遇します。
インポートするときは、require である場合もあれば、import である場合もあります。
エクスポートする場合は、exports であることもあり、モジュールです。エクスポート、時々エクスポート、エクスポート デフォルト
今日はこれらの内容を簡単に紹介します

インポート、エクスポート、エクスポート デフォルト

インポート、エクスポート、エクスポート デフォルトは ES6 仕様に属します

import

import はコンパイルプロセス中に実行されます
つまり、コードが実行される前に実行されます。
たとえば、インポート後のパスが間違って記述されている場合、コードを実行する前に実行するとエラーがスローされます。
コードを書くとき、import を js の先頭に書く必要はありません。
import コマンドにはリフティング効果があり、先頭に昇格します。モジュール全体の最初に実行されます。 (コンパイルフェーズで実行されます)
インポートは静的に実行されます
インポートは静的に実行されるため、式や変数は使用できません、つまり実行時にのみ結果を取得できる構文構造です
Forたとえば、if および else で import
を再度使用することはできません。別の例として、インポート後の from のパスは相対パスまたは絶対パスにすることができますが、変数

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

に基づいて取得したパスにすることはできません。

import 名前を変更するには as を使用できます
インポート メソッドは多数あります。

  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'

インポート メソッドはエクスポートと多少関連しています。以下でエクスポートについて説明するときは、はじめに

exoprtとexportdefault

exoprtとexportdefaultは密接に関連しているのでまとめてください
単純に言うと、exportはexportであり、exportです。デフォルトはデフォルトのエクスポートです
モジュールには複数のエクスポートを含めることができますが、エクスポートのデフォルトは 1 つだけです。エクスポートのデフォルトは複数のエクスポートと共存できます。
エクスポートのデフォルトはデフォルトのエクスポートであり、エクスポートは、{} で囲まれたオブジェクトです。キーと値のペアの形式で存在します。
エクスポート方法が異なると、インポート方法も異なります。
したがって、同じインポートとエクスポートを使用することをお勧めします。開発を容易にするために同じプロジェクトにメソッドを追加します。
export デフォルトの分解後は、export です。
2 つの直感的なデモを通じて、export と exportdefault の違いを見てみましょう
まず、コードの一部を見てみましょう(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 は、によってインポートされた a と同じであることに注意してください。 import {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' }

いくつかの変更を加えましたが、出力は変更されませんでした。インポートでは、エクスポート デフォルトの下のオブジェクトがインポートされます。エクスポート デフォルトは 1 つだけであるため、任意の名前を付けることができます

exoprt とエクスポートのデフォルトは一緒に混在しています

exoprt とエクスポートのデフォルトは同じモジュールで同時に使用されており、これはサポートされていますが、一般的には行われません
栗を見てください
output.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 およびエクスポートのデフォルトを介してエクスポートインポートが導入されると、as を介した名前変更がサポートされます
見てください
これはまだ上の Output.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 {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' }

後の変数はあなたのものです input.js で使用するには、この部分に注目してください

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' }

は、エクスポートとエクスポートのデフォルトのエクスポートを含むすべてを表します。

{} の前のインポートとエクスポート{} は 1 対 1 の対応関係にあると述べました。そのため、エクスポートでのエクスポートは一致しません。 import{} を使用したサポート require、exports、module.exports (次の を覚えておいてください)

これは AMD 仕様です

require

require はランタイム呼び出しですしたがって、require は理論的にはコード内のどこでも使用できます

require は動的導入をサポートしていますたとえば、これはサポートされています

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

require パス サポート変数

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

pass require の導入は割り当てのプロセスです

exports と module.exports

AMD 仕様によると

各ファイルはモジュールであり、独自のスコープがあります。ファイル内で定義された変数、関数、およびクラスはプライベートであり、他のファイルからは参照できません。

各モジュール内で、モジュール変数は現在のモジュールを表します。この変数はオブジェクトであり、そのエクスポート属性 (つまり module.exports) は外部インターフェイスです。モジュールをロードすると、実際にはモジュールの module.exports 属性がロードされます。

便宜上、Node はモジュールごとに module.exports を指すエクスポート変数を提供します。これは、各モジュールの先頭に次のような行があることと同じです。

const exports = module.exports;

So次の 2 つの記述方法は同等です

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

前述したように、各モジュールに module.exports を指すエクスポート変数を指定します。

エクスポートに値を直接割り当てることはできません。割り当ては上書きされます。

const exports = module.exports;

エクスポートに値を直接割り当てると、エクスポートと module.exports の間の関係が切断されます。

栗を見てください
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' }

引き続きコードを見ていきますoutput.js

//部分省略
exports.b = b//这样可以生效
module.exports.a = a

input.js

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

別のコードを見てくださいoutput.js

//部分省略
module.exports = { c}
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 中国語 Web サイトの他の関連記事を参照してください。