原生js支持,导出用export关键字,导入用import关键字。但必须在服务器环境中才能用,且html使用必须添加:type="module"
属性。
导出语法:
export 数据的定义 // 这种导出方式需要通过 import * as 变量 导入 或 import {解构} 导入
// 或
export default 数据 // 这种导出方式可以通过 import {解构} 导入 或 import 数据 导入
导入语法:
import {解构} from '文件'
import * as 对象 from '文件'
import 对象 form '文件'
import 对象, {解构} from '文件'
例:
a文件
var a = 1
export default a
export var a1 = 11
导出时使用default关键字的,当导入时,直接接收到的就是这个数据,如果还有别导出数据,必须解构,否则接收不到。
b文件
export var b = 2
export var b1 = 22
没有加default的,表示可以导出多个数据
c文件
export var c1 = 3
export var c2 = 33
在html中的使用:
<script type="module">
import moduleA,{a1} from './a.js'
import {b, b1} from './b.js'
import * as obj from './c.js'
import {a1} from './a.js'
console.log(moduleA, a1);
console.log(b, b1);
console.log(obj);
console.log(a1);
</script>
导入可以直接将导出数据接收到,并起别名。也可以将导入的所有内容解构。也可以将所有数据组成一个对象
最终结果: