1.准备工作
代码语言:javascript
复制<!-- 首先需要在HTML文件中引入两个js文件 类型需要设置为module -->
<script src="index.js" type="module"></script>
<script src="main.js" type="module"></script>
2.export使用
代码语言:javascript
复制//main.js
//定义一些变量和函数
var name = '张三'
var age = 20
var flag = true
function sum(num1, num2){
return num1 num2
}
//导出方式一
export {
flag, sum
}
//导出方式二
export var num1 = 1;
export var heigt = '1.88';
//导出函数/类
export function mul(num1, num2) {
return num1 * num2
}
export class Person {
run() {
console.log('跑')
}
}
//某些情况下,一个模块中包含某个功能,我们并不希望给这个功能命名,而是让导入者可以自己命名
//export default在同一个模块中,不允许同时存在多个
const address = '北京'
export default address
3.import使用
代码语言:javascript
复制//index.js
//使用export指令导出模块对外接口,就可以通过import命令来加载对应的模块
//导入{}中定义的变量
import {flag, sum} from './main.js';
if(flag) {
console.log(1) //1
console.log(sum(10, 20)) //30
}
//直接导入export定义的变量
import {num1, height} from './main.js';
console.log(num1); //1000
console.log(height); //1.88
//导入export的function/class
import {mul, Person} from './main.js';
console.log(mul(10, 20)); //200
const p = new Person();
p.run(); //跑
//导入 export default中的内容
import addr from './main.js';
console.log(addr); //北京
//全部导入
import * as a from './main.js'
console.log(a.name); //张三
console.log(a.age); //20