ES6模块化的实现

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

export import 工作

0 人点赞