1. 模块化
- 每个模块有自己独立的作用域
- 若没有将模块中的变量导出,则模块外的代码无法获得该变量
- 模块化的目的:防止变量污染
- import后不会多次重复导入
2. 模块化示例
- export default x - 只能导出一个变量 等同于 export {x as default}
console.log("进入模块内");
let b = 10;
export default b;
<body>
</body>
<script type="module">
import num from './practice.js';
console.log(num)
</script>
console.log("进入模块内");
let b = 10;
let c = 20;
export { b, c };
<body>
</body>
<script type="module">
import {b as d,c} from './practice.js';
console.log(d,c)
</script>
import * as obj from './practice.js'
3. 按需导入(延迟导入)
document.onclick = function{
import('./practice.js');
}
document.onclick = async function{
let res = await import('./practice.js');
}
4. 模块化为严格模式,不能用this
<script type="module">
import {b as d,c} from './practice.js';
console.log(this)
</script>
> undefined