JavaScript中AMD和ES6模块的导入导出对照

我们前端在开辟历程当中经常会碰到导入导出功用，
在导入时，有时刻是require，有时刻是import
在导出时，有时刻是exports，module.exports，有时刻是export，export default
本日我们对这些内容举行简朴的引见

import，export，export default

import，export，export default属于ES6范例

import

import 是在编译历程当中实行
也就是说是在代码实行前实行，
比方说，import背面的途径写错了，在运转代码前就会抛错，
在编写代码时，import不是一定要写在js的最前面
import敕令具有提拔效果，会提拔到全部模块的头部，起首实行。（是在编译阶段实行的）
import是静态实行的
由于import是静态实行的，不能运用表达式和变量，即在运转时才拿到效果的语法结构
比方，不能再if和else中运用import
再比方，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 的有很多种导入体式格局，

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和export default

将exoprt和export default放在一同，由于它们关联性很大
简朴说：export是导出，export default是默许导出
一个模块能够有多个export，然则只能有一个export default，export default能够和多个export共存
export default 为默许导出，导出的是用{}包裹的一个对象，以键值对的情势存在
导出的体式格局差别，导入的体式格局也就差别，
所以发起统一个项面前目今运用统一的导入导出体式格局，轻易开辟
export default解构今后就是export
经由过程两个直观的demo看下export和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是统一个a
再看一段代码(export default)

const a = 'valueA1'
export default{a}

input.js

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

看下export default的栗子中的input.js，我们稍作修改

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

我们做了些修改，然则输出没有变化，import导入的是export default下的对象，叫什么名字都能够，由于只会存在一个export default

exoprt和export default夹杂运用

exoprt和export default在统一个模块中同时运用，是支撑的，虽然我们平常不会这么做
看一个栗子
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 重命名

经由过程 exoprt和export default导出的在import引入时都支撑经由过程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' }

as背面的变量是你要在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' }

• 代表了一切，包含了export和export default导出的

我们之前说import{}和export{},是一一对应关联，所以在export导出的，在import{}不支撑运用*
关于 import，export，export default先引见到这里，我们继承

require，exports，module.exports（记得背面的s）

这是 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); //支撑
}

经由过程require引入，是一个赋值的历程

exports 与 module.exports

依据AMD范例
每一个文件就是一个模块，有本身的作用域。在一个文件内里定义的变量、函数、类，都是私有的，对其他文件不可见。
每一个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，实际上是加载该模块的module.exports属性。

为了轻易，Node为每一个模块供应一个exports变量，指向module.exports。这等同在每一个模块头部，有一行如许的敕令。

const exports = module.exports;

所以说
以下两种写法等价

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

前面说在每一个模块供应一个exports变量，指向module.exports。
所以不能直接给exports赋值，赋值会掩盖

const exports = module.exports;

直接给exports赋值会割断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.exports属于AMD范例，import，export，export default属于ES6范例
• require支撑动态导入，动态婚配途径，import对这两者都不支撑
• require是运转时挪用，import是编译时挪用
• require是赋值历程，import是解构历程
• 关于export和export default 差别的运用体式格局，import就要采用差别的援用体式格局，重要区分在于是不是存在{},export导出的，import导入须要{},导入和导出一一对应,export default默许导出的，import导入不须要{}
• exports是module.exports一种简写情势，不能直接给exports赋值
• 当直接给module.exports赋值时，exports会失效

js导入导出总结与实践

更多前端资本请关注微信民众号“前端陌上寒”

原文链接

参考链接
关于import与require的区分
JS 中的require 和 import 区分
module.exports和exports和export和export default的区分，import和require的区分

我的博客行将同步至腾讯云+社区，约请人人一同入驻：https://cloud.tencent.com/dev&＃8230;