この記事の内容は、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は密接に関連しているのでまとめてください
単純に言うと、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 とエクスポートのデフォルトは同じモジュールで同時に使用されており、これはサポートされていますが、一般的には行われません
栗を見てください
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] }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' }
これは AMD 仕様です
require は動的導入をサポートしていますたとえば、これはサポートされています
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); //支持
}pass require の導入は割り当てのプロセスです
AMD 仕様によると
各ファイルはモジュールであり、独自のスコープがあります。ファイル内で定義された変数、関数、およびクラスはプライベートであり、他のファイルからは参照できません。便宜上、Node はモジュールごとに module.exports を指すエクスポート変数を提供します。これは、各モジュールの先頭に次のような行があることと同じです。
const exports = module.exports;
exports.a ='valueA1' module.exports.a='valueA1'
エクスポートに値を直接割り当てることはできません。割り当ては上書きされます。
const 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 = ainput.js
const obj = require('./output.js')
console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }//部分省略 exports.b = b//这样可以生效 module.exports.a = a
const obj = require('./output.js')
console.log(obj); //=>{ b: 'valueB1', a: 'valueA1' }//部分省略
module.exports = { c}
module.exports.a = a const obj = require('./output.js')
console.log(obj); //=>{ c: 'valueC1', a: 'valueA1' }当直接给 module.exports时，exports会失效
在ES6中export default 导出的是一个对象
在AMD中exports和module.exports导出的也都是一个对象
所以如果你手中的项目代码支持两种规范，那么事可以交叉使用的（当然不建议这么去做）
通过export导出的不一定是一个对象
output.js
//部分省略
module.exports = { c}
module.exports.a = ainputj.s
import obj from './output'
import {a} from './output'
console.log(a);//=>valueA1
console.log(obj);//=>{ c: 'valueC1', a: 'valueA1' }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' }当直接给module.export赋值时，exports会失效
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！
以上がJavaScript での AMD および ES6 モジュールのインポートとエクスポートの比較 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
