ES6模块

发表于 | 更新于: | 分类于

es6模块化

面试会问到 怎么使用es6模块 esModule模块（es6） commonjs模块(node模块)
尽量不要混用
import 导入 export导出 每个文件都是一个模块
现在新建一个a模块 （a.js）

1
2
import {c, b} from './a';
console.log(c, b); // 1 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// index.js
import _, {c, b} from './a'; // 导入的不是一个值 是一个接口
setInterval(() => {
    console.log(c, b); // 每次获取的值都会随着接口中的内容变化而变化
}, 1000);
console.log(_); 
// 这里对应的就是export default的值

// a.js
let a = 1;
let b = 2;
setInterval(() => {
    a++
}, 1000);
export { // 这个指导出的是变量 接口 例如这个定时器能够一直导出
    a as c,
    b
}
export default 'hello'; // 这个指导出具体的值
/*
打印结果：
hello
2,2
3,2
4,2
...
*/

import 语法只能放在最外层作用域中
import 语法会解析到页面的最顶端

动态导入

希望按钮一点击 再去加载文件

1
2
3
4
5
6
7
8
9
// file.js
let btn = document.createElement('button');
btn.addEventListener('click', function(){
    // import语法返回的是一个promise
    import('./file').then(data=>{
        console.log(data);
    });// es7的语法 动态的使用jsonp加载一个新的文件
})
document.body.appendChild(btn);

动态导入 可以在作用域中使用

es6模块：import * as / default export | export default