前言
javascript没有模块体系,无法将大程序分拆成互相依赖的小文件,再用简单的方法将它们拼装起来.为了解决这个问题,ES6推出了export和export default.
export和export default
export和export default是es6提出来的,它在编译时就完成模块加载,export命令可以出现在模块的任何位置,只要处于模块顶层即可,如果处于块级作用域就会报错,import也是如此.
- export和export default都可以用于导出常量、函数、文件、模块等
- 在一个文件或模块中,export可以有多个,但是export default仅有一个
- export导出,import后面必须跟大括号或* as 变量名,export default导出import不能跟大括号
- export后面跟的必须有变量名和值,export default后面跟值,因为export default已经为导出的值起了一个系统默认的变量名default,所以后面只需要值
- export能导出变量/表达式，export default不可以
// vue文件
import * as exportJs from './export.js'
export default {
mounted () {
console.log('exportJs', exportJs)
}
}
// js文件
export function add () {}
等同于
let aaa = function () {}
export { aaa }
export let firstname = 1
等同于
let secondname = 2
export { secondname }
从上面图片我们可以看出export后面必须跟变量名和值,可以直接声明或写在一个对象中,都会以键值对的形式导出数据.
let demo1 = {
a: 1
}
export default demo1
export default [
{ b: 1 }
]
export default function () {}
export default function add () {}
export default new Router({ routes })
以上五种写法都可以,export default后面只能跟值.
总结:export后面必须有变量名和值,导出的数据是键值对形式,而export default后面只能是值,因为它已经有变量名default
require和module.exports
require和module.exports是CommonJS规范,它是在运行时加载,就是说运行时才能得到这个对象,module.exports后面跟的值和export default一样
module.exports = [1,2]
module.exports = { a: 1 }
module.exports = function () {}
module.exports = function add() {}
module.exports = 123
以上五种写法都可以
联系
module.export可以用import来引入,后面可以跟大括号或不跟,跟的话相当于解构赋值,不跟就是整体引入,export也可以用require来引入.require('path.js')或import('path.js')都表示执行这个模块,不会返回值.
使用场景
export一般导出方法,引入的时候使用大括号按需引入你需要的方法,export default导出对象或数组,比如接口api对象,routes路由数组,但是引入的时候会整体引入,module.exports一般导出对象,可以用import或require整体引入或按需引入,这样子比较灵活,所以module.exports和import使用的场景也挺多的,import只能写在js文件顶部,但是require可以写在任何地方,所以要根据场景不同使用不同方法.
总结:export后面跟变量名和值,import后面是{}或* as 变量名,export default后面跟值,import后面没有{},module.exports后面和export default一样都是值,require后面有{}表示解构赋值,没有表示整体引入,import和require都可以引入export和module.exports,import只能写在js文件顶部,但是require可以写在任何地方.CommonJS模块输出是一个值的拷贝，ES6模块输出是值的引用.CommonJS模块是运行时加载，ES6模块是编译时输出接口.